/* =======================================================================
   AYCD 2026 — Refined (Linear-style) marketing stylesheet
   ======================================================================= */

:root {
    --bg: #08090a;
    --bg-2: #0c0d0f;
    --surface: #111214;
    --surface-2: #17181b;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.12);
    --text: #f7f8f8;
    --text-2: #b4b8c0;
    --text-3: #7a7f89;
    --accent: #7170ff;
    --accent-2: #a78bfa;
    --inbox: #e49599;
    --tabsentry: #8a809f;
    --profile: #55ff55;
    --ok: #34d399;

    --nav-h: 64px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    letter-spacing: -0.011em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Scrollbars ----------
   Custom scrollbar for every scrollable surface: 8px thin track, transparent track, faint
   white thumb (rgba .06) that brightens to .14 on hover. Applied globally so the dark theme
   never falls back to the browser default. The element-specific .admin-sidebar /
   .surface-card__body / .pricing-matrix rules below restate the same look and are kept for
   clarity; docs surfaces (docs-2026.css) override with their pill variant via higher
   specificity. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.14);
}

.mono {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-feature-settings: normal;
    letter-spacing: 0;
}

.serif {
    font-family: 'Instrument Serif', Georgia, serif;
    letter-spacing: -0.02em;
}

.dim { color: var(--text-3); }

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

/* ---------- Layout ---------- */

.container-1240 {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

.container-1100 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
}

.eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 1.6px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ---------- Navigation ---------- */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}

