.question-row strong,
.question-row p,
#exam-questions legend,
#exam-questions label {
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Sans", Manrope, sans-serif;
    font-variant-numeric: lining-nums;
}

.payment-dialog {
    width: min(430px, calc(100% - 32px));
    border: 0;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28)
}

.payment-dialog::backdrop {
    background: rgba(25, 25, 25, .48)
}

.payment-dialog>div {
    padding: 32px;
    text-align: center
}

.payment-dialog h2 {
    margin: 15px 0 8px
}

.payment-dialog p {
    color: #6d6a6c
}

.payment-spinner {
    display: inline-block;
    width: 38px;
    height: 38px;
    border: 4px solid #e6e9d6;
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: payment-spin .8s linear infinite
}

@keyframes payment-spin {
    to {
        transform: rotate(360deg)
    }
}

.wallet-search {
    width: min(260px, 100%);
    padding: 9px 12px;
    border: 1px solid #dcded2;
    border-radius: 9px;
    background: #fbfcf7
}

.wallet-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 15px
}

.wallet-table-footer>div:last-child {
    display: flex;
    align-items: center;
    gap: 10px
}

.wallet-table-footer select {
    width: 72px;
    padding: 7px
}

.ledger-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700
}

.ledger-credit {
    background: #e5f4ed;
    color: #176543
}

.ledger-debit {
    background: #fff0ec;
    color: #a04432
}

@media(max-width:600px) {
    .wallet-table-footer {
        align-items: flex-start;
        flex-direction: column
    }

    .page-section-heading {
        align-items: flex-start;
        flex-direction: column
    }
}

/* eSlate ecosystem — logo-derived colors are supplied by assets/brand.php. */
:root {
    --primary-color: #363435;
    --secondary-color: #f8f8f8;
    --accent-color: #e5eb30;
    --paper: #fafaf7;
    --muted: #797975;
    --line: #e5e5de;
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'DM Sans', sans-serif
}

* {
    box-sizing: border-box
}

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

body {
    margin: 0;
    color: var(--primary-color);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
    -webkit-font-smoothing: antialiased
}

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

button,
input {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid #657829;
    outline-offset: 5px
}

[hidden] {
    display: none !important
}

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

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 600
}

p {
    line-height: 1.75
}

::selection {
    background: var(--accent-color);
    color: #272724
}

.site-container {
    width: min(1280px, calc(100% - 112px));
    margin: auto
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 247, .94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line)
}

.nav-row {
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px
}

.brand-logo {
    width: 120px;
    height: auto;
    display: block
}

.brand {
    flex-shrink: 0
}

.main-nav {
    display: flex;
    gap: 29px;
    align-items: center;
    font-size: 13px;
    font-weight: 500
}

.main-nav>a:not(.button) {
    position: relative;
    white-space: nowrap
}

.main-nav>a.active:after {
    content: '';
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: var(--primary-color);
    position: absolute;
    bottom: -12px;
    left: 50%
}

.main-nav a:hover,
.footer-main nav a:hover {
    color: #6e7527
}

.nav-soon {
    font-size: 8px;
    background: #eaeae4;
    padding: 3px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 2px;
    letter-spacing: .4px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 17px 23px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    transition: transform .2s, background .2s, box-shadow .2s
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #2727240d
}

.button span {
    font-size: 20px;
    line-height: .8
}

.button-dark {
    background: var(--primary-color);
    color: #fff
}

.button-dark:hover {
    background: #20201d;
    color: var(--accent-color)
}

.button-outline {
    border-color: #d4d4cb;
    background: transparent;
    color: var(--primary-color)
}

.button-outline:hover {
    background: #fff
}

.button-accent {
    background: var(--accent-color);
    color: var(--primary-color)
}

.nav-launch {
    padding: 13px 17px;
    font-size: 12px
}

.menu-toggle,
.mobile-launch {
    display: none
}

.hero {
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    align-items: center;
    gap: 30px;
    min-height: 690px;
    padding-top: 62px;
    padding-bottom: 73px;
    overflow: visible
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    margin-bottom: 26px
}

.live-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c8051;
    box-shadow: 0 0 0 4px #6c80510c
}

.hero h1 {
    font-size: clamp(44px, 4.25vw, 65px);
    line-height: 1.14;
    letter-spacing: -3.1px;
    margin-bottom: 26px;
    font-weight: 600
}

.marked {
    position: relative;
    white-space: nowrap;
    z-index: 0
}

.marked:after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: -2px;
    right: -4px;
    height: 15px;
    background: var(--accent-color);
    z-index: -1;
    transform: rotate(-1.5deg);
    border-radius: 3px
}

.hero-description {
    color: #75756f;
    font-size: 15px;
    line-height: 1.9;
    max-width: 420px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 29px;
    flex-wrap: wrap
}

.hero-note {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: var(--muted)
}

.mini-squares {
    display: flex;
    padding-left: 4px
}

.mini-squares i {
    width: 17px;
    height: 17px;
    background: #ddddce;
    border: 2px solid var(--paper);
    border-radius: 5px;
    margin-left: -4px;
    transform: rotate(-8deg)
}

.mini-squares i:nth-child(2) {
    background: var(--accent-color);
    transform: rotate(8deg)
}

.mini-squares i:nth-child(3) {
    background: #464a3c
}

.hero-visual {
    position: relative;
    min-height: 515px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate
}

.orbit {
    position: absolute;
    border: 1px solid #deded3;
    border-radius: 50%;
    z-index: -2;
    width: 490px;
    height: 490px;
    background: radial-gradient(circle, #ecedce66 0, transparent 67%)
}

.orbit-two {
    width: 590px;
    height: 380px;
    transform: rotate(-30deg);
    background: none;
    border-style: dashed;
    border-color: #e6e6dc
}

.orbit-point {
    position: absolute;
    width: 13px;
    height: 13px;
    background: var(--accent-color);
    border-radius: 50%;
    top: 5%;
    right: 18%;
    box-shadow: 0 0 0 8px #e5eb3033
}

.app-preview {
    width: 455px;
    max-width: 100%;
    border: 1px solid #46463c;
    border-radius: 14px;
    background: #30332c;
    box-shadow: 0 25px 60px #393a321e;
    transform: rotate(-3deg);
    transition: transform .5s;
    overflow: hidden
}

.hero-visual:hover .app-preview {
    transform: rotate(-1deg) translateY(-4px)
}

.preview-top {
    height: 53px;
    border-bottom: 1px solid #ffffff15;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 22px;
    color: #fff
}

.preview-mark {
    font-family: Georgia, serif;
    font-size: 26px
}

.preview-mark>span {
    font-size: 20px
}

.preview-tag {
    font-size: 6px;
    letter-spacing: 1px;
    color: #c2c6b6;
    margin-left: auto
}

.avatar {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    font-size: 9px;
    color: #34362e;
    background: #dcddcc
}

.preview-content {
    padding: 23px
}

.preview-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.preview-greeting small {
    font-size: 7px;
    letter-spacing: 1.3px;
    color: #b9bdac
}

.preview-greeting h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.5px;
    color: #f5f5ed;
    margin: 7px 0 20px
}