.nav--scrolled {
    background: rgba(10, 11, 13, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

.nav__inner {
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.nav__left {
    display: flex;
    align-items: center;
    gap: 36px;
}

.nav__links {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: var(--text-2);
}

.nav__links a {
    color: var(--text-2);
    transition: color 0.2s;
}

.nav__links a:hover { color: var(--text); }

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

.nav__signin {
    font-size: 14px;
    color: var(--text-2);
    transition: color 0.2s;
}

.nav__signin:hover { color: var(--text); }

/* ---------- Logo / Gears ---------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text);
}

:root {
    --gear-cutout-ratio: 47%;
}

.logo__gears {
    display: inline-flex;
    align-items: center;
    height: 43.2px;
    width: 64.8px;
    position: relative;
}

.gear {
    display: block;
    height: 43.2px;
    width: 43.2px;
    transform: rotate(0deg);
    transform-origin: center;
    will-change: transform;
}

.leftGearMask {
    position: absolute;
    left: 0;
    top: 0;
    width: 43.2px;
    height: 43.2px;
    -webkit-mask-image: radial-gradient(ellipse var(--gear-cutout-ratio, 47%) var(--gear-cutout-ratio, 47%) at 100% 50%,
                                        transparent 99%, #000 100%);
            mask-image: radial-gradient(ellipse var(--gear-cutout-ratio, 47%) var(--gear-cutout-ratio, 47%) at 100% 50%,
                                        transparent 99%, #000 100%);
}

.gear.rightGear {
    position: absolute;
    left: 21.6px;
    top: 0;
}

.logo__text {
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--md { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 11px 22px; font-size: 15px; }
.btn--xl { padding: 13px 36px; font-size: 15px; min-width: 240px; }

.btn--primary {
    background: var(--text);
    color: var(--bg);
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.35);
}

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-2);
}

.btn--ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
}

.btn--accent {
    background: var(--accent);
    color: #fff;
}

.btn--accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(113, 112, 255, 0.6);
}

.btn--danger {
    background: transparent;
    color: #ff8b8b;
    border-color: rgba(255, 100, 100, 0.35);
}

.btn--danger:hover {
    transform: translateY(-1px);
    background: rgba(255, 100, 100, 0.08);
    border-color: rgba(255, 100, 100, 0.55);
    color: #ffb3b3;
}

.btn--danger-solid {
    background: #c54545;
    color: #fff;
    border-color: #c54545;
}

.btn--danger-solid:hover {
    transform: translateY(-1px);
    background: #d65757;
    border-color: #d65757;
}

.btn--block { width: 100%; }

.btn[disabled],
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding: 180px 28px 120px;
    overflow: hidden;
}

.hero__glow,
.hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__glow {
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(113, 112, 255, 0.22), transparent 70%),
        radial-gradient(40% 40% at 20% 20%, rgba(34, 211, 238, 0.10), transparent 70%),
        radial-gradient(40% 40% at 80% 10%, rgba(192, 132, 252, 0.10), transparent 70%);
}

.hero__grid {
    opacity: 0.5;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black, transparent 70%);
}

.hero__inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hero__title {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 28px;
    padding-bottom: 0.12em;
    background: linear-gradient(180deg, #ffffff 30%, #9aa0ad 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__sub {
    font-size: 19px;
    line-height: 1.5;
    color: var(--text-2);
    max-width: 620px;
    margin: 0 auto 40px;
    font-weight: 400;
}

.hero__cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Section heading ---------- */

.section-intro {
    margin-bottom: 24px;
}

.section-intro h2 {
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 0;
}

.section-intro p {
    font-size: 17px;
    color: var(--text-2);
    margin: 20px 0 0;
    max-width: 560px;
    line-height: 1.5;
}

.section-divider { border-top: 1px solid var(--line); }

/* ---------- Products ---------- */

.products {
    padding: 140px 28px 40px;
}

.product-row {
    padding: 56px 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 100px 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}

.product-row__index {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    padding-top: 6px;
    color: var(--accent);
}

.product-row__logo {
    display: block;
    height: 80px;
    width: 120px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 22px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.product-row__name {
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.product-row__tagline {
    font-size: 16px;
    color: var(--text-2);
    margin-top: 16px;
    margin-bottom: 0;
    line-height: 1.6;
    max-width: 420px;
}

.product-row__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.feature-cell {
    padding: 20px 22px;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
}

/* No border-top on the top row; no border-right on the right column. */
.feature-cell:nth-child(1),
.feature-cell:nth-child(2) { border-top: none; }
.feature-cell:nth-child(2n) { border-right: none; }

.feature-cell__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.feature-cell__title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.feature-cell__body {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.55;
}

/* ---------- Pricing ---------- */

.pricing {
    padding: 140px 28px 80px;
    border-top: 1px solid var(--line);
}

.pricing__cards {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pricing-card {
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricing-card--featured {
    border-color: rgba(113, 112, 255, 0.5);
    background: linear-gradient(180deg, rgba(113, 112, 255, 0.12), rgba(113, 112, 255, 0.02));
}

.pricing-card__badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(113, 112, 255, 0.3);
    color: #e4e3ff;
    border: 1px solid rgba(113, 112, 255, 0.5);
    font-family: 'Geist Mono', ui-monospace, monospace;
    letter-spacing: 1px;
}

.pricing-card__logo {
    display: block;
    height: 72px;
    width: 110px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 18px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.pricing-card__name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.pricing-card__price {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pricing-card__price-currency { font-size: 16px; color: var(--text-2); }
.pricing-card__price-amount { font-size: 52px; font-weight: 600; letter-spacing: -2px; }
.pricing-card__price-period { font-size: 14px; color: var(--text-3); }

.pricing-card__blurb {
    margin-top: 4px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text-3);
}

.pricing-card__includes {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: start;
}

/* Every card splits its includes into an Apps column (left) and a Services column (right), so all
   three share one layout no matter how many of each they bundle. min-width:0 lets a long feature
   name shrink within its column instead of forcing the track wider. */
.pricing-card__includes-col {
    min-width: 0;
}

.pricing-card__includes-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.pricing-card__includes-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-2);
}

.pricing-card__includes-item svg { flex-shrink: 0; }

/* ---------- Pricing matrix ---------- */

.pricing-matrix-wrap {
    margin-top: 64px;
}

.pricing-matrix-wrap__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pricing-matrix-wrap__head h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.pricing-matrix-wrap__note {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-3);
}

.pricing-matrix {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.matrix__row {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
}

.matrix__row + .matrix__row { border-top: 1px solid var(--line); }

.matrix__cell {
    padding: 16px 20px;
    border-right: 1px solid var(--line);
    color: var(--text-2);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.matrix__cell--label { padding: 16px 28px; }

.matrix__cell--center { justify-content: center; }

.matrix__cell:last-child { border-right: none; }

.matrix__row--header .matrix__cell { padding: 28px 20px 24px; align-items: flex-start; flex-direction: column; }
.matrix__row--header .matrix__cell--label { padding: 28px 28px 24px; }

.matrix__row--header .matrix__cell--featured {
    background: linear-gradient(180deg, rgba(113, 112, 255, 0.12), transparent 80%);
    position: relative;
}

.matrix__row--header .matrix__cell--featured .matrix__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(113, 112, 255, 0.18);
    color: #c8c7ff;
    border: 1px solid rgba(113, 112, 255, 0.35);
    font-family: 'Geist Mono', ui-monospace, monospace;
    letter-spacing: 1px;
}

.matrix__pkg-name { font-size: 15px; font-weight: 500; color: var(--text); }

.matrix__pkg-price {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.matrix__pkg-price .cur { font-size: 14px; color: var(--text-2); }
.matrix__pkg-price .num { font-size: 34px; font-weight: 600; letter-spacing: -1px; }
.matrix__pkg-price .per { font-size: 13px; color: var(--text-3); }

.matrix__row--group {
    background: rgba(255, 255, 255, 0.015);
}

.matrix__row--group .matrix__cell { padding: 12px 20px; }
.matrix__row--group .matrix__cell--label { padding: 12px 28px; }

.matrix__row--cta .matrix__cell { padding: 20px; }

.matrix__cell--featured-bg {
    background: rgba(113, 112, 255, 0.04);
}

.matrix__dash {
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-block;
}

/* ---------- Blog ---------- */

.blog {
    padding: 140px 28px 40px;
    border-top: 1px solid var(--line);
}

.blog__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 56px;
}

.blog__title {
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 0;
}

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

.blog-card {
    display: block;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
    color: inherit;
}

.blog-card:hover {
    background: var(--surface);
    transform: translateY(-2px);
}

.blog-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #141518, #0d0e10);
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body { padding: 20px 6px 6px; }

.blog-card__meta {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.blog-card__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--text);
}

.blog-card__excerpt {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0;
}

.blog-card__cta {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
}

.blog-card__cta .arrow {
    display: inline-block;
    transition: transform 0.2s;
}

.blog-card:hover .blog-card__cta { color: var(--text); }
.blog-card:hover .blog-card__cta .arrow { transform: translateX(3px); }

/* ---------- CTA block ---------- */

.cta-block-wrap {
    padding: 120px 28px 40px;
}

.cta-block {
    padding: 80px 40px;
    text-align: center;
    border-radius: 24px;
    border: 1px solid var(--line-2);
    background:
        radial-gradient(60% 100% at 50% 0%, rgba(113, 112, 255, 0.25), transparent 70%),
        linear-gradient(180deg, #0f1013, #0b0c0e);
    position: relative;
    overflow: hidden;
}

.cta-block__title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 1;
}

.cta-block p {
    color: var(--text-2);
    font-size: 17px;
    margin: 20px auto 0;
    max-width: 560px;
    line-height: 1.55;
}

.cta-block__actions {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ---------- Footer ---------- */

.footer-2026 {
    border-top: 1px solid var(--line);
    padding: 80px 28px 40px;
    margin-top: 120px;
}

.footer-2026__top {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 220px;
}

.footer-2026__brandcol {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 280px;
}

.footer-2026__tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-3);
}

.footer-2026__cols {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 64px;
    text-align: left;
}

.footer-2026__col-title {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 16px;
    letter-spacing: 0.2px;
}

.footer-2026__col a,
.footer-2026__col button.link-btn {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    padding: 6px 0;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-2026__col a:hover,
.footer-2026__col button.link-btn:hover {
    color: var(--text);
}

/* Footer logo gears spin on hover (mirrors the header's scroll-driven spin). */
.footer-gear--right {
    position: absolute;
    left: 21.6px;
    top: 0;
}

@keyframes footer-gear-left {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes footer-gear-right {
    to {
        transform: rotate(360deg);
    }
}

.footer-2026__brand:hover .footer-gear--left {
    animation: footer-gear-left 4s linear infinite;
}

.footer-2026__brand:hover .footer-gear--right {
    animation: footer-gear-right 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .footer-2026__brand:hover .footer-gear--left,
    .footer-2026__brand:hover .footer-gear--right {
        animation: none;
    }
}

.footer-2026__social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.footer-2026__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text-2);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
}

.footer-2026__social a:hover {
    color: var(--text);
    border-color: var(--line-2);
    background: var(--surface);
}

.footer-2026__legal {
    max-width: 1240px;
    margin: 64px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
}

/* ---------- Page hero (blog / article / policy) ---------- */

.page-hero {
    position: relative;
    padding: 160px 28px 60px;
    text-align: center;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 50% 0%, rgba(113, 112, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.page-hero > * { position: relative; }

.page-hero h1 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0 0 20px;
    background: linear-gradient(180deg, #ffffff 30%, #9aa0ad 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-hero p {
    font-size: 18px;
    color: var(--text-2);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---------- Blog listing ---------- */

.blog-page {
    min-height: 100vh;
    padding: 0 0 80px;
}

.blog-page .blog__grid {
    padding-top: 40px;
    border-top: 1px solid var(--line);
    margin-top: 40px;
}

.pagination {
    margin: 60px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination a {
    color: var(--text-2);
    padding: 10px 16px;
    text-decoration: none;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    font-size: 14px;
    transition: color 0.2s, border-color 0.2s;
}

.pagination a:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Article detail ---------- */

.article-page {
    min-height: 100vh;
    padding: 0 0 80px;
}

.article-body {
    color: var(--text-2);
    font-size: 17px;
    line-height: 1.7;
    padding: 40px 0 20px;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--text);
    letter-spacing: -0.02em;
    margin-top: 2em;
    margin-bottom: 0.6em;
    line-height: 1.2;
}

.article-body h1 { font-size: 32px; }
.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 18px; }

.article-body p { margin: 0 0 1.2em; }

.article-body a {
    color: var(--text);
    border-bottom: 1px solid var(--line-2);
    transition: border-color 0.2s;
}
.article-body a:hover { border-bottom-color: var(--text); }

.article-body img {
    border-radius: 12px;
    border: 1px solid var(--line);
    margin: 1.5em auto;
}

.article-body ul,
.article-body ol {
    padding-left: 1.4em;
    margin: 0 0 1.2em;
}

.article-body li { margin-bottom: 0.4em; }

.article-body blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 20px;
    margin: 1.5em 0;
    color: var(--text);
}

.article-body code {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.9em;
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.article-body pre {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.6;
}
.article-body pre code { background: none; padding: 0; border: none; }

.article-body hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 2em 0;
}

.article-related {
    padding-top: 60px;
    border-top: 1px solid var(--line);
    margin-top: 40px;
}

.article-related__head {
    text-align: center;
    margin-bottom: 40px;
}

.article-related__head h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
}

.article-related__head p {
    color: var(--text-2);
    margin: 0;
}

/* ---------- Policy page ---------- */

.policy-page {
    min-height: 100vh;
    padding: 0 0 80px;
}

.policy-page__header {
    text-align: center;
    padding: 140px 0 40px;
}

.policy-page__header h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 30%, #9aa0ad 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.policy-page__body {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 40px;
    color: var(--text-2);
    line-height: 1.65;
    font-size: 15px;
}

.policy-page__body h1,
.policy-page__body h2,
.policy-page__body h3 {
    color: var(--text);
    letter-spacing: -0.02em;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.25;
}

.policy-page__body h1 { font-size: 26px; margin-top: 0; }
.policy-page__body h2 { font-size: 20px; }
.policy-page__body h3 { font-size: 17px; }

.policy-page__body p { margin: 0 0 1em; }

.policy-page__body a {
    color: var(--text);
    border-bottom: 1px solid var(--line-2);
}
.policy-page__body a:hover { border-bottom-color: var(--text); }

/* Termly injects its widget inside the wrapper — pin it to readable width */
.policy-page__body iframe { max-width: 100%; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .product-row {
        grid-template-columns: 80px 1fr;
        gap: 24px;
    }
    .product-row__features {
        grid-column: 1 / -1;
        margin-top: 8px;
    }
}

@media (max-width: 820px) {
    .hero { padding: 140px 20px 80px; }
    .products, .pricing, .blog { padding-left: 20px; padding-right: 20px; }

    .product-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .product-row__index { padding-top: 0; }

    .pricing__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog__header {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .blog__grid { grid-template-columns: 1fr; }

    .pricing-matrix {
        overflow-x: auto;
        display: block;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    }
    .pricing-matrix::-webkit-scrollbar { height: 8px; }
    .pricing-matrix::-webkit-scrollbar-track { background: transparent; }
    .pricing-matrix::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
    }
    .pricing-matrix::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }
    .pricing-matrix > .matrix__row,
    .pricing-matrix > .matrix__row--group,
    .pricing-matrix > .matrix__row--cta { min-width: 840px; }
    .pricing-matrix .matrix__row { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
    .pricing-matrix .matrix__cell { min-width: 0; }

    .matrix__row--header .matrix__cell--featured { padding-top: 44px; }
    .matrix__row--header .matrix__cell--featured .matrix__badge {
        top: 10px;
        right: 10px;
    }

    .cta-block { padding: 56px 24px; }
}

.nav__hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

.nav__hamburger:hover { border-color: rgba(255, 255, 255, 0.22); }

.nav__menu {
    display: none;
    position: absolute;
    right: 16px;
    top: calc(100% + 6px);
    min-width: 240px;
    max-width: calc(100vw - 32px);
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 50;
}

.nav__menu.is-open { display: block; }

.nav__menu a {
    display: block;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
}

.nav__menu a:hover { background: rgba(255, 255, 255, 0.04); }

.nav__menu-identity {
    padding: 10px 12px 6px;
    color: var(--text-2);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__menu-divider {
    border: 0;
    border-top: 1px solid var(--line-2);
    margin: 4px 0;
}

.nav__menu-group-title {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 12px 4px;
}

@media (max-width: 560px) {
    .nav__links { display: none; }
    .nav__signin { display: none; }

    .nav__inner { padding: 12px 20px; }

    .nav__desktop-only { display: none; }
    .nav__hamburger { display: inline-flex; align-items: center; }

    .footer-2026__top {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .footer-2026__brandcol { align-items: center; text-align: center; }
    .footer-2026__cols { grid-template-columns: 1fr; gap: 40px; text-align: center; }

    .pricing-matrix-wrap__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =======================================================================
   Admin — shell, sidebar, cards, modal, forms, tables
   ======================================================================= */

:root {
    --admin-sidebar-w: 260px;
    --admin-top-h: 72px;
}

/* ---------- Admin top bar ---------- */

.admin-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--admin-top-h);
    z-index: 40;
    background: rgba(10, 11, 13, 0.82);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

.admin-top__inner {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.admin-top__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.2px;
}

.admin-top .logo { font-size: 18px; }

.admin-top__brand-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: var(--text-3);
    padding: 2px 7px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    text-transform: uppercase;
}

.admin-top__spacer { flex: 1 1 auto; }

.admin-top__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 13px;
}

.admin-top__user .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
}

.admin-top__hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
}