.sun-icon {
    font-size: 39px;
    color: var(--accent-color);
    margin-top: -7px
}

.preview-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 16px
}

.preview-tabs button {
    color: #c9ccbd;
    border: 1px solid #ffffff19;
    border-radius: 5px;
    background: transparent;
    padding: 9px 16px;
    font-size: 10px;
    transition: background .2s
}

.preview-tabs button[aria-selected=true] {
    color: #333629;
    background: var(--accent-color);
    border-color: var(--accent-color)
}

.sample-card {
    background: #fafaf3;
    padding: 21px;
    border-radius: 8px;
    min-height: 250px
}

.sample-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    letter-spacing: .6px;
    color: #7c8070
}

.sample-heading>span:first-child {
    background: #e8ebd8;
    padding: 5px 7px;
    border-radius: 3px
}

.sample-card h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 12px 0 12px;
    letter-spacing: -.7px
}

.sample-card>p {
    font-size: 11px;
    margin-bottom: 13px
}

.sample-options {
    display: flex;
    gap: 7px
}

.sample-options button {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    border: 1px solid #dbddcf;
    border-radius: 5px;
    padding: 9px;
    font-size: 12px;
    background: #fff;
    text-align: left;
    color: #46483b
}

.sample-options button span {
    font-size: 8px;
    color: #979b8c
}

.sample-options button.selected {
    border-color: #959e46;
    background: #eef2d4
}

.sample-options button i {
    font-style: normal;
    margin-left: auto;
    font-size: 10px
}

.sample-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 7px;
    color: #747a5e;
    margin-top: 13px
}

.demo-label {
    text-transform: uppercase;
    font-size: 6px;
    letter-spacing: .4px;
    color: #929688
}

.preview-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 7px;
    color: #b3b9a5;
    margin-top: 15px
}

.preview-footer>span:first-child {
    display: flex;
    gap: 7px;
    align-items: center
}

.preview-footer .live-dot {
    width: 4px;
    height: 4px;
    background: var(--accent-color)
}

.floating-label {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #eaeae2;
    border-radius: 10px;
    padding: 13px 17px;
    box-shadow: 0 10px 30px #33332d0d;
    font-size: 9px;
    color: #999b90;
    animation: float 6s ease-in-out infinite
}

.floating-label strong {
    display: block;
    color: #494d3e;
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px
}

.float-one {
    right: -8px;
    top: 25px;
    transform: rotate(4deg)
}

.float-two {
    left: 3px;
    bottom: 0;
    animation-delay: -3s
}

.icon-box {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef0d1;
    color: #718127;
    font-size: 15px
}

.connected-icon {
    font-size: 29px;
    color: #777e54
}

.school-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0;
    font-size: 10px
}

.school-row small {
    display: block;
    color: var(--muted);
    font-size: 8px;
    margin-top: 3px
}

.student-avatar {
    background: #e0e7c7;
    padding: 9px;
    border-radius: 8px;
    font-size: 9px
}

.student-avatar.purple {
    background: #e8e1f1
}

.status-pill {
    font-size: 7px;
    margin-left: auto;
    color: #68733e;
    border: 1px solid #dfe4cf;
    border-radius: 20px;
    padding: 4px 7px
}

.concept-note {
    font-size: 8px !important;
    color: var(--muted);
    margin: 17px 0 0 !important
}

.principles-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0
}

.principles-strip>.site-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.principles-strip>.site-container>span {
    font-size: 9px;
    letter-spacing: 1.4px;
    color: #97978c
}

.principles-strip .site-container>div {
    display: flex;
    gap: 66px;
    font-size: 13px
}

.principles-strip i {
    font-style: normal;
    color: #9b9b85;
    margin-left: 17px
}

.section-space {
    padding-top: 98px;
    padding-bottom: 95px
}

.section-intro {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-end;
    margin-bottom: 43px
}

.section-intro .eyebrow {
    margin-bottom: 18px
}

.section-intro h2,
.contact-content h2 {
    font-size: 43px;
    line-height: 1.18;
    letter-spacing: -1.8px;
    margin: 0
}

.serif-word {
    font-family: Georgia, serif;
    font-weight: 400;
    font-style: italic
}

.section-intro>p {
    font-size: 13px;
    color: var(--muted);
    max-width: 363px;
    margin-bottom: 2px
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 23px
}

.product-card {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    padding: 34px;
    scroll-margin-top: 120px;
    transition: transform .3s, box-shadow .3s
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px #31322a0d
}

.quiz-card {
    background: #34372f;
    color: #f6f7ef
}

.school-card {
    background: #eeefe6;
    color: #3d4134
}

.product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px
}

.product-symbol {
    font-size: 32px;
    color: var(--accent-color);
    line-height: 1
}

.school-card .product-symbol {
    color: #70775d
}

.product-badge {
    font-size: 8px;
    letter-spacing: .6px;
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px
}

.product-badge .live-dot {
    background: var(--accent-color);
    width: 4px;
    height: 4px
}

.school-card .product-badge {
    border-color: #cbd0bb;
    color: #747b61
}

.product-overline {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #b1b99e;
    margin-bottom: 9px
}

.school-card .product-overline {
    color: #8c927e
}

.product-card h3 {
    font-size: 31px;
    letter-spacing: -1px;
    font-weight: 400;
    position: relative;
    z-index: 1
}

.product-card h3 strong {
    font-weight: 600
}

.product-card h3>span {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 400;
    color: #c1c6b4;
    margin-top: 11px
}

.school-card h3>span {
    color: #747d60
}

.product-description {
    font-size: 12px;
    line-height: 1.85;
    max-width: 380px;
    color: #a9b09b;
    margin-top: 19px;
    position: relative;
    z-index: 1
}

.school-card .product-description {
    color: #7a826c
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin: 24px 0 31px;
    font-size: 10px;
    color: #d3d8c8;
    position: relative;
    z-index: 1
}

.school-card .feature-grid {
    color: #6d765c
}

.product-link {
    border-top: 1px solid #ffffff1c;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    z-index: 1
}

.product-link span {
    font-size: 24px
}

.quiz-card .product-link:hover {
    color: var(--accent-color)
}