.admin-top__hamburger:hover { border-color: rgba(255, 255, 255, 0.22); }

/* ---------- Admin shell ---------- */

.admin-shell {
    display: grid;
    grid-template-columns: var(--admin-sidebar-w) 1fr;
    min-height: calc(100vh - var(--admin-top-h));
    padding-top: var(--admin-top-h);
}

.admin-shell__main {
    min-width: 0;
    padding: 32px 0 96px;
    background: var(--bg);
}

.admin-shell__main > .container-1100,
.admin-shell__main > .container-1240 { padding-left: 40px; padding-right: 40px; }

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

/* Let the title/description block absorb free space and shrink so the actions
   stay on the title's row and right-aligned instead of wrapping below once the
   description grows wide. flex-wrap on the parent still drops the actions below
   on narrow viewports. */
.admin-page-header > :not(.admin-page-header__actions) {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-page-header__title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.admin-page-header__eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-page-header__description {
    color: var(--text-2);
    font-size: 14px;
    margin: 8px 0 0;
    max-width: 640px;
    line-height: 1.5;
}

.admin-page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* ---------- Admin sidebar ---------- */

.admin-sidebar {
    position: sticky;
    top: var(--admin-top-h);
    align-self: start;
    height: calc(100vh - var(--admin-top-h));
    overflow-y: auto;
    padding: 20px 12px 28px;
    border-right: 1px solid var(--line);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }

.admin-sidebar__group-title {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 18px 10px 8px;
    font-weight: 500;
}

.admin-sidebar__group-title:first-child { margin-top: 4px; }

.admin-sidebar__divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 6px 6px;
}