.school-card .product-link {
    border-color: #d5dac7
}

.card-watermark {
    position: absolute;
    right: -2px;
    bottom: 69px;
    font-family: Georgia, serif;
    font-size: 260px;
    line-height: 1;
    opacity: .025;
    pointer-events: none
}

.platform-section {
    display: flex;
    gap: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 46px 55px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(115deg, #f1f2e7, #f7f7f1)
}

.platform-copy .eyebrow {
    font-size: 8px;
    margin-bottom: 15px
}

.platform-copy h2 {
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -1px
}

.platform-copy p {
    max-width: 335px;
    color: var(--muted);
    font-size: 11px;
    margin: 15px 0 0
}

.platform-devices {
    display: flex;
    gap: 44px;
    align-items: center
}

.platform-devices>div {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px
}

.platform-devices svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: #656e50;
    stroke-width: 1.5;
    margin-bottom: 6px;
    transition: transform .3s
}

.platform-devices>div:hover svg {
    transform: translateY(-6px)
}

.platform-devices strong {
    font-size: 11px;
    font-weight: 500
}

.platform-devices span {
    font-size: 8px;
    color: var(--muted);
    white-space: nowrap
}

.contact-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-left: 50px;
    padding-right: 60px
}

.contact-content .eyebrow {
    font-size: 9px;
    margin-bottom: 22px
}

.contact-content p {
    max-width: 360px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 21px
}

.text-link {
    font-size: 12px;
    margin-left: 13px
}

.text-link span {
    margin-left: 13px
}

.contact-art {
    width: 310px;
    height: 280px;
    position: relative;
    isolation: isolate
}

.slate-sheet {
    position: absolute;
    left: 50px;
    top: 20px;
    width: 169px;
    height: 211px;
    border-radius: 8px
}

.slate-sheet.back {
    background: #eceee0;
    transform: rotate(-16deg) translate(-22px, -4px)
}

.slate-sheet.front {
    background: var(--accent-color);
    transform: rotate(9deg);
    box-shadow: 0 20px 40px #414c1917;
    padding: 19px 22px;
    animation: float 8s ease-in-out infinite
}

.slate-sheet>span {
    font-size: 90px;
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--font-heading);
    letter-spacing: -8px
}

.slate-sheet i {
    height: 1px;
    background: #3d41383d;
    display: block;
    margin-top: 13px
}

.slate-sheet i:nth-of-type(2) {
    width: 70%
}

.slate-sheet small {
    font-size: 6px;
    letter-spacing: 1px;
    margin-top: 21px;
    display: block
}

.art-spark {
    position: absolute;
    right: 19px;
    top: 6px;
    font-size: 70px;
    color: #454938
}

.site-footer {
    border-top: 1px solid var(--line)
}

.footer-main {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 35px 0
}

.footer-main .brand-logo {
    width: 101px
}

.footer-main>p {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.footer-main nav {
    display: flex;
    gap: 25px;
    margin-left: auto;
    font-size: 10px
}

.footer-bottom {
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    font-size: 8px;
    color: #909086
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 7px
}

.status-indicator .live-dot {
    width: 4px;
    height: 4px
}

.status-divider {
    margin: 0 3px;
    color: #b6b6a7
}

.skip-link {
    position: fixed;
    top: -80px;
    left: 15px;
    z-index: 200;
    background: #fff;
    padding: 12px
}

.skip-link:focus {
    top: 12px
}

.reveal {
    opacity: 1;
    transform: none
}

.motion-ready .reveal:not(.visible) {
    opacity: 0;
    transform: translateY(17px)
}

.motion-ready .reveal {
    transition: opacity .7s ease, transform .7s ease
}

.motion-ready .product-card.reveal {
    transition: opacity .7s ease, transform .3s ease, box-shadow .3s ease
}

@keyframes float {

    0%,
    100% {
        translate: 0 0
    }

    50% {
        translate: 0 -8px
    }
}

.sub-header .main-nav {
    margin-left: auto
}

.subpage {
    min-height: 75vh;
    padding-top: 68px;
    padding-bottom: 80px
}

.sub-hero {
    max-width: 790px;
    margin: 0 auto 48px;
    text-align: center
}

.sub-hero .eyebrow {
    justify-content: center
}

.sub-hero h1 {
    font-size: clamp(38px, 5vw, 63px);
    letter-spacing: -2px;
    line-height: 1.13
}

.sub-hero p {
    color: var(--muted);
    max-width: 535px;
    margin: 20px auto
}

.sub-hero .hero-actions {
    justify-content: center
}

.entry-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 25px;
    max-width: 960px;
    margin: auto
}

.entry-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px;
    background: #fff
}

.entry-card h2 {
    font-size: 22px;
    letter-spacing: -.7px
}

.entry-card p {
    font-size: 13px;
    color: var(--muted)
}

.entry-card label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin: 17px 0 8px
}

.entry-card input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9dcd1;
    border-radius: 6px;
    background: #fafbf7;
    font-size: 13px
}

.entry-card .button {
    margin-top: 20px;
    width: 100%
}

.entry-card code {
    font-size: 11px;
    word-break: break-word;
    color: #647041
}

.entry-card ul {
    font-size: 12px;
    color: var(--muted);
    padding-left: 18px;
    line-height: 2.3
}

.entry-card.dark {
    background: #34372f;
    color: white;
    border-color: #34372f
}

.entry-card.dark p,
.entry-card.dark ul {
    color: #b6bda9
}

.form-feedback {
    font-size: 12px;
    margin-top: 15px;
    min-height: 20px
}

.form-feedback.error {
    color: #a33c35
}

.form-feedback.success {
    color: #557635
}

.form-feedback a {
    text-decoration: underline
}

.sub-footer {
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted)
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.roadmap-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff
}

.roadmap-card .product-symbol {
    display: block;
    margin-bottom: 25px;
    color: #7c8759;
    font-size: 24px
}

.roadmap-card h2 {
    font-size: 18px
}

.roadmap-card p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 0
}

.coming-note {
    text-align: center;
    margin: 40px auto 0;
    max-width: 510px;
    font-size: 12px;
    color: var(--muted)
}

.session-panel {
    max-width: 640px;
    margin: auto
}

.session-panel .entry-card {
    margin-bottom: 18px
}

.session-panel h2 {
    font-size: 24px
}

.session-panel .instructions {
    white-space: pre-wrap;
    color: var(--muted);
    font-size: 14px
}

.inline-status {
    padding: 6px 10px;
    border: 1px solid #dbe0cc;
    border-radius: 20px;
    font-size: 10px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 12px
}

.public-contact {
    font-size: 14px;
    margin-top: 20px
}

.social-links {
    display: flex;
    gap: 16px
}

.social-links a {
    text-decoration: underline;
    text-underline-offset: 4px
}

@media(min-width:1500px) {
    .hero h1 {
        font-size: 67px
    }

    .hero {
        min-height: 730px
    }
}

@media(max-width:1199px) {
    .site-container {
        width: calc(100% - 72px)
    }

    .main-nav {
        gap: 18px;
        font-size: 12px
    }

    .hero {
        gap: 20px;
        min-height: 635px
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -2.5px
    }

    .app-preview {
        width: 400px
    }

    .hero-visual {
        min-height: 470px
    }

    .orbit {
        width: 430px;
        height: 430px
    }

    .orbit-two {
        width: 480px;
        height: 320px
    }

    .float-one {
        right: -10px;
        top: 5px
    }

    .float-two {
        left: -6px;
        bottom: -4px
    }

    .hero-actions .button {
        padding: 16px 18px;
        font-size: 12px;
        gap: 17px
    }

    .platform-devices {
        gap: 27px
    }

    .principles-strip .site-container>div {
        gap: 28px
    }

    .product-card {
        padding: 29px
    }

    .contact-section {
        padding-left: 25px;
        padding-right: 25px
    }
}

@media(max-width:991px) {
    .nav-row {
        height: 80px
    }

    .main-nav {
        position: absolute;
        top: 79px;
        left: 0;
        right: 0;
        padding: 24px 36px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        align-items: flex-start;
        gap: 22px;
        display: none;
        box-shadow: 0 12px 20px #3333330a
    }

    .main-nav.is-open {
        display: flex;
        flex-direction: column
    }

    .main-nav>a.active:after {
        display: none
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 5px;
        background: transparent;
        margin-left: auto
    }

    .menu-toggle span {
        width: 20px;
        height: 1px;
        background: var(--primary-color);
        transition: transform .2s
    }

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

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

    .nav-launch {
        display: none
    }

    .mobile-launch {
        display: inline-flex
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 55px;
        gap: 45px;
        padding-bottom: 55px
    }

    .hero-copy {
        text-align: center
    }

    .hero-copy .eyebrow,
    .hero-actions,
    .hero-note {
        justify-content: center
    }

    .hero h1 {
        font-size: 61px
    }

    .hero-description {
        margin: auto;
        max-width: 520px
    }

    .hero-visual {
        max-width: 570px;
        width: 100%;
        margin: auto;
        min-height: 515px
    }

    .app-preview {
        width: 455px
    }

    .orbit {
        width: 490px;
        height: 490px
    }

    .orbit-two {
        width: 570px;
        height: 370px
    }

    .float-one {
        right: 0;
        top: 25px
    }

    .float-two {
        left: 0;
        bottom: 0
    }

    .hero-note {
        margin-top: 23px
    }

    .principles-strip>.site-container {
        flex-direction: column;
        gap: 15px
    }

    .principles-strip .site-container>div {
        gap: 55px
    }

    .section-intro h2,
    .contact-content h2 {
        font-size: 36px
    }

    .section-intro>p {
        max-width: 295px;
        font-size: 12px
    }

    .product-card {
        padding: 25px
    }

    .product-card h3 {
        font-size: 27px
    }

    .feature-grid {
        grid-template-columns: 1fr;
        font-size: 11px
    }

    .platform-section {
        padding: 35px;
        gap: 20px
    }

    .platform-devices {
        gap: 22px
    }

    .platform-copy h2 {
        font-size: 26px
    }

    .platform-devices span {
        font-size: 7px
    }

    .platform-copy p {
        max-width: 240px
    }

    .contact-section {
        padding-left: 0;
        padding-right: 0
    }

    .contact-content .hero-actions {
        justify-content: flex-start
    }

    .footer-main {
        flex-wrap: wrap;
        gap: 20px
    }

    .footer-main nav {
        width: 100%;
        margin-left: 0
    }

    .footer-bottom {
        flex-wrap: wrap
    }

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

@media(max-width:575px) {
    .site-container {
        width: calc(100% - 40px)
    }

    .nav-row {
        height: 72px
    }

    .brand-logo {
        width: 109px
    }

    .main-nav {
        top: 71px;
        padding: 25px 20px
    }

    .hero {
        padding-top: 43px;
        gap: 34px;
        padding-bottom: 43px
    }

    .eyebrow {
        font-size: 8px;
        letter-spacing: 1.6px;
        margin-bottom: 24px
    }

    .hero h1 {
        font-size: 42px;
        letter-spacing: -2px;
        line-height: 1.17
    }

    .marked:after {
        height: 11px;
        bottom: 1px
    }

    .hero-description {
        font-size: 13px;
        line-height: 1.8;
        max-width: 320px
    }

    .desktop-break {
        display: none
    }

    .hero-actions {
        gap: 9px;
        margin-top: 23px
    }

    .hero-actions .button {
        font-size: 11px;
        padding: 14px 15px;
        gap: 13px
    }

    .hero-note {
        font-size: 8px;
        gap: 8px
    }

    .hero-visual {
        min-height: 430px
    }

    .app-preview {
        width: calc(100% - 14px);
        transform: rotate(-2deg)
    }

    .orbit {
        width: 330px;
        height: 330px;
        max-width: 100%
    }

    .orbit-two {
        width: 100%;
        height: 340px;
        transform: rotate(-15deg)
    }

    .orbit-point {
        top: 0
    }

    .preview-top {
        height: 46px;
        padding: 0 17px
    }

    .preview-content {
        padding: 17px
    }

    .preview-greeting h2 {
        font-size: 19px;
        margin-bottom: 16px
    }

    .preview-greeting small {
        font-size: 6px
    }

    .sun-icon {
        font-size: 31px
    }

    .preview-tabs button {
        padding: 8px 12px;
        font-size: 9px
    }

    .sample-card {
        padding: 17px;
        min-height: 233px
    }

    .sample-card h3 {
        font-size: 20px
    }

    .preview-footer {
        font-size: 6px
    }

    .floating-label {
        padding: 9px 11px;
        gap: 8px;
        font-size: 7px;
        border-radius: 7px
    }

    .floating-label strong {
        font-size: 9px
    }

    .float-one {
        top: -2px;
        right: -2px
    }

    .float-two {
        bottom: -8px;
        left: -2px
    }

    .icon-box {
        width: 25px;
        height: 25px;
        font-size: 12px
    }

    .connected-icon {
        font-size: 23px
    }

    .principles-strip {
        padding: 21px 0
    }

    .principles-strip>.site-container>span {
        font-size: 7px
    }

    .principles-strip .site-container>div {
        gap: 20px;
        font-size: 9px;
        width: 100%;
        justify-content: center
    }

    .principles-strip i {
        margin-left: 4px
    }

    .section-space {
        padding-top: 58px;
        padding-bottom: 55px
    }

    .section-intro {
        display: block;
        margin-bottom: 30px
    }

    .section-intro h2,
    .contact-content h2 {
        font-size: 35px
    }

    .section-intro>p {
        margin-top: 22px;
        max-width: none;
        font-size: 12px
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 19px
    }

    .product-card {
        padding: 28px
    }

    .product-top {
        margin-bottom: 30px
    }

    .product-card h3 {
        font-size: 29px
    }

    .product-description {
        font-size: 12px
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
        font-size: 9px;
        gap: 13px 9px
    }

    .product-link {
        font-size: 11px
    }

    .platform-section {
        display: block;
        padding: 30px 24px
    }

    .platform-copy h2 {
        font-size: 28px
    }

    .platform-copy p {
        max-width: 100%;
        font-size: 11px
    }

    .platform-devices {
        margin-top: 32px;
        justify-content: space-between;
        gap: 12px
    }

    .platform-devices svg {
        width: 32px;
        height: 32px
    }

    .platform-devices span {
        font-size: 6px
    }

    .platform-devices strong {
        font-size: 10px
    }

    .contact-section {
        position: relative;
        overflow: hidden;
        display: block
    }

    .contact-content {
        position: relative;
        z-index: 1
    }

    .contact-content p {
        max-width: 290px;
        font-size: 12px
    }

    .contact-art {
        display: none
    }

    .contact-content .hero-actions {
        gap: 8px
    }

    .contact-content .button {
        font-size: 11px
    }

    .text-link {
        font-size: 11px;
        margin-left: 7px
    }

    .footer-main {
        padding: 28px 0;
        gap: 17px
    }

    .footer-main>p {
        font-size: 9px
    }

    .footer-main .brand-logo {
        width: 91px
    }

    .footer-main nav {
        gap: 22px;
        font-size: 10px
    }

    .footer-bottom {
        padding: 20px 0;
        gap: 17px;
        font-size: 8px
    }

    .status-indicator {
        order: 3;
        width: 100%
    }

    .footer-bottom>a {
        margin-left: auto
    }

    .entry-grid,
    .roadmap-grid {
        grid-template-columns: 1fr
    }

    .entry-card {
        padding: 25px
    }

    .subpage {
        padding-top: 43px
    }

    .sub-hero h1 {
        font-size: 40px
    }

    .sub-hero p {
        font-size: 13px
    }

    .sub-header .main-nav {
        position: static;
        display: flex;
        flex-direction: row;
        padding: 0;
        border: 0;
        box-shadow: none;
        font-size: 11px
    }

    .sub-header .nav-row {
        gap: 15px
    }

    .roadmap-card {
        padding: 25px
    }

    .roadmap-card .product-symbol {
        margin-bottom: 17px
    }

    .public-contact {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }

    .motion-ready .reveal:not(.visible) {
        opacity: 1;
        transform: none
    }
}

@media(max-width:575px) {
    .orbit-two {
        width: 85%;
        height: 300px
    }

    .hero h1 {
        font-size: clamp(32px, 10.7vw, 42px)
    }
}

.auth-tabs {
    display: flex;
    gap: 5px;
    padding: 5px;
    background: #f0f1e9;
    border-radius: 7px;
    margin-bottom: 25px
}

.auth-tabs button {
    flex: 1;
    border: 0;
    border-radius: 5px;
    background: transparent;
    padding: 11px 7px;
    font-size: 12px;
    color: #747965
}

.auth-tabs button[aria-pressed=true] {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 2px 7px #353b2310
}

.entry-card select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9dcd1;
    border-radius: 6px;
    background: #fafbf7;
    font-size: 12px;
    color: var(--primary-color)
}