.admin-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.admin-sidebar__link:hover {
    background: var(--surface);
    color: var(--text);
}

.admin-sidebar__link--active {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--accent);
}

.admin-sidebar__link--active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 2px;
}

.admin-sidebar__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
}

.admin-sidebar__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-sidebar__link-external {
    margin-left: auto;
    opacity: 0.5;
}

.admin-sidebar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 39;
    display: none;
}

body.admin--sidebar-open .admin-sidebar__overlay { display: block; }
body.admin--sidebar-open { overflow: hidden; }

/* ---------- Surface card ---------- */

.surface-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.surface-card__header {
    padding: 20px 24px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.surface-card__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
}

.surface-card__description {
    color: var(--text-3);
    font-size: 14px;
    margin: 4px 0 0;
    line-height: 1.5;
}

.surface-card__body {
    padding: 20px 24px 24px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}

.surface-card__body > p:first-child { margin-top: 0; }
.surface-card__body > p:last-child { margin-bottom: 0; }

.surface-card__header + .surface-card__body { padding-top: 0; }

.surface-card__actions {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.surface-card__actions--start { justify-content: flex-start; }
.surface-card__actions--spread { justify-content: space-between; }

.surface-card--flush .surface-card__body { padding: 0; }

.surface-card__body:has(> .admin-table),
.surface-card__body:has(> .dataTables_wrapper) {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.surface-card__body::-webkit-scrollbar { height: 8px; }
.surface-card__body::-webkit-scrollbar-track { background: transparent; }
.surface-card__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}
.surface-card__body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- Platform block ---------- */

.platform-block {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.platform-block + .platform-block { margin-top: 10px; }

.platform-block__summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    transition: background 0.15s ease;
}

.platform-block__summary::-webkit-details-marker { display: none; }

.platform-block__summary:hover { background: rgba(255, 255, 255, 0.03); }

.platform-block__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.platform-block__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-2);
}