.entry-card .field-hint {
    font-size: 10px;
    line-height: 1.7;
    margin-top: 10px
}

.inline-link {
    text-decoration: underline;
    text-underline-offset: 3px
}

.setup-notice {
    max-width: 960px;
    margin: 0 auto 25px;
    padding: 17px 22px;
    border: 1px solid #dddba3;
    background: #f5f5df;
    border-radius: 8px;
    font-size: 12px;
    color: #77703b
}

#auth-card,
#account-view {
    scroll-margin-top: 105px
}

.participant-entry {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin: 0 auto 30px
}

.invite-banner {
    max-width: 960px;
    margin: 0 auto 25px;
    padding: 25px 30px;
    border: 1px solid #d7ddb9;
    border-radius: 12px;
    background: #f0f3df
}

.invite-banner h2 {
    font-size: 24px
}

.invite-banner p {
    font-size: 13px;
    margin-bottom: 8px
}

.wallet-notice:not(:empty) {
    background: #faf1d5;
    color: #7a5b1b;
    border: 1px solid #ead79d;
    padding: 13px;
    border-radius: 6px
}

.billing-note {
    font-weight: 600;
    color: #505d2c !important
}

.test-card {
    padding: 22px;
    margin: 18px 0 !important
}

.test-card h3 {
    font-size: 20px
}

.test-card .button {
    font-size: 11px;
    padding: 14px
}

.exam-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center
}

.exam-toolbar [role=timer] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap
}

#exam-questions fieldset {
    margin: 24px 0;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 8px
}

#exam-questions legend {
    float: none;
    width: auto;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 500
}

#exam-questions label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px
}

#exam-questions input {
    width: 18px;
    height: 18px;
    accent-color: #687731;
    margin: 0;
    flex-shrink: 0
}

#wallet-panel .button {
    margin-right: 8px
}

.form-feedback input {
    display: block;
    width: 100%;
    margin-top: 12px
}

#creator-builder {
    max-width: 1000px
}

#creator-builder textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    padding: 12px;
    border: 1px solid #d6d8ce;
    border-radius: 10px;
    font: inherit
}

#creator-builder label {
    display: block;
    margin: 14px 0
}

#creator-builder .builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px
}

#creator-builder details {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #d6d8ce;
    border-radius: 12px
}

#creator-builder pre {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    background: #f6f7f1;
    padding: 20px
}

#creator-builder form {
    margin-bottom: 24px
}

#creator-builder button {
    margin: 8px 8px 8px 0
}

#creator-builder input,
#creator-builder select {
    width: 100%
}

@media(max-width:600px) {
    #creator-builder .builder-grid {
        grid-template-columns: 1fr
    }
}

.app-page {
    padding-top: 54px;
    padding-bottom: 80px
}

.app-heading {
    max-width: 760px;
    margin: 0 0 32px
}