.platform-block__title { flex: 1; }

.platform-block__chevron {
    width: 14px;
    height: 14px;
    color: var(--text-3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.platform-block[open] > .platform-block__summary {
    border-bottom: 1px solid var(--line);
}

.platform-block[open] > .platform-block__summary .platform-block__chevron {
    transform: rotate(90deg);
}

.platform-block__body { padding: 18px; }

.platform-block__body .form-group:last-child { margin-bottom: 0; }

/* ---------- Modal ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 40px;
    overflow-y: auto;
}

.modal.is-open { display: flex; }

.modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 7, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 0;
    animation: modal-fade-in 150ms ease-out;
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    animation: modal-pop-in 160ms ease-out;
}

.modal__dialog--sm { max-width: 420px; }
.modal__dialog--lg { max-width: 720px; }
.modal__dialog--xl { max-width: 920px; }

.modal__dialog .surface-card { border-color: var(--line-2); }

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: 0;
    color: var(--text-3);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
}

.modal__close:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.modal__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---------- Form controls ---------- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-group:last-child { margin-bottom: 0; }

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: -0.005em;
}

.form-label .form-label__required { color: #ff8b8b; }

.form-field {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.form-field:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(113, 112, 255, 0.18);
}

.form-field::placeholder { color: var(--text-3); }

.form-field[readonly],
.form-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

textarea.form-field {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
    line-height: 1.5;
}

select.form-field {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a7f89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 8 10 13 15 8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

.form-field--mono {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 13px;
}

.form-help {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.5;
}

.form-error {
    font-size: 14px;
    color: #ff8b8b;
    line-height: 1.5;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

/* Custom checkbox + radio — 2026 design system.
   Applies to .form-check, .custom-checkbox, and stray Bootstrap .form-check-input. */
.form-check input[type="checkbox"],
.form-check input[type="radio"],
.custom-checkbox input[type="checkbox"],
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check input[type="radio"],
input[type="radio"].form-check-input {
    border-radius: 50%;
}

.form-check input[type="checkbox"]:hover:not(:disabled):not(:checked),
.form-check input[type="radio"]:hover:not(:disabled):not(:checked),
.custom-checkbox input[type="checkbox"]:hover:not(:disabled):not(:checked),
input[type="checkbox"].form-check-input:hover:not(:disabled):not(:checked),
input[type="radio"].form-check-input:hover:not(:disabled):not(:checked) {
    background-color: var(--surface-2);
    border-color: rgba(113, 112, 255, 0.5);
}

.form-check input[type="checkbox"]:checked,
.custom-checkbox input[type="checkbox"]:checked,
input[type="checkbox"].form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.form-check input[type="radio"]:checked,
input[type="radio"].form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='3' fill='%23fff'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible,
.custom-checkbox input[type="checkbox"]:focus-visible,
input[type="checkbox"].form-check-input:focus-visible,
input[type="radio"].form-check-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(113, 112, 255, 0.18);
}

.form-check input[type="checkbox"]:disabled,
.form-check input[type="radio"]:disabled,
.custom-checkbox input[type="checkbox"]:disabled,
input[type="checkbox"].form-check-input:disabled,
input[type="radio"].form-check-input:disabled {
    background-color: var(--bg);
    border-color: var(--line);
    opacity: 0.5;
    cursor: not-allowed;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.form-row .form-group { margin-bottom: 0; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.form-actions--start { justify-content: flex-start; }
.form-actions--spread { justify-content: space-between; }

.form-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.form-inline .form-field { width: auto; flex: 1 1 240px; min-width: 220px; }

/* ---------- Admin table ---------- */

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: var(--text-2);
    background: transparent;
}

.admin-table tbody,
.admin-table thead,
.admin-table tfoot,
.admin-table tr { background: transparent; }

.admin-table thead th {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--text-3);
    background: var(--surface-2);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    font-weight: 500;
}

.admin-table thead th:first-child { border-top-left-radius: 10px; border-left: 1px solid var(--line); }
.admin-table thead th:last-child { border-top-right-radius: 10px; border-right: 1px solid var(--line); }

.admin-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--text);
}

.admin-table tbody tr { transition: background 0.15s ease; }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.admin-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }

.admin-table tbody td a:not(.btn) {
    color: var(--text);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.admin-table tbody td a:not(.btn):hover { color: var(--accent-2); border-bottom-color: var(--accent); }

.admin-table .text-right,
.admin-table .text-end { text-align: right; }
.admin-table .text-center { text-align: center; }

.admin-table__wrap {
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.admin-table__wrap .admin-table thead th { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
.admin-table__wrap .admin-table tbody tr:last-child td { border-bottom: 0; }

.admin-table__empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
}

/* ---------- DataTables skin ---------- */

/* Override DataTables' default white/striped backgrounds so admin tables
   pick up the 2026 palette. DataTables' bundled CSS paints tbody rows
   white and striped rows light gray; we force transparency and re-apply
   our own hover state. */
table.dataTable,
table.dataTable.no-footer {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.dataTable tbody,
table.dataTable thead,
table.dataTable tfoot,
table.dataTable tr,
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
    background-color: transparent !important;
}

table.dataTable tbody td,
table.dataTable tbody th {
    color: var(--text);
    background-color: transparent !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > .sorting_1,
table.dataTable tbody tr:hover > .sorting_2,
table.dataTable tbody tr:hover > .sorting_3,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
    background-color: rgba(113, 112, 255, 0.15) !important;
    color: var(--text) !important;
}

.dataTables_wrapper { color: var(--text-2); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_filter { float: right; }
.dataTables_wrapper .dataTables_length { float: left; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    padding: 6px 10px;
    transition: border-color 0.15s ease;
}

.dataTables_wrapper .dataTables_length select { padding-right: 32px; }

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(113, 112, 255, 0.18);
}

.dataTables_wrapper .dataTables_filter input { min-width: 220px; }

.dataTables_wrapper .dataTables_info {
    color: var(--text-3);
    font-size: 12px;
    padding-top: 16px;
    float: left;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    padding-top: 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text-2);
    border: 1px solid var(--line-2);
    cursor: pointer;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.22);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-3);
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}

.dataTables_wrapper .dataTables_empty {
    padding: 32px;
    text-align: center;
    color: var(--text-3);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    background-image: none !important;
    padding-right: 28px !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.5;
    content: '↕';
}

table.dataTable thead .sorting_asc::after { content: '↑'; opacity: 1; color: var(--text); }
table.dataTable thead .sorting_desc::after { content: '↓'; opacity: 1; color: var(--text); }

.dataTables_wrapper::after {
    content: '';
    display: block;
    clear: both;
}

/* ---------- Toast notifications ---------- */

.admin-toasts {
    position: fixed;
    top: calc(var(--admin-top-h) + 12px);
    right: 16px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    pointer-events: none;
}

.admin-toast {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-left-width: 3px;
    border-left-color: var(--accent);
    border-radius: 12px;
    padding: 14px 38px 14px 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    position: relative;
    animation: toast-in 220ms ease-out;
    min-width: 260px;
}

.admin-toast--success { border-left-color: var(--ok); }
.admin-toast--danger  { border-left-color: #ff8b8b; }
.admin-toast--warning { border-left-color: #ffc45a; }
.admin-toast--info    { border-left-color: var(--accent); }

.admin-toast__text { display: block; }

.admin-toast__action {
    display: inline-block;
    margin-top: 10px;
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.admin-toast__action:hover { text-decoration: underline; }

.admin-toast__close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}

.admin-toast__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.admin-toast__close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

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

.admin-toast.is-leaving { animation: toast-out 180ms ease-in forwards; }

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

#notification { display: none; }

@media (max-width: 560px) {
    .admin-toasts {
        left: 12px;
        right: 12px;
        max-width: none;
    }
    .admin-toast { min-width: 0; }
}

/* ---------- Utilities ---------- */

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

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

.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--text-2);
}

.badge-pill--accent { background: rgba(113,112,255,0.15); color: #c8c7ff; border-color: rgba(113,112,255,0.35); }
.badge-pill--ok { background: rgba(52,211,153,0.13); color: #8eecc7; border-color: rgba(52,211,153,0.35); }
.badge-pill--warn { background: rgba(255,139,139,0.12); color: #ffb3b3; border-color: rgba(255,100,100,0.35); }

.kv-list {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 8px 20px;
    font-size: 14px;
}

.kv-list__key { color: var(--text-3); }
.kv-list__value { color: var(--text); word-break: break-word; }

.copy-btn {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text-2);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.copy-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.22); }

.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-2);
}