.app-heading h1 {
    margin: 6px 0 12px
}

.app-actions {
    display: flex;
    gap: 12px;
    margin: 0 0 36px
}

.app-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px
}

.app-card-grid .entry-card {
    margin: 0
}

.app-nav {
    align-items: center
}

.nav-signout {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    padding: 8px
}

.wallet-layout,
.editor-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px
}

.builder-card {
    max-width: 980px
}

.builder-card textarea,
.editor-layout textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #d6d8ce;
    border-radius: 10px;
    font: inherit
}

.builder-card label,
.editor-layout label {
    display: block;
    margin: 14px 0
}

.builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px
}

.builder-grid input,
.builder-grid select,
.builder-card input,
.builder-card select,
.editor-layout input,
.editor-layout select {
    width: 100%
}

.auth-page .auth-card {
    max-width: 560px;
    margin: 30px 0 80px
}

.page-section-heading {
    margin: 24px 0 16px
}

@media(max-width:700px) {

    .wallet-layout,
    .editor-layout,
    .builder-grid {
        grid-template-columns: 1fr
    }

    .app-nav a:nth-child(4) {
        display: none
    }

    .app-page {
        padding-top: 30px
    }
}

.app-page {
    padding-top: 30px;
    padding-bottom: 48px;
    max-width: 1180px
}

.app-heading {
    margin: 0 0 20px
}

.app-heading h1 {
    font-size: clamp(2rem, 4vw, 3.2rem)
}

.compact-card {
    padding: 26px
}

.page-section-heading {
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.app-actions {
    margin: 0 0 20px
}

.wallet-layout,
.editor-layout {
    gap: 16px;
    margin-bottom: 16px
}

.entry-card {
    box-shadow: 0 10px 30px rgba(54, 52, 53, .045)
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px
}

.app-table th {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #77756e;
    padding: 0 12px 10px;
    text-align: left
}

.app-table td {
    padding: 14px 12px;
    border-top: 1px solid #e7e7df;
    vertical-align: middle
}

.app-table td strong {
    display: block
}

.app-table td small {
    display: block;
    color: #77756e;
    margin-top: 3px
}

.status-pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef1df;
    color: #536000;
    font-size: .75rem;
    text-transform: capitalize
}

.table-action {
    color: #3a3839;
    font-weight: 700;
    text-decoration: none
}

.empty-row {
    text-align: center;
    color: #77756e;
    padding: 30px !important
}

.question-list {
    display: grid;
    gap: 9px
}

.question-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e5e5dc;
    border-radius: 12px;
    background: linear-gradient(100deg, #fff, #fbfcf5)
}

.question-row>div:first-child {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.question-row strong {
    display: block
}

.question-row p {
    margin: 5px 0 0;
    color: #72716d;
    font-size: .88rem
}

.question-number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-color);
    font-weight: 800
}

.question-actions {
    display: flex;
    gap: 8px
}

.button-danger {
    background: #fff3f2;
    border: 1px solid #edb9b5;
    color: #9e3028
}

.question-dialog {
    width: min(720px, calc(100% - 32px));
    border: 0;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .25)
}

.question-dialog::backdrop {
    background: rgba(23, 23, 23, .48)
}

.icon-button {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer
}

.toast-region {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5000;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 10px
}

.app-toast {
    display: grid;
    grid-template-columns: 28px 1fr 26px;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border-radius: 12px;
    background: #303033;
    color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .2);
    animation: toast-in .25s ease-out
}

.app-toast-success {
    background: #265f4e
}

.app-toast-warning {
    background: #88621d
}

.app-toast-danger {
    background: #963e38
}

.app-toast-info {
    background: #315a79
}

.toast-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .2);
    font-weight: 800
}

.app-toast button {
    color: #fff;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer
}

.app-toast.is-closing {
    animation: toast-out .18s ease-in forwards
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateX(24px)
    }
}

.auth-page {
    padding-top: 32px
}

.auth-intro {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 26px;
    align-items: stretch;
    /* max-width: 1000px */
}

.auth-intro>aside {
    background: linear-gradient(140deg, var(--primary-color), #595557);
    color: #fff;
    padding: 28px;
    border-radius: 16px
}

.auth-intro>aside h2 {
    font-size: 1.35rem;
    margin: 14px 0 8px
}

.auth-intro>aside li {
    margin: 8px 0
}

.auth-page .auth-card {
    margin: 26px 0 48px
}

.auth-tabs {
    background: #f0f1e9;
    border-radius: 11px;
    padding: 4px
}

.auth-tabs button[aria-pressed="true"] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    color: #313031
}

@media(max-width:700px) {

    .auth-intro,
    .question-row {
        grid-template-columns: 1fr
    }

    .auth-intro {
        display: block
    }

    .auth-intro>aside {
        margin-top: 18px
    }

    .question-row {
        align-items: stretch;
        flex-direction: column
    }

    .question-actions {
        justify-content: flex-end
    }

    .app-page {
        padding-top: 22px
    }

    .compact-card {
        padding: 20px
    }
}

.auth-access-grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(280px, 380px);
    gap: 26px;
    align-items: start;
    margin-top: 26px
}

/* .auth-intro {
    max-width: 760px
} */