.pagination-bar a,
.pagination-bar span.current {
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid var(--line-2);
    color: var(--text-2);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination-bar a:hover { background: var(--surface); color: var(--text); }
.pagination-bar span.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination-bar .disabled { opacity: 0.4; pointer-events: none; }

/* Bootstrap-style .pagination used by fragments/pageable. Strip list bullets
   and re-style to match the rest of the admin design. */
.pagination {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.pagination.justify-content-center { justify-content: center; }

.pagination .page-item {
    list-style: none;
    margin: 0;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: 13px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.pagination .page-link:hover {
    background: var(--surface);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.22);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

.pagination .page-link .fa { font-style: normal; }

/* ---------- Admin responsive ---------- */

@media (max-width: 1024px) {
    .admin-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .admin-shell__main > .container-1100,
    .admin-shell__main > .container-1240 { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 860px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: fixed;
        top: var(--admin-top-h);
        left: 0;
        width: min(86vw, 320px);
        height: calc(100vh - var(--admin-top-h));
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        border-right: 1px solid var(--line-2);
        background: var(--bg-2);
    }

    body.admin--sidebar-open .admin-sidebar { transform: translateX(0); }

    .admin-top__hamburger { display: inline-flex; align-items: center; justify-content: center; }

    .admin-shell__main { padding: 24px 0 80px; }
    .admin-shell__main > .container-1100,
    .admin-shell__main > .container-1240 { padding-left: 20px; padding-right: 20px; }

    .admin-grid-2,
    .admin-grid-3 { grid-template-columns: 1fr; }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { float: none; width: 100%; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
}

@media (max-width: 560px) {
    .admin-top__inner { padding: 0 16px; gap: 10px; }
    .admin-top__user .admin-top__user-email { display: none; }
}

/* ---------- Account ---------- */

/* Minimal Bootstrap-style grid shim for legacy account blocks. Kept narrow
 * on purpose — new components should use .form-row, CSS grid, or flex. */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
.row > .col,
.row > [class*="col-"] {
    padding: 0 12px;
    box-sizing: border-box;
    min-width: 0;
}
.row > .col { flex: 1 1 0%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 820px) {
    .col-md-4, .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

/* sectionBlock hides non-active blocks until the hash-router shows them.
 * The view controller JS flips display to "block" on the active block; all
 * others stay at display: none. Inter-child spacing uses an adjacent-sibling
 * selector so it works regardless of the display value the JS sets. */
.sectionBlock { display: none; }
.sectionBlock > * + * { margin-top: 16px; }

/* Inner stacked-card wrapper — spacing only, does NOT set display so it
 * stays composable inside a hidden .sectionBlock. */
.account-blocks > * + * { margin-top: 16px; }

/* Product-style card: image/icon left, content right. */
.product-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.product-card__icon {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-card__content { flex: 1 1 auto; min-width: 0; }

.product-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.product-card__description {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .product-card { flex-direction: column; }
    .product-card__icon { width: 72px; height: 72px; }
}

/* Feature list — used by addons / autosolve-ai benefits */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.8;
}

.feature-list li { display: flex; align-items: baseline; gap: 6px; }
.feature-list li > svg,
.feature-list li > svg.icon-bullet { color: var(--ok); flex: 0 0 auto; }
.feature-list .feature-list__disabled { text-decoration: line-through; color: var(--text-3); }
.feature-list .feature-list__note { color: var(--text-3); font-size: 14px; padding-left: 4px; }

.loading-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: aycd-spinner 0.8s linear infinite;
}

@keyframes aycd-spinner { to { transform: rotate(360deg); } }

/* Inline button spinner — sized for use inside a .btn label */
.btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: aycd-spinner 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* Credit balance tile */
.credit-balance__amount {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Password field toggle wrapper */
.form-field-wrap { position: relative; }
.form-field-wrap .form-field { padding-right: 44px; }
.form-field-wrap__toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-3);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
}
.form-field-wrap__toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }

/* Inline checkbox row (legacy form-check re-skin).
   Input styling is shared with .form-check — see the custom-checkbox block above. */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 14px;
    padding: 4px 0;
}
.custom-checkbox label { margin: 0; cursor: pointer; }

/* ---------- Shared DataTables skin (.dt-2026) ---------- */

.dt-2026 .dataTables_wrapper { color: var(--text-2); font-size: 14px; }

.dt-2026 .dataTables_length,
.dt-2026 .dataTables_filter,
.dt-2026 .dataTables_info,
.dt-2026 .dataTables_paginate {
    padding: 12px 4px;
    color: var(--text-2);
    font-size: 13px;
}

.dt-2026 .dataTables_length select,
.dt-2026 .dataTables_filter input {
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--text);
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    margin: 0 4px;
}

.dt-2026 .dataTables_filter input:focus,
.dt-2026 .dataTables_length select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(113, 112, 255, 0.18);
}

.dt-2026 .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 7px !important;
    color: var(--text-2) !important;
    padding: 6px 11px !important;
    margin: 0 3px !important;
    box-shadow: none !important;
}

.dt-2026 .dataTables_paginate .paginate_button:hover {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.dt-2026 .dataTables_paginate .paginate_button.current,
.dt-2026 .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.dt-2026 .dataTables_paginate .paginate_button.disabled,
.dt-2026 .dataTables_paginate .paginate_button.disabled:hover { opacity: 0.4; }

.dt-2026 table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

.dt-2026 table.dataTable thead th {
    background: var(--surface-2);
    color: var(--text-3);
    font-family: 'Geist Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.13em;
    font-weight: 500;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 10px 12px;
    text-align: left;
}

.dt-2026 table.dataTable tbody td {
    border-bottom: 1px solid var(--line);
    padding: 12px;
    color: var(--text);
    font-size: 14px;
    background: transparent;
}

.dt-2026 table.dataTable tbody tr:hover td { background: rgba(255,255,255,0.02); }

/* Plain 2026-skinned HTML table (non-DataTables) */
.table-2026 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.table-2026 thead th {
    background: var(--surface-2);
    color: var(--text-3);
    font-family: 'Geist Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.13em;
    font-weight: 500;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 10px 12px;
    text-align: left;
}
.table-2026 tbody td {
    border-bottom: 1px solid var(--line);
    padding: 12px;
    color: var(--text);
}
.table-2026 tbody tr:last-child td { border-bottom: 0; }

/* Variant of .admin-shell for flow sub-pages (cancel subscription, delete account,
   login history): same fixed top-bar + content padding, but no left sidebar. */
.admin-shell--no-sidebar {
    grid-template-columns: 1fr;
}

.admin-shell--no-sidebar .admin-shell__main {
    padding-top: 40px;
}

@media (max-width: 860px) {
    .admin-shell--no-sidebar .admin-shell__main { padding-top: 24px; }
}

/* ---------- Auth / checkout slim-form pages ----------
   Public-shell pages (no sidebar) that render a centered surface-card:
   create account, verify, reset password, 2FA, order success, 404 etc. */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 72px 0 96px;
}

.auth-page > .container-1100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.auth-page__card {
    width: 100%;
    max-width: 520px;
}

.auth-page__card--wide { max-width: 640px; }

.auth-page__header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-page__logo {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--text);
}

.auth-page__title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.auth-page__subtitle {
    font-size: 14px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.5;
}

.auth-page__footer-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-3);
}

.auth-page__footer-link a { color: var(--text-2); }
.auth-page__footer-link a:hover { color: var(--text); }

.auth-loading {
    justify-content: center;
    align-items: center;
    padding: 24px 0;
}

.auth-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: aycd-spinner 0.8s linear infinite;
}

@media (max-width: 640px) {
    .auth-page { padding: 40px 0 64px; }
    .auth-page__title { font-size: 22px; }
}

/* Small "← Back to Account" (or similar) link used consistently above auth
   + checkout surface cards. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 16px;
    transition: color 0.15s ease;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 14px; height: 14px; }

/* ---------- Input group (field + trailing buttons) ---------- */

.input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-group > .form-field { flex: 1 1 auto; min-width: 0; }
.input-group > .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 520px) {
    .input-group { flex-wrap: wrap; }
    .input-group > .form-field { flex: 1 1 100%; }
}

/* ---------- Checkout stacked layout ---------- */

.checkout-page {
    padding: 40px 0 96px;
}

.checkout-shell {
    max-width: 640px;
    margin: 0 auto;
}

.checkout-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 640px) {
    .checkout-page { padding: 24px 0 72px; }
}

/* Prominent trial / discount callout inside the checkout summary card. */
.checkout-highlight {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(113, 112, 255, 0.14), rgba(113, 112, 255, 0.03));
    border: 1px solid rgba(113, 112, 255, 0.4);
}

.checkout-highlight--success {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.03));
    border-color: rgba(52, 211, 153, 0.4);
}

.checkout-highlight__label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
}

.checkout-highlight__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* ---------- Session expiry banner (replaces the old modal) ---------- */

.session-expiry-banner {
    position: fixed;
    top: calc(var(--nav-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    z-index: 70;
    font-size: 14px;
    color: var(--text);
    animation: session-banner-in 0.25s ease-out;
}

.session-expiry-banner[hidden] { display: none; }

.session-expiry-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@keyframes session-banner-in {
    from { transform: translate(-50%, -12px); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
}

@media (max-width: 640px) {
    .session-expiry-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ---------- Loading fragment (used by order_queue / update_card_queue) ---------- */

.loading-shell {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 0;
}

.loading-card {
    text-align: center;
    max-width: 480px;
}

.loading-card__gears {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 180px;
    position: relative;
    margin: 0 auto 24px;
}

/* The mask must sit on a container that does NOT rotate, or the cut-out
   spins with the gear and exposes the right gear behind it (artifacts). */
.loading-card__gear-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 120px;
    -webkit-mask-image: radial-gradient(ellipse 47% 47% at 100% 50%,
                                        transparent 99%, #000 100%);
            mask-image: radial-gradient(ellipse 47% 47% at 100% 50%,
                                        transparent 99%, #000 100%);
}

.loading-card__gear {
    display: block;
    height: 120px;
    width: 120px;
    transform: rotate(0deg);
    transform-origin: center;
    will-change: transform;
    filter: drop-shadow(0 0 24px rgba(113, 112, 255, 0.25));
}

.loading-card__gear--right {
    position: absolute;
    left: 60px;
    top: 0;
}

.loading-card__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--text);
}

.loading-card__subtitle {
    font-size: 14px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Customer invoice (screen + print) ---------- */

.invoice-page {
    padding: 40px 0 96px;
}

.invoice-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.invoice-box {
    padding: 40px;
}

.invoice-box h1,
.invoice-box h2,
.invoice-box h3 { color: var(--text); }

.invoice-box .invoice-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.invoice-box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.invoice-box table thead th {
    text-align: left;
    border-bottom: 1px solid var(--line-2);
    padding: 10px 12px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
}

.invoice-box table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

.invoice-box table tbody tr:last-child td { border-bottom: 0; }

.invoice-box .invoice-total {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    font-size: 16px;
    font-weight: 600;
}

@media print {
    body { background: #fff !important; color: #000 !important; }
    .nav,
    .admin-top,
    .admin-sidebar,
    .footer-2026,
    .invoice-toolbar,
    .back-link,
    .admin-sidebar__overlay { display: none !important; }
    .admin-shell { display: block; padding-top: 0; }
    .admin-shell__main { padding: 0; background: #fff; }
    .invoice-page { padding: 0; }
    .invoice-box {
        background: #fff !important;
        color: #000 !important;
        border: none !important;
        padding: 24px 0 !important;
    }
    .invoice-box h1,
    .invoice-box h2,
    .invoice-box h3 { color: #000 !important; }
    .invoice-box table thead th { color: #444 !important; border-bottom-color: #000 !important; }
    .invoice-box table tbody td { color: #000 !important; border-bottom-color: #ddd !important; }
    .invoice-box .invoice-total { border-top-color: #000 !important; }
}

/* ---------- Partnership offers sections ---------- */

.partnership-section + .partnership-section { margin-top: 56px; }

.partnership-section__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
}

.partnership-section .section-intro { margin-bottom: 20px; }

.partnership-section .pricing__cards {
    margin-top: 0;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- Careers page (long-form content) ---------- */

.careers-page { min-height: 100vh; padding: 120px 0 96px; }

.docs-page { min-height: 100vh; }

.home-page { min-height: 100vh; }

.careers-page__hero { text-align: center; margin-bottom: 56px; }

.careers-role {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.careers-role__meta {
    display: flex;
    gap: 20px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}