.auth-benefits {
    background: linear-gradient(140deg, var(--primary-color), #595557);
    color: #fff;
    padding: 28px;
    border-radius: 16px
}

.auth-benefits h2 {
    font-size: 1.35rem;
    margin: 14px 0 8px
}

.auth-benefits li {
    margin: 8px 0
}

.auth-page .auth-card {
    margin: 0 0 48px;
    max-width: none
}

@media(max-width:700px) {
    .auth-access-grid {
        grid-template-columns: 1fr;
        margin-top: 18px
    }
}
.question-heading{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.page-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}.page-actions .button{padding:12px 16px;gap:9px}.question-dialog{max-height:calc(100dvh - 32px);overflow:auto}.question-form-dialog{width:min(820px,calc(100% - 32px));padding:30px}.question-dialog form>label,.question-dialog>label{display:block;margin:15px 0 8px;font-size:12px;font-weight:600}.question-dialog textarea,.question-dialog input,.question-dialog select{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid #d9dcd1;border-radius:8px;background:#fafbf7;font:inherit;color:var(--primary-color)}.question-dialog textarea{min-height:112px;resize:vertical}.question-dialog .builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.question-dialog .builder-grid label{display:block;margin:14px 0 0;font-size:12px;font-weight:600}.question-dialog .page-section-heading{margin-bottom:10px}.question-dialog .page-section-heading h2{margin:0}.question-dialog .eyebrow{margin:0 0 8px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.dialog-actions .button{width:auto;margin:0}.subject-details{margin:14px 0;padding:13px 15px;border:1px solid #e2e3d9;border-radius:10px;background:#fcfcf8}.subject-details summary{font-size:12px;font-weight:600;cursor:pointer}.subject-details .button{width:auto;margin:14px 0 0;padding:10px 14px}.import-dialog{width:min(700px,calc(100% - 32px));padding:30px}.import-dialog>p{font-size:13px;color:var(--muted)}.import-dialog pre{max-height:300px;overflow:auto;white-space:pre-wrap;padding:16px;border-radius:10px;background:#f2f4ea;font-size:12px;line-height:1.6}.import-dialog h3{margin:24px 0 10px;font-size:18px}@media(max-width:700px){.question-heading{align-items:stretch;flex-direction:column}.page-actions{justify-content:flex-start}.question-dialog .builder-grid{grid-template-columns:1fr}.question-form-dialog,.import-dialog{padding:22px}.dialog-actions{justify-content:stretch}.dialog-actions .button{flex:1}.page-actions .button{flex:1}}
.nav-row{height:70px}.brand-logo{width:104px}.main-nav{gap:22px}.sub-header .nav-row{height:70px}@media(max-width:991px){.nav-row,.sub-header .nav-row{height:64px}.main-nav{top:63px}.brand-logo{width:100px}}@media(max-width:575px){.nav-row,.sub-header .nav-row{height:60px}.main-nav{top:59px}.brand-logo{width:94px}}
.entry-card .page-section-heading>.button,.entry-card .page-section-heading>a.button{width:auto;margin:0;align-self:center}.table-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}.table-action-button{border:0;background:transparent;padding:0;font:inherit;cursor:pointer}.share-dialog{width:min(520px,calc(100% - 32px));padding:30px}.share-dialog>p{font-size:13px;color:var(--muted)}.share-dialog label{display:block;font-size:12px;font-weight:600}.share-dialog input{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #d9dcd1;border-radius:8px;background:#fafbf7}.share-dialog .dialog-actions{justify-content:flex-start;margin-top:12px}.share-qr{display:block;width:220px;height:220px;max-width:100%;margin:22px auto 12px;padding:10px;border:1px solid #e2e4da;border-radius:12px;background:#fff}.share-code{text-align:center;font-weight:700;color:var(--primary-color)!important}@media(max-width:700px){.table-actions{gap:10px}.share-dialog{padding:22px}}
.invite-launcher{margin-bottom:18px;border-color:#dbe19e;background:linear-gradient(135deg,#fff 0%,#fbfce9 100%)}.invite-launcher .page-section-heading{align-items:flex-start}.invite-meta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.invite-meta span{min-width:130px;padding:12px 15px;border:1px solid #e1e3d6;border-radius:10px;background:#fff}.invite-meta strong,.invite-meta small{display:block}.invite-meta small{margin-top:4px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.invite-instructions{white-space:pre-wrap;color:var(--muted);font-size:13px;line-height:1.7}.invite-actions{display:flex;gap:10px;margin-top:16px}.invite-actions .button{width:auto;margin:0}.exam-workspace{margin-bottom:18px}.exam-workspace .exam-toolbar h2{margin:5px 0 0}.exam-workspace #exam-form>.button{width:auto}.exam-workspace #exam-questions fieldset{background:#fff}.exam-workspace #exam-questions label{padding:8px 4px}.exam-workspace #exam-questions label:hover{background:#fafbe9}@media(max-width:600px){.invite-meta{display:grid;grid-template-columns:1fr}.invite-actions .button{width:100%}}
.performance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}.performance-grid article{padding:19px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}.performance-grid strong,.performance-grid span{display:block}.performance-grid strong{font-family:var(--font-heading);font-size:1.65rem}.performance-grid span{margin-top:5px;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.07em}.card-header-actions{display:flex;justify-content:flex-end;gap:9px}.entry-card .card-header-actions .button,.table-button{width:auto;margin:0;padding:10px 14px}.table-action:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}}@media(max-width:420px){.performance-grid{grid-template-columns:1fr}}
.compact-action{width:auto!important;margin:0!important;padding:8px 12px!important;font-size:.75rem}.table-actions .button-danger{background:#fff3f2}
.bulk-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:-4px 0 14px;padding:10px 12px;border:1px solid #e0e2d1;border-radius:10px;background:#f8fae9}.bulk-actions>span{margin-right:auto;font-size:.78rem;font-weight:700;color:#62674b}.check-column{width:42px;text-align:center!important}.check-column input{width:17px!important;height:17px;accent-color:#687731;margin:0!important}@media(max-width:600px){.bulk-actions{align-items:stretch;flex-wrap:wrap}.bulk-actions>span{width:100%}}
.test-taking-body{background:#f4f5ef;min-height:100vh}.test-shell-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);background:rgba(255,255,252,.96);backdrop-filter:blur(18px)}.test-shell-row{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}.test-shell-title small,.test-clock small{display:block;color:var(--muted);font-size:.62rem;letter-spacing:.1em}.test-shell-title strong{display:block;margin-top:3px;font-family:var(--font-heading);font-size:1rem}.test-shell-tools{display:flex;align-items:center;gap:12px}.test-shell-tools .button{padding:10px 14px}.test-clock{min-width:118px;padding:9px 14px;border-radius:10px;background:var(--primary-color);color:#fff;text-align:center}.test-clock small{color:#cbc9c5}.test-clock strong{display:block;margin-top:2px;font-size:1.2rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}.time-warning .test-clock{background:#9b3e33}.test-taking-page{max-width:960px;padding-top:30px;padding-bottom:50px}.test-progress{margin-bottom:16px}.test-progress>div:first-child{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px;color:var(--muted);font-size:.78rem}.test-progress-track{height:5px;border-radius:999px;background:#e3e4db;overflow:hidden}.test-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--accent-color);transition:width .2s}.test-question-card{min-height:440px;padding:30px 34px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 14px 38px rgba(54,52,53,.06)}.test-question-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.test-question-top>div{display:flex;align-items:center;gap:8px}.test-question-card h1{max-width:800px;margin:28px 0 26px;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.45;letter-spacing:-.02em}.bookmark-toggle{border:0;background:transparent;color:#6f714f;font:inherit;font-weight:600}.pending-tag{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fff1c7;color:#805d16;font-size:.66rem;font-weight:800;letter-spacing:.06em}.test-options{display:grid;gap:10px}.test-option{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:13px;padding:15px 17px;border:1px solid #dedfd7;border-radius:11px;background:#fcfcf9;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.test-option:hover{transform:translateY(-1px);border-color:#b8bc8e;background:#fff}.test-option:has(input:checked){border-color:#8c943a;background:#f5f7d9;box-shadow:0 0 0 2px rgba(229,235,48,.18)}.test-option input{position:absolute;opacity:0;pointer-events:none}.option-marker{display:grid;place-items:center;width:30px;height:30px;border:1px solid #d1d3c6;border-radius:50%;background:#fff;font-size:.75rem;font-weight:700}.test-option:has(input:checked) .option-marker{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.test-question-nav{display:grid;grid-template-columns:auto 1fr auto auto;align-items:end;gap:10px;margin-top:15px}.test-question-nav label{justify-self:center;color:var(--muted);font-size:.7rem;text-align:center}.test-question-nav select{display:block;min-width:160px;margin-top:5px;padding:10px 12px;border:1px solid #d8d9d1;border-radius:8px;background:#fff}.bookmark-dialog{width:min(620px,calc(100% - 32px));padding:28px}.bookmark-dialog>p{color:var(--muted);font-size:.82rem}.bookmark-list{display:grid;gap:8px;max-height:55vh;overflow:auto}.bookmark-item{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;width:100%;padding:13px;border:1px solid #e0e1d8;border-radius:10px;background:#fff;text-align:left}.bookmark-item .pending-tag{grid-row:1/3;align-self:start}.bookmark-item small{grid-column:2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:700px){.test-shell-row{grid-template-columns:auto 1fr;gap:12px;padding:8px 0}.test-shell-title{display:none}.test-shell-tools{justify-content:flex-end}.test-shell-tools .button{font-size:0;gap:6px}.test-shell-tools .button span,.test-shell-tools .button b{font-size:.8rem}.test-clock{min-width:100px}.test-taking-page{padding-top:18px}.test-question-card{min-height:390px;padding:22px 20px}.test-question-nav{grid-template-columns:1fr 1fr}.test-question-nav label{grid-column:1/3;grid-row:1;width:100%}.test-question-nav select{width:100%}.test-question-nav .button{width:100%;padding:13px}.test-question-nav #submit-test{grid-column:1/3}.test-question-card h1{margin:22px 0}.bookmark-toggle{font-size:.76rem}}
.answer-review-dialog{width:min(860px,calc(100% - 32px));max-height:82vh;padding:28px;overflow:hidden}.answer-review-dialog .page-section-heading{position:sticky;top:-28px;z-index:2;margin:-28px -28px 18px;padding:25px 28px 16px;border-bottom:1px solid var(--line);background:#fff}.answer-review-dialog .question-list{max-height:calc(82vh - 105px);overflow-y:auto;padding-right:5px}.answer-review-dialog::backdrop{background:rgba(24,24,24,.55);backdrop-filter:blur(3px)}@media(max-width:600px){.answer-review-dialog{padding:20px}.answer-review-dialog .page-section-heading{top:-20px;margin:-20px -20px 15px;padding:20px}.answer-review-dialog .question-list{max-height:calc(82vh - 90px)}}
/* Compact dashboard actions, sharing and answer review. */
.quick-badge{display:inline-flex;align-items:center;background:#e9edb9;color:#333;padding:3px 9px;border-radius:99px;font-size:.82em;margin-left:7px;white-space:nowrap}
.share-dialog{width:min(900px,94vw)!important}
.share-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:26px;align-items:center}
.share-layout .share-qr{width:220px;max-width:100%;margin:0}
.share-input-group{display:flex;margin-top:8px}
.share-input-group input{min-width:0;flex:1;border:1px solid #d6d8cd;border-radius:10px 0 0 10px;padding:12px;margin:0}
.share-layout .share-code{text-align:left;margin-top:18px;font-size:.85rem;overflow-wrap:anywhere}
.share-input-group .button{width:auto!important;flex:none;border-radius:0 10px 10px 0;padding:12px 16px}
.password-control{display:flex;position:relative}.password-control input{width:100%;padding-right:52px!important}
.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:10px;color:#555;cursor:pointer}
.review-answer{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 0;border-bottom:1px solid #e4e5dc}
.review-answer h3{font-size:1.1rem;white-space:pre-wrap}.review-answer .button{flex:none;width:auto!important}
.explanation-text{white-space:pre-wrap;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:650px){.share-layout{grid-template-columns:1fr}.share-layout .share-qr{justify-self:center}.review-answer{flex-direction:column}}
.review-table-controls{display:flex;justify-content:flex-end;margin:0 0 16px}.review-table-controls label{width:min(100%,360px);font-size:.8rem}.review-table-controls input{margin-top:6px}
#review-table .review-question-text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:180px;max-width:540px}
#review-table .review-explain{display:inline-flex;align-items:center;gap:7px;width:auto;margin:0;padding:9px 13px;white-space:nowrap;font-size:.8rem}
#review-table .review-explain svg{flex:none;color:#78862d}
/* Shared mobile dropdown: overrides older inline subpage navigation. */
@media(max-width:991px){
 .site-header .menu-toggle{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;border-radius:10px;background:var(--paper);cursor:pointer}
 .site-header .main-nav,.site-header.sub-header .main-nav{position:absolute;top:100%;left:12px;right:12px;margin:8px 0 0;padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:3px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 16px 32px #2424241a;font-size:14px;max-height:calc(100dvh - 88px);overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
 .site-header .main-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
 .site-header .main-nav>a,.site-header .main-nav>button{padding:12px 14px;margin:0;width:100%;text-align:left;white-space:normal;border-radius:8px;min-height:44px}
 .site-header .main-nav>a:hover,.site-header .main-nav>button:hover{background:#edf0d7}
 .site-header .main-nav .nav-signout{border-top:1px solid var(--line);margin-top:5px}
 .site-header .menu-toggle:focus-visible,.site-header .main-nav>a:focus-visible,.site-header .main-nav>button:focus-visible{outline:2px solid #7c8737;outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){.site-header .main-nav,.site-header .menu-toggle span{transition:none!important}}
.bank-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.bank-filters label{font-size:.85rem}.bank-filters select,.bank-pull-count{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fafbf7;margin-top:6px}
.bank-question-text{white-space:pre-wrap;min-width:180px;max-width:480px;overflow-wrap:anywhere}.bank-import-dialog{width:min(860px,94vw);padding:28px}.bank-preview-rows{max-height:42vh;overflow:auto}.bank-preview-rows p{font-size:.85rem;white-space:pre-wrap}.bank-source{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fafbf5}.bank-source legend{font-size:1rem;font-weight:700;float:none;width:auto}.bank-pull-count{max-width:120px}.bank-source p{font-size:.85rem}
@media(max-width:700px){.bank-filters{grid-template-columns:1fr}.bank-import-dialog{padding:20px}}