h1:focus {
    outline: none;
}

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

:root {
    --df-ink: #3f434a;
    --df-muted: #656565;
    --df-ash: #9da3af;
    --df-soft: #f9efe4;
    --df-paper: #fdf9f4;
    --df-surface: #fdfdfd;
    --df-line: #d9dde6;
    --df-linen: #f0e4d6;
    --df-graphite: #2d2f34;
    --df-blue: #2e77e5;
    --df-blue-dark: #446aa7;
    --df-gold: #7f6c1f;
    --df-green: #547358;
    --df-mauve: #9d4d77;
    --df-blossom: #fae9f4;
    --df-buttercup: #fbf4d8;
    --df-red: #9f3a38;
    --df-shadow: rgba(0, 0, 0, .01) 0 4px 12px 0, rgba(0, 0, 0, .05) 0 2px 6px 0, rgba(0, 0, 0, .10) 0 1px 3px 0;
    --df-shadow-lg: rgba(0, 0, 0, .02) 0 18px 55px 0, rgba(0, 0, 0, .08) 0 10px 28px 0;
    --df-radius: 12px;
    --df-radius-soft: 16px;
    --df-radius-pill: 50px;
    --df-font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --df-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
    --df-font-mono: "Geist Mono", "JetBrains Mono", Consolas, monospace;
}

html {
    background: var(--df-soft);
}

body {
    background: var(--df-soft);
    color: var(--df-ink);
    font-family: var(--df-font-body);
    font-feature-settings: "ss14", "ss15", "ss19";
    overflow-x: hidden;
}

.df-public,
.df-client {
    min-height: 100vh;
    overflow-x: clip;
    padding-top: 72px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 24rem),
        var(--df-soft);
    color: var(--df-ink);
}

.df-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding-inline: 24px;
}

.df-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 40;
    border-bottom: 1px solid rgba(221, 211, 196, .9);
    background: rgba(255, 253, 248, .94);
    backdrop-filter: blur(18px);
}

.df-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

.df-brand {
    color: var(--df-ink);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
}

.df-brand span {
    color: var(--df-blue);
}

.df-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    color: var(--df-muted);
    font-size: .92rem;
    font-weight: 800;
}

.df-nav a {
    text-decoration: none;
}

.df-nav a:hover {
    color: var(--df-blue);
}

.df-mobile-menu {
    display: none;
    position: relative;
}

.df-mobile-menu summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--df-blue-dark);
    border-radius: 8px;
    background: var(--df-blue);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 10px 22px rgba(49, 95, 122, .18);
}

.df-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.df-mobile-menu summary span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: white;
}

.df-mobile-menu nav {
    position: fixed;
    top: 72px;
    right: 16px;
    left: 16px;
    display: grid;
    gap: .35rem;
    border: 1px solid var(--df-line);
    border-radius: 10px;
    background: rgba(255, 253, 248, .98);
    padding: .7rem;
    box-shadow: 0 24px 70px rgba(29, 37, 53, .16);
}

.df-mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
    padding: .75rem .9rem;
    color: var(--df-ink);
    font-weight: 900;
    text-decoration: none;
}

.df-mobile-menu nav a:hover {
    background: var(--df-paper);
    color: var(--df-blue);
}

.df-mobile-menu nav .df-button-primary {
    justify-content: center;
    color: white;
}

.df-button-primary,
.df-button-secondary,
.df-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    padding: .75rem 1.05rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.df-button-primary {
    border: 1px solid var(--df-blue-dark);
    background: var(--df-blue);
    color: white;
    box-shadow: 0 12px 26px rgba(49, 95, 122, .18);
}

.df-button-primary:hover {
    background: var(--df-blue-dark);
}

.df-button-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: df-spin .75s linear infinite;
}

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

.df-button-secondary {
    border: 1px solid var(--df-line);
    background: var(--df-paper);
    color: var(--df-ink);
}

.df-button-secondary:hover {
    background: white;
    box-shadow: var(--df-shadow);
}

.df-button-danger {
    border: 1px solid rgba(159, 58, 56, .25);
    background: #fff7f5;
    color: var(--df-red);
}

.df-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(49, 95, 122, .18);
    border-radius: 999px;
    background: rgba(49, 95, 122, .08);
    color: var(--df-blue-dark);
    padding: .45rem .8rem;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.df-title {
    color: var(--df-ink);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.02;
}

.df-lead {
    color: var(--df-muted);
    line-height: 1.7;
}

.df-card {
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-surface);
    box-shadow: var(--df-shadow);
}

.df-panel {
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-paper);
}

.df-input {
    width: 100%;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    padding: .82rem .95rem;
    color: var(--df-ink);
    font-weight: 700;
}

.df-input:focus {
    border-color: var(--df-blue);
    outline: 3px solid rgba(49, 95, 122, .14);
}

.df-code {
    overflow-x: auto;
    border-radius: 8px;
    background: #172033;
    color: #e6edf3;
    padding: 1rem;
    font-size: .86rem;
    line-height: 1.65;
}

.df-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--df-line);
    background: var(--df-paper);
    color: var(--df-muted);
    padding: .3rem .6rem;
    font-size: .75rem;
    font-weight: 900;
}

.df-table-wrap {
    overflow: hidden;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
}

.df-stat {
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    padding: 1.1rem;
    box-shadow: 0 12px 34px rgba(29, 37, 53, .06);
}

.df-tab {
    border-radius: 7px;
    padding: .75rem 1rem;
    font-weight: 900;
    color: var(--df-muted);
}

.df-tab-active {
    background: white;
    color: var(--df-ink);
    box-shadow: 0 8px 20px rgba(29, 37, 53, .08);
}

.df-link-card {
    display: block;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.df-link-card:hover {
    border-color: rgba(49, 95, 122, .48);
    background: var(--df-paper);
    box-shadow: 0 14px 34px rgba(29, 37, 53, .07);
}

.df-choice {
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.df-choice:hover {
    border-color: rgba(49, 95, 122, .52);
    background: var(--df-paper);
}

.df-choice-active {
    border-color: var(--df-blue);
    background: var(--df-paper);
    box-shadow: 0 0 0 2px rgba(49, 95, 122, .14);
}

.df-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .9rem;
}

.df-table th {
    background: var(--df-paper);
    color: var(--df-muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

[class*="tracking-"] {
    letter-spacing: 0 !important;
}

.df-table th,
.df-table td {
    border-top: 1px solid var(--df-line);
    padding: .85rem;
}

.df-table thead th {
    border-top: 0;
}

#blazor-error-ui {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    display: none;
    margin: 0 auto;
    max-width: 760px;
}

.df-runtime-error {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    border: 1px solid rgba(49, 95, 122, .28);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,253,248,.92)),
        var(--df-paper);
    box-shadow: 0 24px 70px rgba(29, 37, 53, .18);
    padding: 1rem;
}

.df-runtime-error strong,
.df-runtime-error span {
    display: block;
}

.df-runtime-error strong {
    color: var(--df-ink);
    font-size: .98rem;
    font-weight: 950;
}

.df-runtime-error span {
    margin-top: .2rem;
    color: var(--df-muted);
    font-size: .88rem;
    line-height: 1.45;
}

.df-runtime-error .reload {
    border: 1px solid var(--df-blue-dark);
    border-radius: 8px;
    background: var(--df-blue);
    color: white;
    padding: .65rem .9rem;
    font-size: .88rem;
    font-weight: 950;
    text-decoration: none;
}

.df-runtime-error .dismiss {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid rgba(221, 211, 196, .9);
    border-radius: 8px;
    color: var(--df-muted);
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
}

.df-home {
    background:
        linear-gradient(145deg, rgba(255, 253, 248, .92), rgba(246, 241, 232, .82) 48%, rgba(255, 253, 248, .9)),
        var(--df-soft);
}

.df-home-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(221, 211, 196, .74);
    background:
        radial-gradient(circle at 78% 18%, rgba(49, 95, 122, .1), transparent 31rem),
        linear-gradient(180deg, rgba(255, 253, 248, .94), rgba(246, 241, 232, .78));
    padding-block: clamp(3.6rem, 5.4vw, 5.8rem);
}

.df-home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr);
    align-items: center;
    gap: clamp(2.25rem, 4.6vw, 4.5rem);
}

.df-home-copy {
    min-width: 0;
    max-width: 44rem;
}

.df-home-title {
    margin-top: 1.45rem;
    font-size: clamp(3.15rem, 4.5vw, 5rem);
    max-width: 10.8em;
}

.df-home-lead {
    margin-top: 1.35rem;
    max-width: 38rem;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.df-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.df-home-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.3rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(221, 211, 196, .9);
}

.df-home-metrics div {
    min-width: 8.4rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(221, 211, 196, .82);
}

.df-home-metrics div:last-child {
    border-right: 0;
}

.df-home-metrics dt {
    color: var(--df-ink);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
}

.df-home-metrics dd {
    margin-top: .45rem;
    color: var(--df-muted);
    font-size: .84rem;
    font-weight: 850;
}

.df-product-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(221, 211, 196, .96);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 30px 80px rgba(29, 37, 53, .12);
}

.df-product-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.74), transparent 42%);
}

.df-product-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid rgba(221, 211, 196, .86);
}

.df-product-topbar p {
    font-weight: 950;
}

.df-product-topbar span {
    color: var(--df-muted);
    font-size: .85rem;
    font-weight: 800;
}

.df-product-status {
    border: 1px solid rgba(49, 95, 122, .18);
    border-radius: 999px;
    background: rgba(49, 95, 122, .07);
    padding: .45rem .7rem;
}

.df-product-workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.1rem;
    padding: 1.25rem;
    background:
        linear-gradient(90deg, rgba(238, 230, 216, .95), rgba(255, 253, 248, .72)),
        var(--df-paper);
}

.df-document-preview {
    min-height: 24.6rem;
    border-radius: 10px;
    background: white;
    padding: 2rem;
    box-shadow: 0 18px 46px rgba(29, 37, 53, .08);
}

.df-doc-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #d9e0ea;
}

.df-doc-header span:first-child {
    display: block;
    width: 10.5rem;
    height: 1rem;
    border-radius: 4px;
    background: #cad4e0;
}

.df-doc-header span:last-child {
    display: block;
    width: 4rem;
    height: 2rem;
    border: 1px solid #d8e0ea;
    border-radius: 5px;
}

.df-doc-lines {
    display: grid;
    gap: .9rem;
    margin-top: 1.65rem;
}

.df-doc-lines span {
    display: block;
    height: .75rem;
    border-radius: 4px;
    background: #dbe2eb;
}

.df-doc-lines span:nth-child(1),
.df-doc-lines span:nth-child(5) {
    width: 84%;
}

.df-doc-lines span:nth-child(2),
.df-doc-lines span:nth-child(7) {
    width: 62%;
}

.df-doc-lines .df-var-blue,
.df-doc-lines .df-var-green {
    width: 72%;
    height: 2rem;
    border-radius: 5px;
}

.df-doc-lines .df-var-blue {
    border: 2px solid var(--df-blue);
    background: rgba(49, 95, 122, .08);
}

.df-doc-lines .df-var-green {
    justify-self: end;
    border: 2px solid var(--df-green);
    background: rgba(63, 111, 90, .08);
}

.df-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
    margin-top: 3rem;
}

.df-signatures span {
    border-top: 1px solid #cfd7e2;
    padding-top: .7rem;
    color: #667085;
    font-size: .75rem;
    font-weight: 700;
}

.df-variable-panel {
    align-self: stretch;
    min-width: 0;
    padding: .35rem 0 .2rem;
}

.df-panel-label {
    color: var(--df-muted);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-variable-list {
    display: grid;
    gap: .15rem;
    margin-top: .7rem;
}

.df-variable-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem .8rem;
    padding-block: .9rem;
    border-bottom: 1px solid rgba(221, 211, 196, .78);
}

.df-variable-row span,
.df-variable-row em {
    color: var(--df-ink);
    font-size: .9rem;
    font-style: normal;
    font-weight: 950;
}

.df-variable-row small {
    color: var(--df-muted);
    font-size: .72rem;
    font-weight: 750;
}

.df-home-code {
    margin-top: 1.05rem;
    font-size: .72rem;
    box-shadow: 0 16px 34px rgba(23, 32, 51, .15);
}

.df-home-band,
.df-home-section {
    padding-block: clamp(3.7rem, 6vw, 5.4rem);
}

.df-home-band {
    border-bottom: 1px solid rgba(221, 211, 196, .82);
    background: rgba(238, 230, 216, .58);
}

.df-home-band-last {
    border-top: 1px solid rgba(221, 211, 196, .82);
}

.df-home-split {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.df-section-title {
    margin-top: 1rem;
    max-width: 12.5ch;
    font-size: clamp(2.1rem, 4vw, 3.7rem);
}

.df-trust-flow {
    display: grid;
    gap: 0;
}

.df-trust-flow article {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.2rem;
    border-bottom: 1px solid rgba(221, 211, 196, .86);
}

.df-trust-flow article:first-child {
    padding-top: 0;
}

.df-trust-flow article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.df-trust-flow span {
    color: rgba(49, 95, 122, .62);
    font-size: .82rem;
    font-weight: 950;
}

.df-trust-flow h3 {
    color: var(--df-ink);
    font-size: 1.05rem;
    font-weight: 950;
}

.df-trust-flow p {
    margin-top: .35rem;
    max-width: 32rem;
    color: var(--df-muted);
    line-height: 1.65;
}

.df-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.df-sector-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.3rem;
    margin-top: 2.35rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(221, 211, 196, .86);
}

.df-sector-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    border-left: 3px solid rgba(49, 95, 122, .32);
    padding-inline: .9rem 1.35rem;
    color: var(--df-ink);
    font-weight: 950;
}

.df-usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    align-content: start;
}

.df-usecase-grid a {
    display: flex;
    align-items: center;
    min-height: 3.65rem;
    border-bottom: 1px solid rgba(221, 211, 196, .9);
    color: var(--df-ink);
    font-weight: 900;
    text-decoration: none;
}

.df-usecase-grid a::after {
    content: ">";
    margin-left: auto;
    color: rgba(49, 95, 122, .58);
    font-weight: 950;
}

.df-usecase-grid a:hover {
    color: var(--df-blue-dark);
}

.df-demo-intro {
    max-width: 70rem;
}

.df-demo-stepbar {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    max-width: 58rem;
}

.df-demo-stepbar span {
    border: 1px solid rgba(221, 211, 196, .9);
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    padding: .65rem .9rem;
    color: var(--df-muted);
    font-size: .85rem;
    font-weight: 900;
}

.df-demo-stepbar .df-demo-stepbar-active {
    border-color: rgba(49, 95, 122, .32);
    background: rgba(49, 95, 122, .09);
    color: var(--df-blue-dark);
}

.df-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .8fr);
    gap: 1.5rem;
    align-items: stretch;
}

.df-demo-workbench,
.df-demo-output {
    border: 1px solid var(--df-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--df-shadow);
}

.df-demo-workbench {
    padding: 1rem;
}

.df-demo-editor {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    min-height: 41rem;
}

.df-demo-process {
    border-right: 1px solid rgba(221, 211, 196, .82);
    padding: 1rem 1rem 1rem .25rem;
}

.df-demo-file {
    border: 1px solid rgba(221, 211, 196, .72);
    border-radius: 10px;
    background: white;
    padding: 1rem;
}

.df-demo-paper-stage {
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(238, 230, 216, .95), rgba(255, 253, 248, .78));
    padding: 1.35rem;
}

.df-demo-paper-stage > div {
    position: relative;
    overflow: hidden;
    max-width: 34rem;
    min-height: 100%;
    margin-inline: auto;
}

.df-demo-output {
    align-self: stretch;
}

.df-demo-scan {
    position: absolute;
    right: 0;
    left: 0;
    top: 5.5rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(49, 95, 122, .66), transparent);
    box-shadow: 0 0 18px rgba(49, 95, 122, .24);
    animation: df-scan 4.2s ease-in-out infinite;
}

.df-demo-token {
    position: relative;
    box-shadow: 0 0 0 0 rgba(49, 95, 122, .18);
    animation: df-token-pulse 3.2s ease-in-out infinite;
}

.df-demo-token-name {
    animation-delay: .35s;
}

.df-demo-token-amount {
    animation-delay: .7s;
}

.df-demo-pipeline {
    display: grid;
    gap: .55rem;
}

.df-demo-pipeline span {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
}

.df-demo-pipeline span::before {
    content: "";
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: var(--df-green);
    box-shadow: 0 0 0 5px rgba(63, 111, 90, .12);
    animation: df-dot 2.8s ease-in-out infinite;
}

.df-demo-pipeline span:nth-child(2)::before {
    animation-delay: .35s;
}

.df-demo-pipeline span:nth-child(3)::before {
    animation-delay: .7s;
}

.df-api-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.df-api-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow: auto;
    border-right: 1px solid rgba(221, 211, 196, .82);
    padding-right: 1rem;
    z-index: 1;
}

.df-api-sidebar nav {
    border-radius: 10px;
    background: rgba(246, 241, 232, .82);
    padding: .6rem;
}

.df-api-content {
    min-width: 0;
}

.df-api-section {
    scroll-margin-top: 96px;
}

.df-dashboard-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid rgba(221, 211, 196, .82);
    border-radius: 10px;
    background:
        radial-gradient(circle at 88% 12%, rgba(49, 95, 122, .12), transparent 18rem),
        rgba(255, 255, 255, .72);
    padding: 1.4rem;
    box-shadow: 0 16px 42px rgba(29, 37, 53, .06);
}

.df-dashboard-loader {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    border: 1px solid rgba(221, 211, 196, .82);
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
    padding: 1.5rem;
    box-shadow: var(--df-shadow);
}

.df-loader-orbit {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 3px solid rgba(49, 95, 122, .18);
    border-top-color: var(--df-blue);
    border-radius: 999px;
    animation: df-spin 1s linear infinite;
}

.df-loader-orbit::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background: rgba(49, 95, 122, .1);
}

.df-dashboard-skeleton {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.df-dashboard-skeleton span {
    min-height: 7rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,.68), rgba(238,230,216,.9), rgba(255,255,255,.68));
    background-size: 220% 100%;
    animation: df-shimmer 1.4s ease-in-out infinite;
}

.df-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.df-dashboard-metrics .df-stat,
.df-dashboard-metrics > * {
    min-width: 0;
}

.df-dashboard-metrics .df-stat {
    position: relative;
    overflow: hidden;
    border: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,253,248,.7)),
        var(--df-surface);
}

.df-dashboard-metrics .df-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--df-blue), var(--df-green));
}

.df-dashboard-insights > div {
    border-left: 3px solid rgba(49, 95, 122, .28);
    background: rgba(255, 253, 248, .64);
    padding: .95rem 1rem;
}

.df-dashboard-status {
    border-top: 1px solid rgba(221, 211, 196, .82);
    padding-top: 1.2rem;
}

.df-dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}

.df-dashboard-status-grid span {
    border: 1px solid rgba(221, 211, 196, .78);
    border-radius: 8px;
    background: var(--df-paper);
    padding: .85rem;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
}

.df-dashboard-status-grid b {
    display: block;
    color: var(--df-ink);
    font-size: 1.35rem;
}

.df-sales-hero,
.df-sales-card,
.df-sales-status {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--df-shadow);
}

.df-sales-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 90% 18%, rgba(49, 95, 122, .13), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(238,230,216,.58));
}

.df-sales-hero h2 {
    max-width: 48rem;
    margin-top: .85rem;
    font-size: clamp(1.9rem, 3vw, 2.85rem);
    font-weight: 950;
    line-height: 1.08;
}

.df-sales-hero p:not(.df-kicker) {
    max-width: 50rem;
    margin-top: .75rem;
    color: var(--df-muted);
    line-height: 1.65;
}

.df-sales-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.df-sales-status {
    margin-top: 1rem;
    border-color: rgba(49, 95, 122, .22);
    background: rgba(49, 95, 122, .07);
    color: var(--df-blue-dark);
    padding: .9rem 1rem;
    font-weight: 900;
}

.df-admin-toast {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: start;
    width: min(34rem, calc(100vw - 2rem));
    border: 1px solid rgba(49, 95, 122, .24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 24px 70px rgba(29, 37, 53, .18);
    padding: 1rem;
}

.df-admin-toast strong,
.df-admin-toast span {
    display: block;
}

.df-admin-toast strong {
    color: var(--df-ink);
    font-size: .95rem;
    font-weight: 950;
}

.df-admin-toast span {
    margin-top: .25rem;
    color: var(--df-muted);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.45;
}

.df-admin-toast button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    color: var(--df-muted);
    font-size: 1.15rem;
    font-weight: 950;
}

.df-admin-toast-ok {
    border-color: rgba(49, 95, 122, .24);
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(246, 250, 252, .96)),
        white;
}

.df-admin-toast-error {
    border-color: rgba(185, 28, 28, .24);
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(254, 242, 242, .96)),
        white;
}

.df-admin-toast-error strong {
    color: #991b1b;
}

.df-campaign-inline {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 253, 248, .92), rgba(246, 241, 232, .48));
    padding: 1rem;
}

.df-campaign-inline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.df-campaign-inline-head h3 {
    margin-top: .45rem;
    font-size: 1.15rem;
    font-weight: 950;
}

.df-sales-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.df-sales-card {
    padding: 1.25rem;
}

.df-sales-card-head,
.df-campaign-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.df-sales-card-head h2 {
    margin-top: .75rem;
    font-size: 1.55rem;
    font-weight: 950;
}

.df-campaign-list {
    display: grid;
    gap: .9rem;
    align-content: start;
}

.df-campaign-card {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: white;
    padding: 1rem;
}

.df-campaign-card-head b,
.df-campaign-card-head span,
.df-campaign-card-head em {
    display: block;
}

.df-campaign-card-head b {
    font-size: 1.05rem;
    font-weight: 950;
}

.df-campaign-card-head span {
    margin-top: .2rem;
    color: var(--df-muted);
    font-size: .86rem;
    font-weight: 800;
}

.df-campaign-card-head em {
    border: 1px solid rgba(49, 95, 122, .18);
    border-radius: 999px;
    background: rgba(49, 95, 122, .07);
    color: var(--df-blue-dark);
    padding: .35rem .55rem;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
}

.df-campaign-card p {
    margin-top: .8rem;
    color: var(--df-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.df-campaign-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
}

.df-campaign-actions span {
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
}

.df-campaign-recipients {
    margin-top: 1rem;
    border-top: 1px solid rgba(221, 211, 196, .86);
    padding-top: .85rem;
}

.df-campaign-recipients summary {
    cursor: pointer;
    color: var(--df-blue-dark);
    font-weight: 950;
}

.df-campaign-recipients div {
    display: grid;
    gap: .9rem;
    margin-top: .85rem;
}

.df-campaign-recipients label {
    display: grid;
    gap: .45rem;
}

.df-campaign-recipients label span {
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
}

.df-campaign-recipients textarea {
    min-height: 8rem;
}

.df-sales-table {
    overflow-x: auto;
}

.df-sales-table table {
    min-width: 1120px;
}

.df-lead-editor {
    display: grid;
    gap: .85rem;
}

.df-manual-lead-grid,
.df-bulk-mail-panel {
    display: grid;
    gap: .75rem;
}

.df-manual-lead-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.df-bulk-mail-panel {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: var(--df-paper);
    padding: 1rem;
}

.df-row-actions {
    display: grid;
    min-width: 8rem;
    gap: .45rem;
}

.df-admin-credit-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 96% 10%, rgba(49, 95, 122, .12), transparent 16rem),
        white;
}

.df-admin-credit-settings h2 {
    margin-top: .55rem;
    color: var(--df-ink);
    font-size: 1.45rem;
    font-weight: 950;
}

.df-admin-credit-settings p:not(.df-kicker) {
    margin-top: .45rem;
    color: var(--df-muted);
    line-height: 1.6;
}

.df-admin-credit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: end;
}

.df-admin-credit-form button {
    grid-column: 1 / -1;
}

.df-admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 3rem;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-paper);
    padding: .8rem .9rem;
    color: var(--df-ink);
    font-weight: 950;
}

.df-leads-campaign {
    background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,241,232,.72)),
        var(--df-paper);
}

.df-leads-campaign-stats {
    display: grid;
    justify-items: end;
    gap: .3rem;
}

.df-leads-campaign-stats span,
.df-leads-campaign-stats b {
    display: inline-flex;
    border-radius: 999px;
    padding: .35rem .6rem;
    font-size: .75rem;
    font-weight: 950;
}

.df-leads-campaign-stats span {
    border: 1px solid var(--df-line);
    background: white;
    color: var(--df-muted);
}

.df-leads-campaign-stats b {
    background: rgba(49, 95, 122, .1);
    color: var(--df-blue-dark);
}

.df-leads-filter-grid,
.df-loose-mail-panel {
    display: grid;
    gap: .85rem;
}

.df-leads-filter-grid {
    grid-template-columns: .8fr minmax(0, 1.1fr) 1fr minmax(0, 1fr);
}

.df-leads-actionbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
}

.df-loose-mail-panel {
    grid-template-columns: .55fr minmax(0, .8fr) minmax(0, 1fr) auto;
    align-items: end;
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: white;
    padding: 1rem;
}

.df-loose-mail-panel h3 {
    margin-top: .45rem;
    color: var(--df-ink);
    font-size: 1.12rem;
    font-weight: 950;
}

.df-leads-board {
    overflow: hidden;
    border: 1px solid var(--df-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
}

.df-leads-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--df-line);
    background: var(--df-paper);
    padding: .9rem 1rem;
    color: var(--df-muted);
    font-size: .84rem;
    font-weight: 950;
}

.df-select-all {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--df-ink);
}

.df-lead-card-list {
    display: grid;
    gap: .9rem;
    padding: .9rem;
}

.df-lead-card {
    border: 1px solid rgba(221, 211, 196, .9);
    border-radius: 10px;
    background: white;
    padding: 1rem;
    box-shadow: 0 12px 34px rgba(29, 37, 53, .045);
}

.df-lead-card-selected {
    border-color: rgba(49, 95, 122, .45);
    box-shadow: 0 0 0 2px rgba(49, 95, 122, .08), 0 14px 36px rgba(29, 37, 53, .06);
}

.df-lead-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: start;
}

.df-lead-check {
    position: relative;
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
}

.df-lead-check input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.df-lead-check span {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(49, 95, 122, .32);
    border-radius: 4px;
    background: white;
}

.df-lead-check input:checked + span {
    border-color: var(--df-blue);
    background: var(--df-blue);
    box-shadow: inset 0 0 0 3px white;
}

.df-lead-title-input,
.df-lead-muted-input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: 0;
}

.df-lead-title-input {
    color: var(--df-ink);
    font-size: 1.1rem;
    font-weight: 950;
}

.df-lead-muted-input {
    margin-top: .2rem;
    color: var(--df-muted);
    font-weight: 800;
}

.df-lead-score {
    display: grid;
    justify-items: center;
    min-width: 4.2rem;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-paper);
    padding: .55rem .75rem;
}

.df-lead-score span {
    color: var(--df-muted);
    font-size: .7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-lead-score b {
    color: var(--df-ink);
    font-size: 1.2rem;
    font-weight: 950;
}

.df-lead-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.df-lead-fields label {
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-lead-fields .df-input {
    margin-top: .35rem;
    padding: .72rem .8rem;
}

.df-lead-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
    margin-top: .9rem;
}

.df-lead-draft {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(221, 211, 196, .9);
    padding-top: 1rem;
}

.df-email-trace-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem;
}

.df-email-trace-hero h2 {
    margin-top: .6rem;
    color: var(--df-ink);
    font-size: 1.7rem;
    font-weight: 950;
}

.df-email-trace-hero p {
    margin-top: .45rem;
    max-width: 52rem;
    color: var(--df-muted);
    line-height: 1.6;
}

.df-email-trace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.df-email-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.df-email-workspace {
    display: grid;
    grid-template-columns: minmax(320px, .58fr) minmax(0, 1fr);
    margin-top: 1rem;
    overflow: hidden;
}

.df-email-sidebar {
    border-right: 1px solid var(--df-line);
    background: linear-gradient(180deg, rgba(246, 241, 232, .55), rgba(255, 255, 255, .95));
}

.df-email-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem;
    gap: .75rem;
    border-bottom: 1px solid var(--df-line);
    padding: 1rem;
}

.df-email-filters label span {
    display: block;
    margin-bottom: .35rem;
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-email-filters button {
    grid-column: 1 / -1;
}

.df-email-list {
    max-height: 680px;
    overflow: auto;
    padding: .75rem;
}

.df-email-row {
    display: grid;
    gap: .35rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: .85rem;
    text-align: left;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.df-email-row + .df-email-row {
    margin-top: .45rem;
}

.df-email-row:hover,
.df-email-row-active {
    border-color: rgba(49, 95, 122, .24);
    background: white;
    box-shadow: 0 12px 28px rgba(29, 37, 53, .06);
}

.df-email-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.df-email-row-top b {
    color: var(--df-blue-dark);
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-email-row-top em {
    color: var(--df-muted);
    font-size: .75rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.df-email-row strong {
    color: var(--df-ink);
    font-weight: 950;
    line-height: 1.25;
}

.df-email-row span:not(.df-email-row-top),
.df-email-row small {
    color: var(--df-muted);
    font-size: .82rem;
}

.df-email-detail {
    min-height: 680px;
    padding: 1.25rem;
}

.df-email-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--df-line);
    padding-bottom: 1rem;
}

.df-email-detail-head h2 {
    margin-top: .65rem;
    color: var(--df-ink);
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1.2;
}

.df-email-detail-head p {
    margin-top: .35rem;
    color: var(--df-muted);
    font-weight: 800;
}

.df-email-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.df-email-meta div,
.df-email-tech div {
    min-width: 0;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: rgba(255, 253, 248, .65);
    padding: .85rem;
}

.df-email-meta dt,
.df-email-tech b,
.df-email-body h3 {
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-email-meta dd,
.df-email-tech p {
    margin-top: .35rem;
    color: var(--df-ink);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.df-email-body,
.df-email-tech {
    margin-top: 1rem;
}

.df-email-body pre {
    margin-top: .55rem;
    max-height: 340px;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    padding: 1rem;
    color: var(--df-ink);
    font-family: Inter, sans-serif;
    font-size: .95rem;
    line-height: 1.65;
}

.df-email-tech {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.df-email-error {
    grid-column: 1 / -1;
    border-color: rgba(185, 28, 28, .22) !important;
    background: rgba(254, 242, 242, .75) !important;
}

.df-email-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid var(--df-line);
    border-radius: 999px;
    background: white;
    padding: .25rem .55rem;
    color: var(--df-muted) !important;
    font-weight: 950;
}

.df-email-status-ok {
    border-color: rgba(49, 95, 122, .2);
    background: rgba(49, 95, 122, .08);
    color: var(--df-blue-dark) !important;
}

.df-email-status-in {
    border-color: rgba(4, 120, 87, .2);
    background: rgba(16, 185, 129, .09);
    color: #047857 !important;
}

.df-email-status-bad {
    border-color: rgba(185, 28, 28, .22);
    background: rgba(254, 226, 226, .72);
    color: #b91c1c !important;
}

.df-email-empty,
.df-email-loading {
    border: 1px dashed rgba(49, 95, 122, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    padding: 1rem;
    color: var(--df-muted);
}

.df-email-empty b {
    display: block;
    color: var(--df-ink);
    font-weight: 950;
}

.df-email-empty p {
    margin-top: .35rem;
    line-height: 1.55;
}

.df-email-empty-large {
    display: grid;
    min-height: 420px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.df-email-loading {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 900;
}

.df-email-loading span {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(49, 95, 122, .18);
    border-top-color: var(--df-blue);
    border-radius: 999px;
    animation: df-spin .8s linear infinite;
}

.df-templates-hero,
.df-template-create,
.df-template-library,
.df-usage-hero,
.df-usage-balance,
.df-pricing-meter,
.df-pricing-examples {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--df-shadow);
}

.df-templates-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 94% 22%, rgba(63, 111, 90, .14), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(238,230,216,.62));
}

.df-templates-hero h2,
.df-usage-hero h2 {
    margin-top: .85rem;
    max-width: 42rem;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    font-weight: 950;
    line-height: 1.08;
}

.df-templates-hero p:not(.df-kicker),
.df-usage-hero p:not(.df-kicker) {
    margin-top: .75rem;
    max-width: 46rem;
    color: var(--df-muted);
    line-height: 1.65;
}

.df-template-flow {
    display: grid;
    min-width: 18rem;
    gap: .65rem;
}

.df-template-flow span {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 8px;
    background: rgba(255,253,248,.72);
    padding: .8rem .9rem;
    color: var(--df-muted);
    font-size: .88rem;
    font-weight: 900;
}

.df-template-flow b {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 999px;
    background: var(--df-blue);
    color: white;
    font-size: .78rem;
}

.df-template-create,
.df-template-library,
.df-usage-balance {
    padding: 1.5rem;
}

.df-template-create {
    background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,253,248,.78)),
        white;
}

.df-template-create-header,
.df-template-library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.df-template-create-header h2,
.df-template-library-head h2 {
    margin-top: .85rem;
    font-size: 1.7rem;
    font-weight: 950;
}

.df-template-create-header p:not(.df-kicker) {
    margin-top: .5rem;
    max-width: 32rem;
    color: var(--df-muted);
    line-height: 1.6;
}

.df-field-label {
    display: grid;
    gap: .35rem;
    color: var(--df-ink);
    font-weight: 900;
}

.df-upload-zone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    border: 1px dashed rgba(49, 95, 122, .38);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(49, 95, 122, .06), rgba(255, 253, 248, .92)),
        var(--df-paper);
    padding: 1rem;
    cursor: pointer;
}

.df-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.df-upload-icon,
.df-template-doc-icon {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff1f1;
    color: #bd2626;
    font-weight: 950;
}

.df-upload-icon {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.05rem;
}

.df-upload-zone b,
.df-upload-zone small {
    display: block;
}

.df-upload-zone small {
    margin-top: .25rem;
    color: var(--df-muted);
    font-weight: 750;
}

.df-form-error {
    border: 1px solid rgba(180, 35, 24, .18);
    border-radius: 8px;
    background: #fff7f5;
    color: #b42318;
    padding: .85rem;
    font-weight: 900;
}

.df-template-list {
    display: grid;
    gap: .85rem;
    margin-top: 1.35rem;
}

.df-template-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(221, 211, 196, .9);
    border-radius: 10px;
    background: white;
    padding: 1rem;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.df-template-row:hover {
    border-color: rgba(49, 95, 122, .46);
    box-shadow: 0 16px 34px rgba(29, 37, 53, .07);
    transform: translateY(-1px);
}

.df-template-row-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    min-width: 0;
}

.df-template-doc-icon {
    width: 2.7rem;
    height: 2.7rem;
    font-size: .8rem;
}

.df-template-row p {
    overflow: hidden;
    color: var(--df-ink);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-template-row small {
    display: block;
    overflow: hidden;
    margin-top: .2rem;
    color: var(--df-muted);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-template-row-meta {
    display: grid;
    justify-items: end;
    gap: .25rem;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.df-empty-state {
    display: grid;
    gap: .35rem;
    border: 1px dashed rgba(221, 211, 196, .95);
    border-radius: 10px;
    background: var(--df-paper);
    padding: 1.2rem;
}

.df-empty-state b {
    font-size: 1.05rem;
}

.df-empty-state span {
    color: var(--df-muted);
    line-height: 1.55;
}

.df-usage-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 90% 18%, rgba(49, 95, 122, .13), transparent 18rem),
        rgba(255, 255, 255, .82);
}

.df-usage-balance {
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,253,248,.68)),
        white;
}

.df-usage-label {
    color: var(--df-blue);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-credit-amount {
    margin-top: 1rem;
    color: var(--df-ink);
    font-size: clamp(2.85rem, 5vw, 4.25rem);
    font-weight: 950;
    line-height: .95;
    white-space: nowrap;
}

.df-credit-amount span {
    font-size: .44em;
}

.df-usage-costs {
    display: grid;
    gap: .85rem;
    margin-top: 1.5rem;
}

.df-usage-costs div {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: var(--df-paper);
    padding: 1rem;
}

.df-usage-costs span,
.df-usage-costs small {
    display: block;
}

.df-usage-costs span {
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
}

.df-usage-costs b {
    display: block;
    margin-top: .25rem;
    font-size: 1.15rem;
    white-space: nowrap;
}

.df-usage-costs small {
    margin-top: .35rem;
    color: var(--df-muted);
    line-height: 1.5;
}

.df-usage-table-wrap {
    overflow-x: auto;
}

.df-usage-table {
    min-width: 720px;
}

.df-usage-table th,
.df-usage-table td {
    padding: .95rem .9rem;
    vertical-align: middle;
}

.df-nowrap {
    white-space: nowrap;
}

.df-pricing {
    padding-block: clamp(3.4rem, 6vw, 5.6rem);
}

.df-pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2rem;
    align-items: center;
}

.df-pricing-hero h1 {
    max-width: 13ch;
    font-size: clamp(3rem, 5.4vw, 5.7rem);
}

.df-pricing-balance-card {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 12px;
    background:
        linear-gradient(145deg, #182239, #315f7a);
    color: white;
    padding: 1.4rem;
    box-shadow: 0 26px 62px rgba(24, 34, 57, .22);
}

.df-pricing-balance-card span,
.df-pricing-balance-card small {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 850;
}

.df-pricing-balance-card b {
    display: block;
    margin-top: 2.8rem;
    font-size: 2.6rem;
    line-height: 1;
}

.df-pricing-balance-card small {
    margin-top: .8rem;
    line-height: 1.55;
}

.df-pricing-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 1.5rem;
    margin-top: 2.2rem;
}

.df-pricing-meter,
.df-pricing-examples {
    padding: 1.5rem;
}

.df-pricing-lines {
    display: grid;
    gap: 1rem;
    margin-top: 1.35rem;
}

.df-pricing-lines div {
    border-bottom: 1px solid rgba(221, 211, 196, .86);
    padding-block: 1.2rem;
}

.df-pricing-lines div:last-child {
    border-bottom: 0;
}

.df-pricing-lines span,
.df-pricing-lines small {
    display: block;
}

.df-pricing-lines span {
    color: var(--df-muted);
    font-weight: 900;
}

.df-pricing-lines b {
    display: block;
    margin-top: .45rem;
    font-size: clamp(2.4rem, 4vw, 3.55rem);
    line-height: 1;
    white-space: nowrap;
}

.df-pricing-lines small {
    margin-top: .65rem;
    color: var(--df-muted);
    line-height: 1.6;
}

.df-pricing-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.df-pricing-trust div {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: rgba(255,255,255,.76);
    padding: 1rem;
}

.df-pricing-trust b,
.df-pricing-trust span {
    display: block;
}

.df-pricing-trust span {
    margin-top: .35rem;
    color: var(--df-muted);
    line-height: 1.55;
}

.df-pricing-compact {
    padding-block: clamp(2.25rem, 4vw, 3.6rem);
}

.df-pricing-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: end;
    border-bottom: 1px solid rgba(221, 211, 196, .86);
    padding-bottom: 1.5rem;
}

.df-pricing-summary h1 {
    max-width: 18ch;
    margin-top: .9rem;
    font-size: clamp(2.55rem, 4.4vw, 4.65rem);
}

.df-pricing-summary .df-lead {
    max-width: 46rem;
    margin-top: .8rem;
}

.df-pricing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.df-pricing-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20rem;
    gap: 1rem;
    margin-top: 1.35rem;
}

.df-pricing-rate-card,
.df-pricing-topup-card,
.df-pricing-ledger {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 42px rgba(29, 37, 53, .06);
}

.df-pricing-rate-card {
    padding: 1.15rem;
}

.df-pricing-rate-card span,
.df-pricing-topup-card span {
    display: block;
    color: var(--df-muted);
    font-size: .8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-pricing-rate-card b,
.df-pricing-topup-card b {
    display: block;
    margin-top: .65rem;
    color: var(--df-ink);
    font-size: clamp(2.15rem, 3.8vw, 3.2rem);
    line-height: 1;
    white-space: nowrap;
}

.df-pricing-rate-card p,
.df-pricing-topup-card p {
    margin-top: .75rem;
    color: var(--df-muted);
    line-height: 1.55;
}

.df-pricing-rate-card ul {
    display: grid;
    gap: .45rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(221, 211, 196, .86);
    color: var(--df-ink);
    font-size: .9rem;
    font-weight: 850;
}

.df-pricing-rate-card li {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.df-pricing-rate-card li::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--df-green);
    box-shadow: 0 0 0 4px rgba(63, 111, 90, .1);
}

.df-pricing-rate-primary {
    background:
        linear-gradient(145deg, rgba(49, 95, 122, .08), rgba(255,255,255,.88)),
        white;
}

.df-pricing-topup-card {
    padding: 1.15rem;
    background:
        linear-gradient(145deg, #182239, #315f7a);
    color: white;
}

.df-pricing-topup-card span,
.df-pricing-topup-card p {
    color: rgba(255,255,255,.76);
}

.df-pricing-topup-card b {
    color: white;
    font-size: clamp(2rem, 3vw, 2.55rem);
}

.df-pricing-topup-card div {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.df-pricing-topup-card small {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    padding: .35rem .55rem;
    color: rgba(255,255,255,.82);
    font-size: .72rem;
    font-weight: 900;
}

.df-pricing-ledger {
    margin-top: 1rem;
    padding: 1.15rem;
}

.df-pricing-ledger-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.df-pricing-ledger-head h2 {
    margin-top: .65rem;
    font-size: 1.65rem;
    font-weight: 950;
}

.df-pricing-example-table {
    display: grid;
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 8px;
}

.df-pricing-example-table > div {
    display: grid;
    grid-template-columns: minmax(13rem, 1.5fr) minmax(7rem, .7fr) minmax(7rem, .7fr) minmax(8rem, .8fr);
    min-width: 620px;
}

.df-pricing-example-table > div:first-child {
    background: var(--df-paper);
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-pricing-example-table > div + div {
    border-top: 1px solid rgba(221, 211, 196, .86);
}

.df-pricing-example-table span,
.df-pricing-example-table b,
.df-pricing-example-table strong {
    padding: .9rem 1rem;
    white-space: nowrap;
}

.df-pricing-example-table b,
.df-pricing-example-table strong {
    color: var(--df-ink);
    font-weight: 950;
}

.df-pricing-example-table strong {
    color: var(--df-blue-dark);
}

.df-pricing-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.df-pricing-notes div {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    padding: .9rem;
}

.df-pricing-notes b,
.df-pricing-notes span {
    display: block;
}

.df-pricing-notes b {
    font-weight: 950;
}

.df-pricing-notes span {
    margin-top: .3rem;
    color: var(--df-muted);
    font-size: .88rem;
    line-height: 1.45;
}

.df-payment-hero,
.df-payment-checkout,
.df-payment-summary {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--df-shadow);
}

.df-payment-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 92% 20%, rgba(49, 95, 122, .16), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(238,230,216,.62));
}

.df-payment-card-preview {
    min-width: 17rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #182239, #315f7a);
    color: white;
    padding: 1.2rem;
    box-shadow: 0 22px 48px rgba(24, 34, 57, .22);
}

.df-payment-card-preview span,
.df-payment-card-preview small {
    display: block;
    color: rgba(255,255,255,.74);
    font-weight: 800;
}

.df-payment-card-preview b {
    display: block;
    margin-top: 1.4rem;
    font-size: 2.1rem;
    line-height: 1;
}

.df-payment-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.df-payment-trust-strip span {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    padding: .8rem .9rem;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
}

.df-payments-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

.df-payments-grid aside {
    position: sticky;
    top: 96px;
}

.df-payment-plan,
.df-payment-method {
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: white;
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.df-payment-plan {
    min-height: 10rem;
    padding: 1.15rem;
}

.df-payment-plan span,
.df-payment-method span {
    display: block;
    color: var(--df-blue-dark);
    font-size: .8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-payment-plan b {
    display: block;
    margin-top: .8rem;
    color: var(--df-ink);
    font-size: 2.25rem;
    line-height: 1;
}

.df-payment-plan small,
.df-payment-method small {
    display: block;
    margin-top: .65rem;
    color: var(--df-muted);
    font-weight: 750;
    line-height: 1.55;
}

.df-payment-custom {
    display: grid;
    gap: .6rem;
    border: 1px solid rgba(49, 95, 122, .24);
    border-radius: 10px;
    background: rgba(49, 95, 122, .055);
    padding: 1rem;
}

.df-payment-custom > span {
    color: var(--df-blue-dark);
    font-size: .82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-payment-custom div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.df-payment-custom b {
    color: var(--df-muted);
    font-weight: 950;
}

.df-payment-custom small {
    color: var(--df-muted);
    font-weight: 750;
    line-height: 1.55;
}

.df-payment-methods {
    display: grid;
    gap: .8rem;
}

.df-payment-method {
    padding: 1rem 1.15rem;
}

.df-payment-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.df-payment-breakdown div {
    border-top: 1px solid rgba(221, 211, 196, .86);
    padding-top: .9rem;
}

.df-payment-breakdown span {
    display: block;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 800;
}

.df-payment-breakdown b {
    display: block;
    margin-top: .25rem;
    font-size: 1.25rem;
}

.df-payment-terminal {
    border-radius: 12px;
    background:
        linear-gradient(145deg, #111827, #223049);
    color: white;
    padding: 1.15rem;
    box-shadow: 0 18px 40px rgba(17, 24, 39, .18);
}

.df-payment-terminal span,
.df-payment-terminal small {
    display: block;
    color: rgba(255,255,255,.72);
    font-weight: 850;
}

.df-payment-terminal b {
    display: block;
    margin-top: .85rem;
    font-size: 2.35rem;
    line-height: 1;
    white-space: nowrap;
}

.df-payment-terminal small {
    margin-top: .45rem;
}

.df-payment-submit {
    border: 1px solid #101828;
    border-radius: 8px;
    background: #101828;
    color: white;
    padding: .9rem 1rem;
    font-weight: 950;
    box-shadow: 0 16px 30px rgba(16, 24, 40, .18);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.df-payment-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 20px 38px rgba(16, 24, 40, .22);
}

.df-payment-submit:disabled {
    cursor: wait;
    opacity: .62;
}

.df-payment-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.df-payment-trust span {
    border: 1px solid rgba(63, 111, 90, .2);
    border-radius: 999px;
    background: rgba(63, 111, 90, .08);
    color: var(--df-green);
    padding: .35rem .6rem;
    font-size: .72rem;
    font-weight: 950;
}

.df-payment-alert {
    margin-top: 1.25rem;
    border: 1px solid rgba(180, 35, 24, .2);
    border-radius: 8px;
    background: rgba(254, 243, 242, .92);
    color: #b42318;
    padding: .85rem .95rem;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.5;
}

.df-payment-alert-success {
    border-color: rgba(63, 111, 90, .22);
    background: rgba(236, 253, 245, .86);
    color: var(--df-green);
}

@keyframes df-scan {
    0%, 100% { transform: translateY(0); opacity: 0; }
    12%, 85% { opacity: 1; }
    50% { transform: translateY(23rem); }
}

@keyframes df-token-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(49, 95, 122, .12); }
    45% { box-shadow: 0 0 0 6px rgba(49, 95, 122, .08); }
}

@keyframes df-dot {
    0%, 100% { transform: scale(.84); opacity: .7; }
    50% { transform: scale(1); opacity: 1; }
}

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

@keyframes df-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (max-width: 1024px) {
    .df-container {
        padding-inline: 16px;
    }

    .df-header-inner {
        min-height: 72px;
    }

    .df-nav {
        display: none;
    }

    .df-mobile-menu {
        display: block;
    }
}

@media (max-width: 768px) {

    .df-home-hero-grid,
    .df-home-split,
    .df-product-workspace,
    .df-section-heading,
    .df-usecase-grid,
    .df-demo-grid,
    .df-demo-editor,
    .df-api-layout,
    .df-payments-grid {
        grid-template-columns: 1fr;
    }

    .df-home-title {
        max-width: 100%;
        font-size: clamp(2.55rem, 11.2vw, 3.45rem);
    }

    .df-home-metrics {
        gap: 1rem;
    }

    .df-home-metrics div {
        min-width: 8rem;
        border-right: 0;
        padding-right: 0;
    }

    .df-product-stage {
        border-radius: 10px;
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }

    .df-product-topbar,
    .df-product-workspace {
        padding: 1rem;
    }

    .df-product-workspace {
        display: block;
        overflow: hidden;
    }

    .df-document-preview {
        width: calc(100vw - 64px);
        min-width: 0;
        max-width: calc(100vw - 64px);
        overflow: hidden;
        min-height: 20rem;
        padding: 1.35rem;
    }

    .df-doc-header span:first-child {
        width: 58%;
    }

    .df-doc-header span:last-child {
        width: 3.4rem;
    }

    .df-doc-lines .df-var-blue,
    .df-doc-lines .df-var-green {
        width: 58%;
    }

    .df-doc-lines .df-var-green {
        justify-self: start;
        margin-left: 34%;
        width: 50%;
    }

    .df-section-heading {
        align-items: start;
    }

    .df-sector-strip {
        gap: .25rem .8rem;
    }

    .df-sector-strip span {
        min-height: 2.4rem;
        padding-inline: .7rem .9rem;
    }

    .df-demo-editor {
        min-height: 0;
    }

    .df-demo-process {
        border-right: 0;
        border-bottom: 1px solid rgba(221, 211, 196, .82);
        padding: .25rem .25rem 1rem;
    }

    .df-demo-paper-stage {
        padding: 1rem;
    }

    .df-runtime-error {
        grid-template-columns: 1fr;
    }

    .df-runtime-error .reload,
    .df-runtime-error .dismiss {
        width: 100%;
        justify-content: center;
    }

    .df-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-dashboard-actions {
        justify-content: flex-start;
    }

    .df-dashboard-loader,
    .df-payment-hero,
    .df-usage-hero,
    .df-sales-hero,
    .df-email-trace-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-templates-hero,
    .df-pricing-hero,
    .df-pricing-grid,
    .df-pricing-trust,
    .df-pricing-summary,
    .df-pricing-detail-grid,
    .df-pricing-notes,
    .df-sales-grid,
    .df-manual-lead-grid,
    .df-bulk-mail-panel,
    .df-payment-trust-strip {
        grid-template-columns: 1fr;
    }

    .df-email-metrics,
    .df-email-workspace,
    .df-email-meta,
    .df-email-tech,
    .df-admin-credit-settings,
    .df-admin-credit-form,
    .df-leads-filter-grid,
    .df-loose-mail-panel,
    .df-lead-fields {
        grid-template-columns: 1fr;
    }

    .df-email-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--df-line);
    }

    .df-email-detail {
        min-height: 0;
    }

    .df-leads-actionbar,
    .df-lead-card-actions {
        justify-content: flex-start;
    }

    .df-lead-card-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .df-lead-score {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .df-template-flow,
    .df-pricing-balance-card {
        width: 100%;
        min-width: 0;
    }

    .df-pricing-actions {
        justify-content: flex-start;
    }

    .df-sales-hero-actions,
    .df-sales-card-head,
    .df-campaign-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-template-row {
        grid-template-columns: 1fr;
    }

    .df-template-row-meta {
        display: flex;
        justify-content: space-between;
    }

    .df-dashboard-skeleton {
        grid-template-columns: 1fr;
    }

    .df-payment-card-preview {
        width: 100%;
        min-width: 0;
    }

    .df-payment-breakdown {
        grid-template-columns: 1fr;
    }

    .df-payments-grid aside {
        position: static;
    }
}

@media (max-width: 520px) {
    .df-home-hero {
        padding-block: 3.25rem;
    }

    .df-home-title {
        max-width: 8.4ch;
        font-size: clamp(2.3rem, 9.4vw, 2.85rem);
    }

    .df-home-lead {
        max-width: 29ch;
        font-size: .98rem;
    }

    .df-home-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-home-actions .df-button-primary,
    .df-home-actions .df-button-secondary {
        width: auto;
        max-width: 100%;
    }

    .df-home-metrics {
        display: grid;
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .df-home-metrics div {
        padding-bottom: .85rem;
        border-bottom: 1px solid rgba(221, 211, 196, .78);
    }

    .df-home-metrics div:last-child {
        border-bottom: 0;
    }

    .df-product-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-variable-row {
        grid-template-columns: 1fr;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.pdf-template-editor {
    min-height: 760px;
    max-height: calc(100vh - 9rem);
    overflow: auto;
    border: 1px solid var(--df-line);
    border-radius: 14px;
    background: #ede6da;
    padding: 1rem;
}

.pdf-template-viewer {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    min-width: max-content;
}

.pdf-template-page {
    position: relative;
    overflow: hidden;
    background: white;
    border-radius: .35rem;
    box-shadow: 0 18px 44px rgba(29, 37, 53, .18);
}

.pdf-template-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pdf-template-text-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    line-height: 1;
    text-align: initial;
    opacity: 1;
}

.pdf-template-text-layer span,
.pdf-template-text-layer br {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.pdf-template-text-layer ::selection {
    background: rgba(21, 109, 149, .35);
}

.pdf-template-field-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.pdf-template-field-box {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid rgba(8, 145, 178, .85);
    background: rgba(103, 232, 249, .22);
    color: #083344;
    font-size: 11px;
    font-weight: 900;
    padding: 0 .35rem;
    border-radius: .35rem;
    box-shadow: 0 8px 24px rgba(8, 145, 178, .2);
}

.pdf-template-field-tone-1 {
    border-color: rgba(49, 95, 122, .88);
    background: rgba(191, 219, 254, .32);
    color: #17324a;
}

.pdf-template-field-tone-2 {
    border-color: rgba(63, 111, 90, .88);
    background: rgba(187, 247, 208, .28);
    color: #17432e;
}

.pdf-template-field-tone-3 {
    border-color: rgba(161, 98, 7, .82);
    background: rgba(254, 240, 138, .3);
    color: #713f12;
}

.pdf-template-field-tone-4 {
    border-color: rgba(126, 34, 206, .76);
    background: rgba(233, 213, 255, .32);
    color: #581c87;
}

.pdf-template-field-tone-5 {
    border-color: rgba(190, 18, 60, .74);
    background: rgba(255, 228, 230, .34);
    color: #881337;
}

.df-technical-details {
    border: 1px solid rgba(221, 211, 196, .86);
    border-radius: 8px;
    background: rgba(251, 250, 247, .78);
    padding: .85rem;
}

.df-technical-details summary {
    cursor: pointer;
    color: var(--df-muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    list-style: none;
    text-transform: uppercase;
}

.df-technical-details summary::-webkit-details-marker {
    display: none;
}

.pdf-editor-loading,
.pdf-editor-error {
    display: grid;
    min-height: 560px;
    place-items: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    font-weight: 900;
}

.pdf-editor-error {
    color: #991b1b;
}

/* Parchment editorial refresh */
.df-public,
.df-client {
    background:
        linear-gradient(180deg, rgba(253, 249, 244, .78), rgba(249, 239, 228, 0) 20rem),
        var(--df-soft);
}

.df-header {
    border-bottom: 1px solid rgba(217, 221, 230, .72);
    background: rgba(249, 239, 228, .92);
}

.df-brand {
    color: var(--df-graphite);
    font-family: var(--df-font-body);
    font-weight: 800;
}

.df-brand span {
    color: #315f7a;
}

.df-nav {
    gap: 20px;
    color: var(--df-slate, var(--df-muted));
    font-size: .9rem;
    font-weight: 700;
}

.df-nav a:hover {
    color: var(--df-graphite);
}

.df-button-primary,
.df-button-secondary,
.df-button-danger,
.df-payment-submit {
    min-height: 44px;
    border-radius: var(--df-radius-pill);
    padding: .72rem 1.15rem;
    font-weight: 800;
}

.df-button-primary,
.df-payment-submit {
    border-color: var(--df-graphite);
    background: var(--df-graphite);
    color: var(--df-surface);
    box-shadow: var(--df-shadow);
}

.df-button-primary:hover,
.df-payment-submit:hover:not(:disabled) {
    background: #17191d;
    box-shadow: var(--df-shadow-lg);
    transform: translateY(-1px);
}

.df-button-secondary {
    border-color: rgba(45, 47, 52, .38);
    background: rgba(253, 253, 253, .58);
    color: var(--df-graphite);
}

.df-button-secondary:hover {
    border-color: var(--df-graphite);
    background: var(--df-surface);
    box-shadow: var(--df-shadow);
}

.df-button-danger {
    border-color: rgba(159, 58, 56, .24);
    background: #fff7f5;
}

.df-mobile-menu summary {
    border-color: var(--df-graphite);
    border-radius: var(--df-radius-pill);
    background: var(--df-graphite);
    box-shadow: var(--df-shadow);
}

.df-mobile-menu nav {
    border-color: var(--df-line);
    border-radius: var(--df-radius-soft);
    background: rgba(253, 253, 253, .98);
    box-shadow: var(--df-shadow-lg);
}

.df-mobile-menu nav a {
    border-radius: var(--df-radius);
    font-weight: 800;
}

.df-kicker,
.df-badge,
.df-campaign-card-head em,
.df-leads-campaign-stats span,
.df-leads-campaign-stats b,
.df-email-status,
.df-payment-trust span {
    border-radius: var(--df-radius-pill);
    border-color: rgba(217, 221, 230, .92);
    background: var(--df-paper);
    color: var(--df-ink);
    font-weight: 800;
}

.df-kicker {
    background: var(--df-buttercup);
    color: var(--df-gold);
}

.df-title,
.df-home-title,
.df-pricing-hero h1,
.df-pricing-summary h1 {
    font-family: var(--df-font-display);
    color: var(--df-ink);
    letter-spacing: 0;
}

.df-lead {
    color: var(--df-muted);
    font-weight: 500;
}

.df-card,
.df-panel,
.df-stat,
.df-link-card,
.df-choice,
.df-table-wrap,
.df-dashboard-hero,
.df-dashboard-loader,
.df-sales-hero,
.df-sales-card,
.df-sales-status,
.df-campaign-inline,
.df-campaign-card,
.df-admin-credit-settings,
.df-leads-board,
.df-lead-card,
.df-email-trace-hero,
.df-email-workspace,
.df-templates-hero,
.df-template-create,
.df-template-library,
.df-usage-hero,
.df-usage-balance,
.df-pricing-meter,
.df-pricing-examples,
.df-pricing-rate-card,
.df-pricing-topup-card,
.df-pricing-ledger,
.df-payment-hero,
.df-payment-checkout,
.df-payment-summary {
    border-color: rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .88);
    box-shadow: var(--df-shadow);
}

.df-panel,
.df-dashboard-insights > div,
.df-dashboard-status-grid span,
.df-campaign-inline,
.df-bulk-mail-panel,
.df-loose-mail-panel,
.df-email-sidebar,
.df-email-meta div,
.df-email-tech div,
.df-empty-state,
.df-usage-costs div,
.df-payment-custom,
.df-technical-details {
    background: var(--df-paper);
}

.df-input,
.df-campaign-recipients textarea,
.df-email-body pre {
    border-color: rgba(217, 221, 230, .96);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .92);
    color: var(--df-ink);
    font-weight: 650;
}

.df-input:focus,
.df-campaign-recipients textarea:focus {
    border-color: var(--df-blue);
    outline: 3px solid rgba(46, 119, 229, .14);
}

.df-code,
.df-payment-terminal {
    border-radius: var(--df-radius);
    background: var(--df-graphite);
    color: #fdfdfd;
    font-family: var(--df-font-mono);
}

.df-table-wrap,
.df-sales-table,
.df-usage-table-wrap {
    border-radius: var(--df-radius);
}

.df-table {
    color: var(--df-ink);
}

.df-table th {
    background: var(--df-paper);
    color: var(--df-muted);
    font-weight: 800;
}

.df-table th,
.df-table td {
    border-color: rgba(217, 221, 230, .88);
}

.df-home-hero,
.df-templates-hero,
.df-usage-hero,
.df-sales-hero,
.df-payment-hero {
    background:
        linear-gradient(135deg, rgba(253, 253, 253, .88), rgba(253, 249, 244, .64)),
        var(--df-paper);
}

.df-product-stage,
.df-demo-workbench,
.df-demo-output,
.df-payment-card-preview,
.df-pricing-balance-card {
    border-radius: var(--df-radius);
    box-shadow: var(--df-shadow-lg);
}

.df-demo-workbench,
.df-demo-output {
    background: rgba(253, 253, 253, .9);
}

.df-demo-stepbar span {
    border-color: rgba(217, 221, 230, .92);
    background: var(--df-surface);
    font-weight: 750;
}

.df-demo-stepbar .df-demo-stepbar-active {
    border-color: rgba(84, 115, 88, .38);
    background: rgba(84, 115, 88, .10);
    color: var(--df-green);
}

.df-demo-paper-stage,
.pdf-template-editor {
    background:
        linear-gradient(135deg, rgba(240, 228, 214, .92), rgba(253, 249, 244, .86)),
        var(--df-linen);
}

.df-api-layout {
    gap: 2.5rem;
}

.df-api-sidebar {
    top: 96px;
    border-right: 0;
    padding-right: 0;
}

.df-api-sidebar nav {
    display: grid;
    gap: .25rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .86);
    box-shadow: var(--df-shadow);
}

.df-api-sidebar a,
.df-api-sidebar nav a {
    border-radius: var(--df-radius-pill);
    color: var(--df-muted);
    font-weight: 800;
}

.df-api-sidebar a:hover,
.df-api-sidebar nav a:hover {
    background: var(--df-paper);
    color: var(--df-graphite);
}

.df-dashboard-metrics .df-stat {
    border: 1px solid rgba(217, 221, 230, .9);
    background: var(--df-surface);
}

.df-dashboard-metrics .df-stat::before {
    width: 0;
}

.df-dashboard-status-grid span,
.df-pricing-trust div,
.df-pricing-notes div,
.df-payment-trust-strip span {
    border-radius: var(--df-radius);
    background: rgba(253, 249, 244, .74);
}

.df-sales-hero h2,
.df-sales-card-head h2,
.df-campaign-inline-head h3,
.df-admin-credit-settings h2,
.df-email-trace-hero h2,
.df-email-detail-head h2,
.df-templates-hero h2,
.df-template-create-header h2,
.df-template-library-head h2,
.df-usage-hero h2,
.df-pricing-ledger-head h2 {
    color: var(--df-ink);
    font-weight: 850;
}

.df-admin-toast,
.df-runtime-error {
    border-radius: var(--df-radius-soft);
    background: rgba(253, 253, 253, .98);
    box-shadow: var(--df-shadow-lg);
}

.df-admin-toast button,
.df-runtime-error .dismiss {
    border-radius: var(--df-radius-pill);
    background: var(--df-paper);
}

.df-leads-board {
    overflow: hidden;
    background: rgba(253, 253, 253, .78);
}

.df-leads-board-head {
    background: var(--df-paper);
}

.df-lead-card {
    border-radius: var(--df-radius);
    background:
        linear-gradient(180deg, rgba(253, 253, 253, .98), rgba(253, 249, 244, .58)),
        var(--df-surface);
}

.df-lead-card-selected {
    border-color: rgba(46, 119, 229, .36);
    box-shadow: 0 0 0 3px rgba(46, 119, 229, .08), var(--df-shadow);
}

.df-lead-check span {
    border-color: rgba(45, 47, 52, .34);
    border-radius: 6px;
}

.df-lead-check input:checked + span {
    border-color: var(--df-graphite);
    background: var(--df-graphite);
}

.df-lead-score {
    border-radius: var(--df-radius);
    background: var(--df-paper);
}

.df-lead-fields {
    grid-template-columns: minmax(11rem, 1.25fr) minmax(10rem, 1fr) minmax(11rem, 1.1fr) minmax(9rem, .8fr) minmax(7rem, .6fr);
}

.df-lead-title-input,
.df-lead-muted-input {
    color: var(--df-ink);
}

.df-template-flow span,
.df-template-row,
.df-upload-zone,
.df-usage-costs div,
.df-payment-plan,
.df-payment-method,
.df-payment-custom,
.df-pricing-example-table,
.df-pricing-notes div {
    border-radius: var(--df-radius);
}

.df-template-flow b {
    background: var(--df-graphite);
}

.df-upload-zone {
    border-color: rgba(45, 47, 52, .24);
    background:
        linear-gradient(135deg, rgba(250, 233, 244, .46), rgba(253, 249, 244, .92)),
        var(--df-paper);
}

.df-usage-balance {
    background:
        linear-gradient(145deg, rgba(253, 253, 253, .96), rgba(253, 249, 244, .76)),
        var(--df-surface);
}

.df-usage-label {
    color: var(--df-gold);
}

.df-credit-amount {
    color: var(--df-graphite);
    font-size: clamp(2.65rem, 4vw, 3.85rem);
    letter-spacing: 0;
}

.df-usage-table {
    min-width: 860px;
}

.df-usage-table th:first-child,
.df-usage-table td:first-child,
.df-usage-table th:nth-child(3),
.df-usage-table td:nth-child(3),
.df-usage-table th:nth-child(4),
.df-usage-table td:nth-child(4) {
    white-space: nowrap;
}

.df-pricing-summary {
    border-bottom-color: rgba(217, 221, 230, .9);
}

.df-pricing-rate-card,
.df-pricing-topup-card,
.df-pricing-ledger {
    border-radius: var(--df-radius);
}

.df-pricing-rate-primary,
.df-pricing-topup-card {
    background:
        linear-gradient(145deg, rgba(253, 253, 253, .98), rgba(253, 249, 244, .72)),
        var(--df-surface);
    color: var(--df-ink);
}

.df-pricing-topup-card span,
.df-pricing-topup-card p,
.df-pricing-topup-card small {
    color: var(--df-muted);
}

.df-pricing-topup-card b {
    color: var(--df-ink);
}

.df-pricing-topup-card small {
    border-color: rgba(217, 221, 230, .9);
    background: var(--df-paper);
}

.df-payment-card-preview,
.df-pricing-balance-card {
    background:
        linear-gradient(145deg, #2d2f34, #3f434a);
}

.df-payment-plan,
.df-payment-method {
    border-color: rgba(217, 221, 230, .95);
    background: var(--df-surface);
}

.df-payment-plan:hover,
.df-payment-method:hover {
    border-color: rgba(45, 47, 52, .38);
    box-shadow: var(--df-shadow);
}

.df-payment-plan span,
.df-payment-method span,
.df-payment-custom > span {
    color: var(--df-gold);
}

.df-payment-custom {
    border-color: rgba(127, 108, 31, .24);
    background: var(--df-buttercup);
}

.df-payment-trust span {
    background: rgba(84, 115, 88, .10);
    color: var(--df-green);
}

#blazor-error-ui {
    max-width: 680px;
}

.blazor-error-boundary {
    border: 1px solid rgba(159, 58, 56, .24);
    border-radius: var(--df-radius);
    background: #fff7f5;
    color: var(--df-red);
    box-shadow: var(--df-shadow);
}

.pdf-template-editor {
    border-radius: var(--df-radius);
}

.pdf-template-field-box {
    border-radius: 6px;
    box-shadow: var(--df-shadow);
}

@media (max-width: 768px) {
    .df-api-sidebar {
        position: static;
        max-height: none;
    }

    .df-api-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-lead-fields {
        grid-template-columns: 1fr;
    }

    .df-credit-amount {
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .df-button-primary,
    .df-button-secondary,
    .df-button-danger,
    .df-payment-submit {
        width: 100%;
    }

    .df-mobile-menu nav {
        right: 12px;
        left: 12px;
    }

    .df-api-sidebar nav {
        grid-template-columns: 1fr;
    }
}

/* Compact SaaS workspace system */
.df-app-main {
    padding-block: 1.25rem 2.5rem;
}

.df-app-titlebar {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-height: 2.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(217, 221, 230, .72);
    padding-bottom: .85rem;
}

.df-app-titlebar span {
    color: var(--df-muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-app-titlebar h1 {
    color: var(--df-ink);
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 850;
    line-height: 1.1;
}

.df-app-content {
    display: grid;
    gap: 1rem;
}

.df-crm-page {
    display: grid;
    gap: 1rem;
}

.df-crm-header,
.df-crm-dock,
.df-crm-workspace,
.df-crm-fold {
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .88);
    box-shadow: var(--df-shadow);
}

.df-crm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
}

.df-crm-header h2 {
    margin-top: .45rem;
    color: var(--df-ink);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 850;
    line-height: 1.08;
}

.df-crm-header p:not(.df-kicker) {
    margin-top: .35rem;
    max-width: 48rem;
    color: var(--df-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.df-crm-header-actions,
.df-crm-dock-head,
.df-crm-section-title,
.df-crm-detail-actions,
.df-crm-selection-actions,
.df-crm-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

.df-crm-header-actions {
    justify-content: flex-end;
}

.df-crm-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.df-crm-metrics article {
    min-width: 0;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: var(--df-radius);
    background: rgba(253, 249, 244, .74);
    padding: .85rem .95rem;
}

.df-crm-metrics span,
.df-crm-metrics small,
.df-crm-toolbar label > span,
.df-crm-selection-bar label > span,
.df-crm-detail-section h4,
.df-crm-activity span {
    display: block;
    color: var(--df-muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-crm-metrics b {
    display: block;
    margin-top: .28rem;
    color: var(--df-graphite);
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1;
}

.df-crm-metrics small {
    margin-top: .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.df-crm-tasks {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: var(--df-radius);
    background: rgba(253, 249, 244, .74);
}

.df-crm-tasks-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.df-crm-task-card {
    display: grid;
    gap: .65rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: calc(var(--df-radius) - 4px);
    background: #fff;
}

.df-crm-task-on { border-color: rgba(40, 140, 90, .35); }
.df-crm-task-off { opacity: .85; }

.df-crm-task-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    color: var(--df-ink);
}

.df-crm-task-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem .9rem;
    margin: 0;
}

.df-crm-task-meta > div {
    min-width: 0;
}

.df-crm-task-meta dt {
    color: var(--df-muted);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.df-crm-task-meta dd {
    margin: .1rem 0 0;
    color: var(--df-graphite);
    font-weight: 700;
}

.df-crm-task-summary {
    margin: 0;
    color: var(--df-muted);
    font-size: .85rem;
}

.df-field-checkbox .df-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .6rem;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: calc(var(--df-radius) - 6px);
    background: #fff;
    cursor: pointer;
}

.df-field-checkbox .df-toggle input[type=checkbox] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
}

@media (max-width: 960px) {
    .df-crm-task-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.df-crm-dock {
    display: grid;
    gap: .95rem;
    padding: 1rem;
}

.df-crm-dock-head {
    justify-content: space-between;
    gap: 1rem;
}

.df-crm-dock h3,
.df-crm-fold h3 {
    margin-top: .35rem;
    color: var(--df-ink);
    font-size: 1.1rem;
    font-weight: 850;
}

.df-crm-form-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr 1.4fr 8rem;
    gap: .75rem;
    align-items: end;
}

.df-crm-form-grid-manual {
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
}

.df-crm-help {
    color: var(--df-muted);
    font-size: .82rem;
}

.df-crm-workspace {
    overflow: hidden;
}

.df-crm-toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1.4fr) minmax(9rem, .65fr) minmax(10rem, .75fr) minmax(10rem, .8fr) auto;
    gap: .7rem;
    align-items: end;
    border-bottom: 1px solid rgba(217, 221, 230, .9);
    background: rgba(253, 249, 244, .72);
    padding: .9rem;
}

.df-crm-toolbar label,
.df-crm-selection-bar label,
.df-crm-detail-grid label {
    display: grid;
    gap: .28rem;
    min-width: 0;
    color: var(--df-ink);
    font-size: .86rem;
    font-weight: 750;
}

.df-crm-search {
    min-width: 0;
}

.df-crm-selection-bar {
    display: grid;
    grid-template-columns: minmax(10rem, .8fr) minmax(18rem, 1.3fr) auto;
    gap: .75rem;
    align-items: end;
    border-bottom: 1px solid rgba(217, 221, 230, .9);
    background: rgba(251, 244, 216, .42);
    padding: .85rem .9rem;
}

.df-crm-selection-bar strong,
.df-crm-selection-bar span {
    display: block;
}

.df-crm-selection-bar strong {
    color: var(--df-graphite);
    font-size: .98rem;
    font-weight: 850;
}

.df-crm-selection-bar span {
    margin-top: .2rem;
    color: var(--df-muted);
    font-size: .8rem;
}

.df-crm-selection-message {
    grid-column: 1 / -1;
}

.df-crm-selection-message textarea {
    min-height: 5.25rem;
}

.df-crm-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
    min-height: 650px;
}

.df-crm-main-no-detail {
    grid-template-columns: 1fr;
}

.df-crm-main-no-detail .df-crm-table-card {
    border-right: 0;
}

.df-crm-table-card {
    min-width: 0;
    border-right: 1px solid rgba(217, 221, 230, .9);
    background: rgba(253, 253, 253, .92);
}

.df-crm-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 3rem;
    border-bottom: 1px solid rgba(217, 221, 230, .88);
    padding: .55rem .8rem;
    color: var(--df-muted);
    font-size: .8rem;
    font-weight: 850;
}

.df-crm-table-scroll {
    max-height: calc(100vh - 315px);
    min-height: 520px;
    overflow: auto;
}

.df-crm-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--df-ink);
    font-size: .84rem;
}

.df-crm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(217, 221, 230, .95);
    background: var(--df-paper);
    color: var(--df-muted);
    padding: .68rem .7rem;
    font-size: .7rem;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.df-crm-table tbody td {
    border-bottom: 1px solid rgba(217, 221, 230, .7);
    padding: .55rem .7rem;
    vertical-align: middle;
}

.df-crm-table tbody tr {
    background: rgba(253, 253, 253, .96);
}

.df-crm-table tbody tr:hover {
    background: rgba(253, 249, 244, .82);
}

.df-crm-row-active {
    background: rgba(46, 119, 229, .06) !important;
}

.df-crm-row-selected {
    box-shadow: inset 3px 0 0 var(--df-graphite);
}

.df-crm-company {
    display: grid;
    gap: .18rem;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--df-ink);
    padding: 0;
    text-align: left;
}

.df-crm-company strong,
.df-crm-contact strong {
    overflow: hidden;
    color: var(--df-graphite);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-crm-company span,
.df-crm-contact span {
    display: block;
    overflow: hidden;
    color: var(--df-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-crm-contact {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.df-score-pill,
.df-status-pill,
.df-owner-pill,
.df-status-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.75rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-pill);
    background: var(--df-paper);
    color: var(--df-ink);
    padding: .28rem .58rem;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.df-score-hot {
    border-color: rgba(84, 115, 88, .24);
    background: rgba(84, 115, 88, .10);
    color: var(--df-green);
}

.df-score-warm {
    border-color: rgba(127, 108, 31, .24);
    background: var(--df-buttercup);
    color: var(--df-gold);
}

.df-score-cold {
    border-color: rgba(157, 77, 119, .18);
    background: var(--df-blossom);
    color: var(--df-mauve);
}

.df-status-select {
    min-width: 8.4rem;
    appearance: none;
    cursor: pointer;
}

.df-status-new,
.df-status-researched,
.df-status-messagegenerated {
    background: var(--df-buttercup);
    color: var(--df-gold);
}

.df-status-contacted,
.df-status-replied,
.df-status-callscheduled,
.df-status-proposalsent,
.df-status-won {
    background: rgba(84, 115, 88, .10);
    color: var(--df-green);
}

.df-status-lost,
.df-status-donotcontact {
    background: #fff7f5;
    color: var(--df-red);
}

.df-owner-pill {
    background: var(--df-surface);
    color: var(--df-muted);
}

.df-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 2rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-pill);
    background: var(--df-surface);
    color: var(--df-ink);
    padding: .25rem .55rem;
    font-size: .75rem;
    font-weight: 850;
}

.df-icon-button-primary {
    border-color: var(--df-graphite);
    background: var(--df-graphite);
    color: var(--df-surface);
}

.df-crm-detail-panel {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 105px);
    overflow: auto;
    background: linear-gradient(180deg, rgba(253, 249, 244, .72), rgba(253, 253, 253, .95));
    padding: 1rem;
}

.df-crm-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
    border-bottom: 1px solid rgba(217, 221, 230, .86);
    padding-bottom: .9rem;
}

.df-crm-detail-tools {
    display: grid;
    justify-items: end;
    gap: .45rem;
}

.df-crm-avatar {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: var(--df-radius);
    background: var(--df-graphite);
    color: var(--df-surface);
    font-weight: 850;
}

.df-crm-detail-head h3 {
    overflow: hidden;
    margin-top: .45rem;
    color: var(--df-graphite);
    font-size: 1.15rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-crm-detail-head p {
    overflow: hidden;
    margin-top: .16rem;
    color: var(--df-muted);
    font-size: .83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-crm-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .9rem;
}

.df-crm-detail-actions .df-button-primary,
.df-crm-detail-actions .df-button-secondary,
.df-crm-selection-actions .df-button-primary,
.df-crm-selection-actions .df-button-secondary {
    white-space: nowrap;
}

.df-crm-detail-section {
    display: grid;
    gap: .65rem;
    border-top: 1px solid rgba(217, 221, 230, .86);
    margin-top: .95rem;
    padding-top: .95rem;
}

.df-crm-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.df-crm-section-title {
    justify-content: space-between;
}

.df-crm-section-title h4,
.df-crm-detail-section h4 {
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-crm-draft {
    min-height: 12rem;
    line-height: 1.55;
}

.df-crm-activity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .75rem;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .72);
    padding: .75rem;
}

.df-crm-activity b {
    color: var(--df-ink);
    font-size: .85rem;
    font-weight: 750;
}

.df-crm-empty {
    display: grid;
    gap: .45rem;
    align-content: center;
    justify-items: start;
    min-height: 18rem;
    padding: 1.25rem;
    color: var(--df-muted);
}

.df-crm-empty b {
    color: var(--df-graphite);
    font-size: 1rem;
}

.df-crm-empty p {
    max-width: 28rem;
    line-height: 1.55;
}

.df-crm-empty-detail {
    min-height: 520px;
}

.df-crm-fold {
    padding: .85rem 1rem;
}

.df-crm-fold summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.df-crm-fold summary::-webkit-details-marker {
    display: none;
}

.df-crm-fold summary span {
    color: var(--df-graphite);
    font-weight: 850;
}

.df-crm-fold summary small {
    color: var(--df-muted);
}

.df-crm-fold-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-top: 1px solid rgba(217, 221, 230, .86);
    margin-top: .85rem;
    padding-top: 1rem;
}

.df-crm-fold-grid section {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.df-crm-fold-grid h3 {
    color: var(--df-graphite);
}

@media (max-width: 1120px) {
    .df-crm-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .df-crm-toolbar,
    .df-crm-form-grid,
    .df-crm-form-grid-manual,
    .df-crm-selection-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-crm-main {
        grid-template-columns: 1fr;
    }

    .df-crm-table-card {
        border-right: 0;
        border-bottom: 1px solid rgba(217, 221, 230, .9);
    }

    .df-crm-detail-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 720px) {
    .df-app-main {
        padding-block: 1rem 2rem;
    }

    .df-app-titlebar,
    .df-crm-header,
    .df-crm-dock-head,
    .df-crm-fold summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .df-crm-header-actions,
    .df-crm-header-actions .df-button-primary,
    .df-crm-header-actions .df-button-secondary {
        width: 100%;
    }

    .df-crm-metrics,
    .df-crm-toolbar,
    .df-crm-form-grid,
    .df-crm-form-grid-manual,
    .df-crm-selection-bar,
    .df-crm-detail-grid,
    .df-crm-fold-grid,
    .df-crm-detail-actions {
        grid-template-columns: 1fr;
    }

    .df-crm-table-scroll {
        max-height: none;
    }
}

/* Premium public home */
.df-home-premium {
    background: var(--df-soft);
}

.df-noscript,
.df-reconnect-modal {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1400;
    max-width: 28rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-soft);
    background: rgba(253, 253, 253, .98);
    color: var(--df-ink);
    padding: 1rem;
    box-shadow: var(--df-shadow-lg);
}

.df-noscript {
    left: 1rem;
    margin-inline: auto;
}

.df-reconnect-modal {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
}

.df-reconnect-modal.components-reconnect-show,
.df-reconnect-modal.components-reconnect-failed,
.df-reconnect-modal.components-reconnect-rejected {
    display: grid;
}

.df-reconnect-modal strong,
.df-reconnect-modal span {
    display: block;
}

.df-reconnect-modal strong {
    color: var(--df-graphite);
    font-weight: 850;
}

.df-reconnect-modal span {
    margin-top: .2rem;
    color: var(--df-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.df-reconnect-modal button {
    border: 1px solid var(--df-graphite);
    border-radius: var(--df-radius-pill);
    background: var(--df-graphite);
    color: var(--df-surface);
    padding: .62rem .9rem;
    font-weight: 850;
}

.df-home-hero-premium {
    padding-block: 3rem 3.5rem;
}

.df-home-premium-copy {
    display: grid;
    justify-items: center;
    width: 100%;
    min-width: 0;
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}

.df-home-eyebrow-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.df-home-eyebrow-row > span {
    max-width: 100%;
    border: 1px solid rgba(217, 221, 230, .92);
    border-radius: var(--df-radius-pill);
    background: rgba(253, 253, 253, .72);
    color: var(--df-muted);
    padding: .42rem .72rem;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
}

.df-home-brand-title {
    margin-top: 1.35rem;
    color: var(--df-graphite);
    font-size: 5.6rem;
    line-height: .95;
}

.df-home-statement {
    max-width: 16.5em;
    margin-top: 1rem;
    color: var(--df-ink);
    font-family: var(--df-font-display);
    font-size: 2.55rem;
    font-weight: 750;
    line-height: 1.08;
}

.df-home-lead-premium {
    max-width: 760px;
    margin-top: 1.15rem;
    font-size: 1.05rem;
}

.df-home-actions-premium {
    justify-content: center;
    margin-top: 1.6rem;
}

.df-home-proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    max-width: 980px;
    margin: 1.6rem auto 0;
}

.df-home-proof-row div {
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .72);
    padding: .85rem 1rem;
    box-shadow: var(--df-shadow);
}

.df-home-proof-row span,
.df-home-pricing-mini span {
    display: block;
    color: var(--df-muted);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-home-proof-row b,
.df-home-pricing-mini b {
    display: block;
    margin-top: .25rem;
    color: var(--df-graphite);
    font-size: 1.05rem;
    font-weight: 850;
}

.df-hero-product-shell {
    overflow: hidden;
    max-width: 1120px;
    margin: 2rem auto 0;
    border: 1px solid rgba(217, 221, 230, .96);
    border-radius: 18px;
    background: rgba(253, 253, 253, .92);
    box-shadow: rgba(0, 0, 0, .04) 0 32px 80px, rgba(0, 0, 0, .06) 0 12px 32px;
}

.df-hero-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(217, 221, 230, .9);
    background: rgba(253, 249, 244, .86);
    padding: .95rem 1.15rem;
}

.df-hero-product-top strong,
.df-hero-product-top span {
    display: block;
}

.df-hero-product-top strong {
    color: var(--df-graphite);
    font-size: .98rem;
    font-weight: 850;
}

.df-hero-product-top span {
    margin-top: .16rem;
    color: var(--df-muted);
    font-size: .8rem;
    font-weight: 750;
}

.df-hero-product-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.df-hero-product-status span {
    border: 1px solid rgba(217, 221, 230, .92);
    border-radius: var(--df-radius-pill);
    background: var(--df-surface);
    padding: .38rem .65rem;
    color: var(--df-ink);
    font-size: .75rem;
    font-weight: 850;
}

.df-hero-product-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    min-height: 520px;
}

.df-hero-sidebar,
.df-hero-inspector {
    display: grid;
    align-content: start;
    gap: .75rem;
    background: rgba(253, 249, 244, .74);
    padding: 1rem;
}

.df-hero-sidebar {
    border-right: 1px solid rgba(217, 221, 230, .9);
}

.df-hero-inspector {
    border-left: 1px solid rgba(217, 221, 230, .9);
}

.df-hero-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .66);
    padding: .75rem;
}

.df-hero-step b {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: var(--df-radius-pill);
    background: var(--df-paper);
    color: var(--df-muted);
    font-size: .72rem;
}

.df-hero-step span {
    overflow: hidden;
    color: var(--df-ink);
    font-size: .86rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-hero-step-active {
    border-color: rgba(45, 47, 52, .34);
    background: var(--df-surface);
    box-shadow: var(--df-shadow);
}

.df-hero-step-active b {
    background: var(--df-graphite);
    color: var(--df-surface);
}

.df-hero-document {
    display: grid;
    align-items: center;
    justify-items: center;
    background: linear-gradient(180deg, rgba(240, 228, 214, .45), rgba(253, 253, 253, .35));
    padding: 1.25rem;
}

.df-hero-doc-paper {
    width: min(100%, 500px);
    min-height: 450px;
    border: 1px solid rgba(217, 221, 230, .82);
    border-radius: var(--df-radius);
    background: #fff;
    padding: 1.6rem;
    box-shadow: rgba(0, 0, 0, .05) 0 18px 46px;
}

.df-hero-doc-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    border-bottom: 1px solid rgba(217, 221, 230, .9);
    padding-bottom: .85rem;
}

.df-hero-doc-title > span {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--df-blossom);
}

.df-hero-doc-title b {
    color: var(--df-graphite);
    font-size: 1.15rem;
}

.df-hero-doc-title small {
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-pill);
    padding: .28rem .52rem;
    color: var(--df-muted);
    font-weight: 800;
}

.df-hero-doc-paper p {
    margin-top: 1.1rem;
    color: var(--df-ink);
    font-size: .96rem;
    line-height: 1.65;
}

.df-hero-doc-paper mark {
    border-radius: 6px;
    background: rgba(251, 244, 216, .98);
    color: var(--df-gold);
    padding: .08rem .22rem;
    font-weight: 800;
}

.df-hero-doc-paper .df-mark-blue {
    background: rgba(46, 119, 229, .10);
    color: var(--df-blue-dark);
}

.df-hero-doc-paper .df-mark-green {
    background: rgba(84, 115, 88, .12);
    color: var(--df-green);
}

.df-hero-doc-line,
.df-hero-doc-lines span {
    display: block;
    height: 1px;
    border-radius: 999px;
    background: rgba(217, 221, 230, .95);
}

.df-hero-doc-line {
    width: 70%;
    margin-top: 1rem;
}

.df-hero-doc-lines {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
}

.df-hero-doc-lines span:nth-child(1) {
    width: 82%;
}

.df-hero-doc-lines span:nth-child(2) {
    width: 66%;
}

.df-hero-doc-lines span:nth-child(3) {
    width: 74%;
}

.df-hero-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
    color: var(--df-muted);
    font-size: .76rem;
}

.df-hero-signatures span {
    border-top: 1px solid rgba(217, 221, 230, .95);
    padding-top: .55rem;
}

.df-hero-panel-section {
    display: grid;
    gap: .65rem;
}

.df-hero-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.df-hero-panel-head b {
    color: var(--df-muted);
    font-size: .8rem;
}

.df-hero-variable {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .5rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: var(--df-surface);
    padding: .72rem;
}

.df-hero-variable strong {
    overflow: hidden;
    color: var(--df-graphite);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-hero-variable span {
    overflow: hidden;
    color: var(--df-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-hero-variable em {
    grid-row: span 2;
    align-self: center;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-pill);
    color: var(--df-muted);
    padding: .28rem .5rem;
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
}

.df-hero-code {
    max-height: 8.5rem;
    margin: 0;
    font-size: .75rem;
}

.df-home-premium-section {
    padding-block: 4rem;
}

.df-home-section-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 2rem;
    align-items: start;
}

.df-home-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.df-home-capability-grid article,
.df-home-workflow article {
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .86);
    padding: 1rem;
    box-shadow: var(--df-shadow);
}

.df-home-capability-grid article span,
.df-home-workflow article span {
    display: inline-flex;
    border-radius: var(--df-radius-pill);
    background: var(--df-buttercup);
    color: var(--df-gold);
    padding: .28rem .52rem;
    font-size: .72rem;
    font-weight: 850;
}

.df-home-capability-grid h3,
.df-home-workflow h3 {
    margin-top: .8rem;
    color: var(--df-graphite);
    font-size: 1.03rem;
    font-weight: 850;
}

.df-home-capability-grid p,
.df-home-workflow p {
    margin-top: .35rem;
    color: var(--df-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.df-home-workflow-section {
    background: rgba(253, 249, 244, .76);
}

.df-home-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1.25rem;
}

.df-home-industries {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 2rem;
    align-items: start;
}

.df-home-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.df-home-tag-cloud span,
.df-home-tag-cloud a {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius-pill);
    background: rgba(253, 253, 253, .8);
    color: var(--df-ink);
    padding: .55rem .8rem;
    font-weight: 800;
    text-decoration: none;
}

.df-home-tag-cloud a {
    background: var(--df-paper);
}

.df-home-final-cta {
    padding-block: 3.5rem 4.5rem;
}

.df-home-final-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    align-items: center;
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: 18px;
    background: rgba(253, 253, 253, .88);
    padding: 1.5rem;
    box-shadow: var(--df-shadow);
}

.df-home-pricing-mini {
    display: grid;
    gap: .75rem;
}

.df-home-pricing-mini div {
    border: 1px solid rgba(217, 221, 230, .9);
    border-radius: var(--df-radius);
    background: var(--df-paper);
    padding: .9rem 1rem;
}

@media (max-width: 980px) {
    .df-home-brand-title {
        font-size: 4.4rem;
    }

    .df-home-statement {
        font-size: 2.1rem;
    }

    .df-home-proof-row,
    .df-home-section-grid,
    .df-home-industries,
    .df-home-final-inner {
        grid-template-columns: 1fr;
    }

    .df-hero-product-grid {
        grid-template-columns: 1fr;
    }

    .df-hero-sidebar,
    .df-hero-inspector {
        border: 0;
        border-top: 1px solid rgba(217, 221, 230, .9);
    }

    .df-home-capability-grid,
    .df-home-workflow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .df-home-hero-premium {
        padding-block: 2.25rem 2.5rem;
    }

    .df-home-brand-title {
        font-size: 3.3rem;
    }

    .df-home-statement {
        font-size: 1.65rem;
    }

    .df-home-proof-row {
        grid-template-columns: 1fr 1fr;
    }

    .df-hero-product-top,
    .df-hero-product-status {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
    }

    .df-hero-doc-paper {
        min-height: 390px;
        padding: 1rem;
    }
}

/* First-load wow: staged entrance and scroll reveal */
@keyframes dfHeaderDrop {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dfHeroReveal {
    from {
        opacity: 0;
        filter: blur(14px);
        transform: translateY(26px) scale(.985);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes dfTitleReveal {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 18px);
        filter: blur(10px);
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        clip-path: inset(-8% -4% -8% -4% round 18px);
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes dfProductIntro {
    from {
        opacity: 0;
        filter: blur(18px);
        transform: translateY(52px) scale(.94) perspective(1200px) rotateX(7deg);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1) perspective(1200px) rotateX(0deg);
    }
}

@keyframes dfLightSweep {
    0% {
        transform: translateX(-120%) skewX(-16deg);
        opacity: 0;
    }
    18%, 58% {
        opacity: .75;
    }
    100% {
        transform: translateX(160%) skewX(-16deg);
        opacity: 0;
    }
}

@keyframes dfAuroraPulse {
    0%, 100% {
        opacity: .42;
        transform: translate3d(-2%, 0, 0) scale(1);
    }
    50% {
        opacity: .72;
        transform: translate3d(2%, -2%, 0) scale(1.04);
    }
}

@keyframes dfRevealUp {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.df-anim-enabled .df-public .df-header,
.df-anim-enabled .df-home-hero-studio .df-home-eyebrow-row,
.df-anim-enabled .df-home-hero-studio .df-home-brand-title,
.df-anim-enabled .df-home-hero-studio .df-home-lead-premium,
.df-anim-enabled .df-home-hero-studio .df-home-diff-strip,
.df-anim-enabled .df-home-hero-studio .df-home-actions-premium,
.df-anim-enabled .df-home-hero-studio .df-hero-product-live,
.df-anim-enabled .df-home-hero-studio .df-home-proof-row {
    opacity: 0;
}

.df-anim-enabled.df-page-ready .df-public .df-header {
    animation: dfHeaderDrop .7s cubic-bezier(.16, 1, .3, 1) both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-eyebrow-row {
    animation: dfHeroReveal .7s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-brand-title {
    animation: dfTitleReveal .95s cubic-bezier(.16, 1, .3, 1) .18s both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-lead-premium {
    animation: dfHeroReveal .78s cubic-bezier(.16, 1, .3, 1) .36s both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-diff-strip {
    animation: dfHeroReveal .78s cubic-bezier(.16, 1, .3, 1) .48s both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-actions-premium {
    animation: dfHeroReveal .78s cubic-bezier(.16, 1, .3, 1) .60s both;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-hero-product-live {
    animation:
        dfProductIntro 1s cubic-bezier(.16, 1, .3, 1) .72s both,
        dfPanelRise 7s ease-in-out 1.9s infinite;
}

.df-anim-enabled.df-page-ready .df-home-hero-studio .df-home-proof-row {
    animation: dfHeroReveal .72s cubic-bezier(.16, 1, .3, 1) .96s both;
}

.df-home-hero-studio .df-home-premium-copy::before {
    content: "";
    position: absolute;
    inset: -8rem -18rem -4rem;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 28% 42%, rgba(0, 112, 243, .18), transparent 34%),
        radial-gradient(circle at 66% 28%, rgba(0, 184, 148, .14), transparent 28%);
    filter: blur(22px);
    animation: dfAuroraPulse 7s ease-in-out infinite;
    pointer-events: none;
}

.df-hero-product-live::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    pointer-events: none;
    animation: dfLightSweep 2.1s cubic-bezier(.16, 1, .3, 1) 1.35s both;
}

.df-anim-enabled .df-home-product-section,
.df-anim-enabled .df-home-ops-section,
.df-anim-enabled .df-home-flow-section,
.df-anim-enabled .df-home-usecases-section,
.df-anim-enabled .df-home-cta-modern,
.df-anim-enabled .df-product-contrast,
.df-anim-enabled .df-home-ops-panel,
.df-anim-enabled .df-home-flow-track article,
.df-anim-enabled .df-usecase-board > *,
.df-anim-enabled .df-home-cta-inner {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px);
}

.df-anim-enabled .df-in-view {
    animation: dfRevealUp .72s cubic-bezier(.16, 1, .3, 1) calc(var(--df-reveal-index, 0) * 70ms) both;
}

@media (max-width: 560px) {
    .df-home-hero-studio .df-home-premium-copy::before {
        inset: -4rem -6rem -2rem;
        filter: blur(18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-anim-enabled .df-public .df-header,
    .df-anim-enabled .df-home-hero-studio .df-home-eyebrow-row,
    .df-anim-enabled .df-home-hero-studio .df-home-brand-title,
    .df-anim-enabled .df-home-hero-studio .df-home-lead-premium,
    .df-anim-enabled .df-home-hero-studio .df-home-diff-strip,
    .df-anim-enabled .df-home-hero-studio .df-home-actions-premium,
    .df-anim-enabled .df-home-hero-studio .df-hero-product-live,
    .df-anim-enabled .df-home-hero-studio .df-home-proof-row,
    .df-anim-enabled .df-home-product-section,
    .df-anim-enabled .df-home-ops-section,
    .df-anim-enabled .df-home-flow-section,
    .df-anim-enabled .df-home-usecases-section,
    .df-anim-enabled .df-home-cta-modern,
    .df-anim-enabled .df-product-contrast,
    .df-anim-enabled .df-home-ops-panel,
    .df-anim-enabled .df-home-flow-track article,
    .df-anim-enabled .df-usecase-board > *,
    .df-anim-enabled .df-home-cta-inner {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }
}

/* 2026-05 polish: editorial product-led public pages */
.df-title {
    font-family: var(--df-font-display);
    font-weight: 650;
    letter-spacing: -.01em;
}

.df-header {
    border-bottom-color: rgba(63, 67, 74, .10);
    background: rgba(249, 239, 228, .88);
}

.df-brand {
    font-family: var(--df-font-body);
    font-weight: 850;
}

.df-nav {
    gap: 1.05rem;
    font-weight: 700;
}

.df-button-primary,
.df-button-secondary,
.df-button-danger {
    border-radius: var(--df-radius-pill);
    font-weight: 800;
}

.df-button-primary {
    border-color: var(--df-graphite);
    background: var(--df-graphite);
    box-shadow: 0 14px 32px rgba(45, 47, 52, .16);
}

.df-button-primary:hover {
    background: #16181c;
}

.df-button-secondary {
    border-color: rgba(45, 47, 52, .34);
    background: rgba(253, 253, 253, .72);
}

.df-kicker {
    border-color: rgba(45, 47, 52, .12);
    background: rgba(253, 253, 253, .66);
    color: var(--df-graphite);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.df-home-hero-studio {
    position: relative;
    overflow: hidden;
    padding-block: 5rem 4.25rem;
    background:
        linear-gradient(110deg, rgba(249, 239, 228, .98), rgba(253, 249, 244, .86) 44%, rgba(232, 242, 248, .72)),
        var(--df-soft);
}

.df-home-hero-studio::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background-image:
        linear-gradient(rgba(63, 67, 74, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 67, 74, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(transparent, black 38%);
    pointer-events: none;
}

.df-home-hero-studio > .df-container {
    position: relative;
}

.df-home-premium-copy {
    max-width: 1040px;
}

.df-home-brand-title {
    max-width: 980px;
    margin-top: 1.35rem;
    color: #24262b;
    font-size: clamp(3rem, 5.6vw, 5.7rem);
    line-height: .96;
}

.df-home-lead-premium {
    max-width: 720px;
    color: #555b64;
    font-size: 1.12rem;
    line-height: 1.72;
}

.df-home-diff-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    max-width: 100%;
    margin-top: 1.1rem;
}

.df-home-diff-strip span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 2rem;
    border: 1px solid rgba(45, 47, 52, .14);
    border-radius: var(--df-radius-pill);
    background: rgba(253, 253, 253, .76);
    color: var(--df-graphite);
    padding: .42rem .72rem;
    font-size: .78rem;
    font-weight: 850;
    white-space: normal;
}

.df-home-diff-strip span::before {
    content: "";
    width: .42rem;
    height: .42rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--df-green);
    box-shadow: 0 0 0 3px rgba(84, 115, 88, .12);
}

.df-home-proof-row {
    max-width: 1040px;
}

.df-home-proof-row div {
    background: rgba(253, 253, 253, .78);
}

.df-hero-product-live {
    position: relative;
    margin-top: 2.4rem;
    border-color: rgba(45, 47, 52, .14);
    background: rgba(253, 253, 253, .94);
}

.df-hero-product-live::after {
    content: "";
    position: absolute;
    right: 16%;
    bottom: -1px;
    left: 16%;
    height: 5px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #547358, #2e77e5, #9d4d77);
}

.df-hero-product-top {
    background: rgba(255, 253, 248, .92);
}

.df-hero-product-status span {
    border-color: rgba(45, 47, 52, .14);
    background: rgba(253, 249, 244, .92);
}

.df-hero-product-grid {
    grid-template-columns: 235px minmax(0, 1fr) 320px;
}

.df-hero-sidebar,
.df-hero-inspector {
    background: #f7efe5;
}

.df-hero-step {
    border-color: rgba(45, 47, 52, .10);
}

.df-hero-step b {
    width: auto;
    min-width: 4.15rem;
    padding-inline: .55rem;
    font-size: .66rem;
    text-transform: uppercase;
}

.df-hero-side-card {
    margin-top: .35rem;
    border: 1px solid rgba(45, 47, 52, .12);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .78);
    padding: .9rem;
}

.df-hero-side-card span,
.df-hero-side-card small {
    display: block;
    color: var(--df-muted);
    font-size: .76rem;
    font-weight: 700;
}

.df-hero-side-card strong {
    display: block;
    margin-block: .18rem;
    color: var(--df-graphite);
    font-size: .9rem;
}

.df-hero-document {
    background:
        linear-gradient(180deg, rgba(240, 228, 214, .54), rgba(253, 253, 253, .44)),
        repeating-linear-gradient(90deg, rgba(63, 67, 74, .035) 0 1px, transparent 1px 24px);
}

.df-hero-doc-paper-live {
    position: relative;
    min-height: 470px;
    border-color: rgba(45, 47, 52, .12);
}

.df-hero-doc-paper-live p strong {
    display: inline-block;
    min-width: 8.6rem;
    color: #59606a;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.df-hero-doc-paper .df-mark-purple {
    background: rgba(157, 77, 119, .11);
    color: var(--df-mauve);
}

.df-hero-doc-grid-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
    margin-top: 2rem;
}

.df-hero-doc-grid-lines span {
    height: 42px;
    border: 1px solid rgba(217, 221, 230, .95);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(217, 221, 230, .45), transparent 55%);
}

.df-hero-doc-stamp {
    position: absolute;
    right: 1.2rem;
    bottom: 5.8rem;
    transform: rotate(-5deg);
    border: 2px solid rgba(84, 115, 88, .62);
    border-radius: 10px;
    color: var(--df-green);
    padding: .38rem .62rem;
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-home-section-ink {
    border-top: 1px solid rgba(45, 47, 52, .10);
    border-bottom: 1px solid rgba(45, 47, 52, .10);
    background: #fffdf8;
}

.df-home-compare-section {
    border-top: 1px solid rgba(45, 47, 52, .10);
    border-bottom: 1px solid rgba(45, 47, 52, .10);
    background:
        linear-gradient(180deg, rgba(253, 253, 253, .82), rgba(253, 249, 244, .92));
}

.df-home-compare {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

.df-home-compare-copy {
    position: sticky;
    top: 104px;
}

.df-home-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.df-home-compare-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid rgba(45, 47, 52, .12);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .9);
    padding: 1rem;
    box-shadow: var(--df-shadow);
}

.df-home-compare-card > span {
    width: fit-content;
    border-radius: var(--df-radius-pill);
    background: var(--df-linen);
    color: var(--df-muted);
    padding: .28rem .55rem;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.df-home-compare-card h3 {
    margin-top: .85rem;
    color: var(--df-graphite);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.2;
}

.df-home-compare-card p {
    margin-top: .45rem;
    color: var(--df-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.df-home-compare-card ul {
    display: grid;
    gap: .45rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.df-home-compare-card li {
    display: flex;
    gap: .45rem;
    color: var(--df-ink);
    font-size: .82rem;
    font-weight: 760;
    line-height: 1.35;
}

.df-home-compare-card li::before {
    content: "";
    flex: 0 0 .42rem;
    width: .42rem;
    height: .42rem;
    margin-top: .42rem;
    border-radius: 50%;
    background: rgba(101, 101, 101, .34);
}

.df-home-compare-card-highlight {
    border-color: rgba(45, 47, 52, .42);
    background:
        linear-gradient(180deg, rgba(45, 47, 52, .96), rgba(63, 67, 74, .98));
    color: var(--df-surface);
}

.df-home-compare-card-highlight > span {
    background: rgba(253, 253, 253, .12);
    color: var(--df-surface);
}

.df-home-compare-card-highlight h3,
.df-home-compare-card-highlight p,
.df-home-compare-card-highlight li {
    color: var(--df-surface);
}

.df-home-compare-card-highlight p {
    opacity: .78;
}

.df-home-compare-card-highlight li::before {
    background: var(--df-green);
    box-shadow: 0 0 0 3px rgba(84, 115, 88, .25);
}

.df-home-workflow-section {
    border-bottom: 1px solid rgba(45, 47, 52, .10);
    background:
        linear-gradient(180deg, rgba(249, 239, 228, .62), rgba(240, 228, 214, .70));
}

.df-home-section-split {
    background: #f7efe5;
}

.df-home-capability-grid article,
.df-home-workflow article {
    border-color: rgba(45, 47, 52, .12);
    background: rgba(253, 253, 253, .86);
}

.df-home-capability-grid article span,
.df-home-workflow article span {
    background: #fbf4d8;
    color: #7f6c1f;
    text-transform: uppercase;
}

.df-home-tag-cloud span,
.df-home-tag-cloud a {
    border-color: rgba(45, 47, 52, .14);
}

.df-pricing-summary,
.df-demo-intro {
    border-bottom: 1px solid rgba(45, 47, 52, .10);
    padding-bottom: 2rem;
}

@media (max-width: 980px) {
    .df-home-brand-title {
        font-size: clamp(2.75rem, 10vw, 4.8rem);
    }

    .df-home-compare,
    .df-home-compare-grid {
        grid-template-columns: 1fr;
    }

    .df-home-compare-copy {
        position: static;
    }

    .df-hero-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .df-container {
        padding-inline: 18px;
    }

    .df-home-hero-studio {
        padding-block: 3rem 2.75rem;
    }

    .df-home-brand-title {
        max-width: 17rem;
        margin-inline: auto;
        font-size: clamp(1.85rem, 8.8vw, 2.15rem);
        line-height: 1.04;
    }

    .df-home-lead-premium {
        max-width: calc(100vw - 36px);
        margin-inline: auto;
        font-size: 1rem;
        line-height: 1.58;
    }

    .df-home-eyebrow-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        width: 100%;
        max-width: calc(100vw - 36px);
    }

    .df-home-diff-strip,
    .df-home-actions-premium {
        justify-content: center;
        width: 100%;
        max-width: calc(100vw - 36px);
    }

    .df-home-eyebrow-row .df-kicker,
    .df-home-eyebrow-row > span {
        max-width: 17rem;
        border-radius: 18px;
    }

    .df-home-diff-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .df-home-diff-strip span {
        justify-content: center;
        width: fit-content;
        max-width: calc(100vw - 36px);
    }

    .df-home-actions-premium .df-button-primary,
    .df-home-actions-premium .df-button-secondary {
        width: min(100%, 20rem);
        justify-content: center;
    }

    .df-hero-doc-paper-live p strong {
        display: block;
        min-width: 0;
        margin-bottom: .15rem;
    }

    .df-hero-doc-grid-lines {
        grid-template-columns: 1fr;
    }
}

/* Focused fixes: login, admin density and product-led home */
.df-login-page {
    min-height: 100dvh;
    padding-top: 0;
    background:
        linear-gradient(135deg, rgba(249, 239, 228, .95), rgba(253, 253, 253, .86) 56%, rgba(240, 228, 214, .82));
}

.df-login-shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    min-height: 100dvh;
    padding-block: clamp(.85rem, 2.2vh, 1.5rem);
}

.df-login-page .df-container {
    max-width: 1180px;
}

.df-login-copy-main {
    margin-top: clamp(2rem, 6vh, 4.5rem);
}

.df-login-copy-main h1 {
    max-width: 10em;
    margin-top: 1rem;
    font-size: clamp(2.5rem, 5.2vw, 5rem);
    line-height: .96;
}

.df-login-copy-main .df-lead {
    max-width: 36rem;
    margin-top: 1rem;
}

.df-login-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: clamp(1.25rem, 4vh, 2rem);
}

.df-login-proof .df-panel {
    padding: .9rem;
}

.df-login-card {
    width: 100%;
    padding: clamp(1rem, 2.4vw, 1.45rem);
}

.df-login-form-grid {
    display: grid;
    gap: .78rem;
    margin-top: 1rem;
}

.df-login-card .df-input {
    padding-block: .66rem;
}

.df-login-card .df-tab {
    padding-block: .58rem;
}

.df-login-card label {
    color: var(--df-graphite);
    font-size: .9rem;
}

.df-login-card .df-button-primary {
    justify-content: center;
    min-height: 3rem;
}

@media (max-height: 760px) and (min-width: 900px) {
    .df-login-copy-main {
        margin-top: 1.1rem;
    }

    .df-login-copy-main h1 {
        max-width: 12em;
        font-size: clamp(2.25rem, 4vw, 3.7rem);
    }

    .df-login-proof {
        margin-top: 1rem;
    }
}

.df-admin-users-page {
    display: grid;
    gap: 1rem;
}

.df-admin-credit-compact {
    align-items: center;
    padding: 1rem;
}

.df-admin-users-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

.df-admin-users-table-card,
.df-admin-ledger,
.df-settings-main,
.df-settings-test,
.df-settings-recent {
    padding: 1rem;
}

.df-admin-users-head,
.df-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.df-admin-users-head h2,
.df-settings-head h2,
.df-settings-test h2 {
    margin-top: .35rem;
    color: var(--df-graphite);
    font-size: 1.25rem;
    font-weight: 850;
}

.df-admin-users-head > span,
.df-settings-counter {
    border: 1px solid rgba(45, 47, 52, .12);
    border-radius: var(--df-radius-pill);
    background: var(--df-paper);
    color: var(--df-muted);
    padding: .45rem .7rem;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.df-admin-users-scroll {
    max-height: calc(100vh - 275px);
    overflow: auto;
}

.df-admin-users-table th,
.df-admin-users-table td {
    padding: .72rem .78rem;
    vertical-align: middle;
}

.df-admin-users-table td p {
    margin-top: .12rem;
    font-size: .78rem;
}

.df-admin-users-table code {
    display: block;
    margin-top: .2rem;
    color: var(--df-ash);
    font-size: .7rem;
}

.df-admin-role-select,
.df-admin-balance-input,
.df-admin-reason-input {
    min-height: 2.25rem;
    padding: .48rem .62rem;
    font-size: .82rem;
}

.df-admin-balance-input {
    width: 8.3rem;
}

.df-admin-reason-input {
    min-width: 13rem;
}

.df-admin-users-table small {
    display: block;
    margin-top: .25rem;
    color: var(--df-muted);
    font-size: .72rem;
    font-weight: 800;
}

.df-admin-row-actions {
    display: flex;
    gap: .45rem;
}

.df-admin-row-actions .df-button-primary,
.df-admin-row-actions .df-button-secondary {
    min-height: 2.2rem;
    padding: .42rem .68rem;
    font-size: .78rem;
}

.df-admin-inline-message {
    margin-top: .75rem;
    border: 1px solid rgba(46, 119, 229, .16);
    border-radius: var(--df-radius);
    background: rgba(46, 119, 229, .06);
    color: var(--df-blue-dark);
    padding: .7rem .85rem;
    font-size: .88rem;
    font-weight: 800;
}

.df-admin-ledger {
    position: sticky;
    top: 88px;
}

.df-admin-ledger-list,
.df-settings-log-list {
    display: grid;
    gap: .65rem;
    max-height: calc(100vh - 230px);
    overflow: auto;
    padding-right: .15rem;
}

.df-admin-ledger-list article {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: .65rem;
    border: 1px solid rgba(45, 47, 52, .10);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .78);
    padding: .7rem;
}

.df-admin-ledger-list article span {
    align-self: start;
    border-radius: var(--df-radius-pill);
    padding: .28rem .45rem;
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
}

.df-ledger-positive {
    background: rgba(84, 115, 88, .12);
    color: var(--df-green);
}

.df-ledger-negative {
    background: #fff2ef;
    color: var(--df-red);
}

.df-admin-ledger-list b,
.df-settings-log-list b {
    display: block;
    overflow: hidden;
    color: var(--df-graphite);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-admin-ledger-list p,
.df-admin-ledger-list small,
.df-settings-log-list p,
.df-settings-log-list small {
    display: block;
    overflow: hidden;
    margin-top: .18rem;
    color: var(--df-muted);
    font-size: .75rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.df-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 1rem;
    align-items: start;
}

.df-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}

.df-settings-form .df-input {
    padding-block: .62rem;
}

.df-settings-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .95rem;
    align-items: center;
    grid-column: 1 / -1;
}

.df-settings-checks label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--df-ink);
    font-size: .88rem;
    font-weight: 800;
}

.df-settings-form .df-button-primary {
    grid-column: 1 / -1;
}

.df-settings-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 88px;
}

.df-settings-test-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    margin-top: .85rem;
}

.df-settings-result {
    margin-top: .7rem;
    color: var(--df-muted);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.45;
}

.df-settings-log-list {
    max-height: 24rem;
}

.df-settings-log-list article {
    border: 1px solid rgba(45, 47, 52, .10);
    border-radius: var(--df-radius);
    background: rgba(253, 253, 253, .78);
    padding: .72rem;
}

.df-email-status {
    display: inline-flex;
    width: fit-content;
    border-radius: var(--df-radius-pill);
    padding: .22rem .5rem;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.df-email-status-sent {
    background: rgba(84, 115, 88, .12);
    color: var(--df-green);
}

.df-email-status-failed {
    background: #fff2ef;
    color: var(--df-red);
}

.df-settings-log-list details {
    margin-top: .45rem;
}

.df-settings-log-list summary {
    cursor: pointer;
    color: var(--df-blue-dark);
    font-size: .75rem;
    font-weight: 850;
}

.df-settings-log-list code {
    display: block;
    overflow: hidden;
    margin-top: .35rem;
    color: var(--df-muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 981px) {
    .df-home-hero-studio > .df-container {
        display: grid;
        grid-template-columns: minmax(0, 500px) minmax(0, 640px);
        gap: clamp(2rem, 4vw, 3.25rem);
        align-items: center;
        justify-content: center;
    }

    .df-home-hero-studio .df-home-premium-copy {
        justify-items: start;
        min-width: 0;
        text-align: left;
    }

    .df-home-hero-studio .df-home-brand-title {
        max-width: 7.1em;
        font-size: clamp(3.15rem, 4.1vw, 4.55rem);
        line-height: .98;
        overflow-wrap: normal;
    }

    .df-home-hero-studio .df-home-lead-premium {
        max-width: 31rem;
    }

    .df-home-hero-studio .df-home-actions-premium {
        justify-content: flex-start;
    }

    .df-home-hero-studio .df-home-proof-row {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 31rem;
        margin: 1.25rem 0 0;
    }

    .df-home-hero-studio .df-home-proof-row div {
        border-color: rgba(45, 47, 52, .10);
        background: rgba(253, 253, 253, .56);
        box-shadow: none;
    }

    .df-home-hero-studio .df-hero-product-shell {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
        margin: 0;
    }

    .df-home-hero-studio .df-hero-product-grid {
        grid-template-columns: 136px minmax(250px, 1fr) 210px;
        min-height: 456px;
    }

    .df-home-hero-studio .df-hero-doc-paper {
        min-height: 384px;
        padding: 1.05rem;
    }

    .df-home-hero-studio .df-hero-doc-paper p {
        font-size: .8rem;
    }

    .df-home-hero-studio .df-hero-doc-grid-lines {
        gap: .55rem;
    }

    .df-home-hero-studio .df-hero-sidebar,
    .df-home-hero-studio .df-hero-inspector {
        padding: .9rem .75rem;
    }

    .df-home-hero-studio .df-hero-step {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .df-home-hero-studio .df-hero-step b {
        width: fit-content;
        min-width: 0;
    }

    .df-home-hero-studio .df-hero-step span,
    .df-home-hero-studio .df-hero-variable span,
    .df-home-hero-studio .df-hero-variable strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .df-home-hero-studio .df-hero-step span {
        white-space: normal;
        line-height: 1.25;
    }

    .df-home-hero-studio .df-hero-variable {
        grid-template-columns: minmax(0, 1fr);
        padding: .68rem;
    }

    .df-home-hero-studio .df-hero-variable em {
        grid-row: auto;
        justify-self: start;
        margin-top: .16rem;
        padding: .2rem .45rem;
        font-size: .68rem;
    }

    .df-home-hero-studio .df-hero-doc-paper-live p strong {
        display: block;
        min-width: 0;
        margin-bottom: .18rem;
        font-size: .7rem;
    }

    .df-home-hero-studio .df-hero-doc-title b {
        font-size: 1.25rem;
        line-height: 1.05;
    }

    .df-home-hero-studio .df-hero-code {
        max-height: 8.6rem;
        overflow: hidden;
        font-size: .67rem;
    }

    .df-home-hero-studio .df-hero-panel-section:last-child {
        display: none;
    }
}

@media (max-width: 1100px) {
    .df-admin-users-layout,
    .df-settings-layout,
    .df-login-shell {
        grid-template-columns: 1fr;
    }

    .df-admin-ledger,
    .df-settings-side {
        position: static;
    }
}

@media (max-width: 720px) {
    .df-login-shell {
        padding-block: 1rem;
    }

    .df-login-proof,
    .df-settings-form {
        grid-template-columns: 1fr;
    }

    .df-settings-form .df-button-primary {
        grid-column: auto;
    }

    .df-settings-test-form {
        grid-template-columns: 1fr;
    }
}

/* 2026-05 motion polish: product-led SaaS landing */
@keyframes dfHeroLift {
    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(1.2deg) rotateY(-1.4deg);
    }
}

@keyframes dfCardDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes dfScan {
    0% {
        transform: translateY(18px);
        opacity: 0;
    }
    18%, 72% {
        opacity: 1;
    }
    100% {
        transform: translateY(255px);
        opacity: 0;
    }
}

@keyframes dfSoftPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(84, 115, 88, .12);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(84, 115, 88, .06);
    }
}

.df-home-hero-studio {
    min-height: calc(100vh - 72px);
    background:
        linear-gradient(115deg, rgba(249, 239, 228, .98), rgba(253, 249, 244, .78) 40%, rgba(235, 244, 249, .70)),
        radial-gradient(circle at 52% 18%, rgba(46, 119, 229, .08), transparent 32%),
        var(--df-soft);
}

.df-home-hero-studio::after {
    content: "";
    position: absolute;
    inset: 72px 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 47, 52, .18), transparent);
}

.df-home-brand-title {
    text-wrap: balance;
}

.df-home-diff-strip span::before {
    animation: dfSoftPulse 2.8s ease-in-out infinite;
}

.df-hero-product-live {
    overflow: visible;
    transform-origin: center;
    animation: dfHeroLift 8s ease-in-out infinite;
}

.df-hero-product-live > .df-hero-product-top,
.df-hero-product-live > .df-hero-product-grid {
    overflow: hidden;
}

.df-hero-product-live > .df-hero-product-top {
    border-radius: 18px 18px 0 0;
}

.df-hero-product-live > .df-hero-product-grid {
    border-radius: 0 0 18px 18px;
}

.df-hero-floating-card {
    position: absolute;
    z-index: 3;
    width: 154px;
    border: 1px solid rgba(45, 47, 52, .14);
    border-radius: 16px;
    background: rgba(253, 253, 253, .88);
    padding: .8rem;
    box-shadow: rgba(45, 47, 52, .08) 0 18px 40px;
    backdrop-filter: blur(14px);
    animation: dfCardDrift 6.2s ease-in-out infinite;
}

.df-hero-floating-card span,
.df-hero-floating-card small {
    display: block;
    color: var(--df-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.df-hero-floating-card strong {
    display: block;
    margin-top: .22rem;
    color: var(--df-graphite);
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.15;
}

.df-hero-floating-card small {
    margin-top: .35rem;
    letter-spacing: 0;
    text-transform: none;
}

.df-hero-floating-card-source {
    top: 5.8rem;
    left: -2.1rem;
}

.df-hero-floating-card-output {
    right: -2.2rem;
    bottom: 5.3rem;
    animation-delay: -2.2s;
}

.df-hero-scan-line {
    position: absolute;
    right: 1rem;
    left: 1rem;
    top: 6.2rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(46, 119, 229, .75), rgba(84, 115, 88, .75), transparent);
    filter: drop-shadow(0 0 10px rgba(46, 119, 229, .28));
    animation: dfScan 4.8s ease-in-out infinite;
}

.df-home-proof-row div,
.df-home-compare-card,
.df-home-capability-grid article,
.df-home-workflow article {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.df-home-proof-row div:hover,
.df-home-compare-card:hover,
.df-home-capability-grid article:hover,
.df-home-workflow article:hover {
    transform: translateY(-4px);
    border-color: rgba(45, 47, 52, .22);
    box-shadow: rgba(45, 47, 52, .07) 0 22px 48px;
}

@media (min-width: 981px) {
    .df-home-hero-studio > .df-container {
        grid-template-columns: minmax(0, 520px) minmax(0, 660px);
        gap: clamp(2.4rem, 5vw, 4.2rem);
    }

    .df-home-hero-studio .df-home-brand-title {
        max-width: 7.35em;
        font-size: clamp(3.3rem, 4.35vw, 4.9rem);
    }

    .df-home-hero-studio .df-hero-product-grid {
        grid-template-columns: 148px minmax(260px, 1fr) 214px;
    }
}

@media (max-width: 980px) {
    .df-home-hero-studio {
        min-height: auto;
    }

    .df-hero-product-live {
        animation: none;
    }

    .df-hero-floating-card {
        display: none;
    }
}

@media (max-width: 560px) {
    .df-home-hero-studio {
        padding-block: 2.75rem 2.4rem;
    }

    .df-home-brand-title {
        max-width: 19rem;
        font-size: clamp(2.1rem, 9.6vw, 2.45rem);
    }

    .df-home-eyebrow-row > span {
        max-width: 18rem;
    }

    .df-hero-product-live {
        margin-top: 1.35rem;
    }

    .df-hero-product-top,
    .df-hero-inspector {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-hero-product-live,
    .df-hero-floating-card,
    .df-hero-scan-line,
    .df-home-diff-strip span::before {
        animation: none;
    }

    .df-home-proof-row div,
    .df-home-compare-card,
    .df-home-capability-grid article,
    .df-home-workflow article {
        transition: none;
    }
}

/* 2026-05 direction shift: clean blue SaaS, closer to premium product marketing */
@keyframes dfBlueSweep {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes dfPanelRise {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.006);
    }
}

.df-home.df-home-premium {
    background: #f7fbff;
}

.df-home-hero-studio {
    min-height: calc(100vh - 72px);
    padding-block: clamp(4.5rem, 9vh, 7rem) 5rem;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #eef7ff 100%);
}

.df-home-hero-studio::before {
    inset: 0;
    height: auto;
    background-image:
        linear-gradient(rgba(23, 107, 229, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 107, 229, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(transparent 0%, black 22%, black 80%, transparent 100%);
}

.df-home-hero-studio::after {
    content: "";
    position: absolute;
    inset: 6rem 0 auto 0;
    height: 28rem;
    background:
        linear-gradient(90deg, transparent 0%, rgba(46, 119, 229, .10) 48%, transparent 100%),
        linear-gradient(115deg, transparent 30%, rgba(16, 185, 129, .08), transparent 64%);
    clip-path: polygon(0 18%, 100% 0, 100% 64%, 0 84%);
    pointer-events: none;
}

.df-home-hero-studio > .df-container {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    max-width: 1260px;
    gap: 1.4rem;
}

.df-home-hero-studio .df-home-proof-row,
.df-home-hero-studio .df-hero-product-shell {
    grid-column: 1 !important;
    grid-row: auto !important;
}

.df-home-hero-studio .df-home-premium-copy {
    position: relative;
    z-index: 1;
    justify-items: center !important;
    max-width: 980px;
    text-align: center !important;
    order: 1;
}

.df-public .df-header {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(16, 35, 63, .08);
}

.df-home-eyebrow-row {
    gap: .65rem;
}

.df-home-eyebrow-row .df-kicker,
.df-home-eyebrow-row > span {
    border-color: rgba(0, 112, 243, .14);
    background: rgba(255, 255, 255, .82);
    color: #10233f;
    box-shadow: rgba(15, 35, 70, .05) 0 8px 24px;
}

.df-home-hero-studio .df-home-brand-title {
    max-width: 12.5em;
    margin-top: 1.25rem;
    color: #10233f;
    font-family: var(--df-font-body);
    font-size: clamp(4rem, 6vw, 6.45rem);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .94;
    text-wrap: balance;
}

.df-home-title-accent {
    background: linear-gradient(100deg, #0057ff, #00a3ff 42%, #00b894 78%, #0057ff);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: dfBlueSweep 8s ease-in-out infinite;
}

.df-home-hero-studio .df-home-lead-premium {
    max-width: 760px;
    color: #486079;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.72;
}

.df-home-actions-premium {
    gap: .85rem;
    margin-top: 1.65rem;
}

.df-home .df-button-primary,
.df-public .df-header .df-button-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #0068ff, #009dff);
    color: #fff;
    box-shadow: rgba(0, 104, 255, .24) 0 18px 38px;
}

.df-home .df-button-primary:hover,
.df-public .df-header .df-button-primary:hover {
    background: linear-gradient(135deg, #005be0, #007ee5);
    transform: translateY(-1px);
}

.df-home .df-button-secondary {
    border-color: rgba(16, 35, 63, .16);
    background: rgba(255, 255, 255, .86);
    color: #10233f;
    box-shadow: rgba(16, 35, 63, .06) 0 12px 28px;
}

.df-home-diff-strip {
    justify-content: center;
    margin-top: 1.25rem;
}

.df-home-diff-strip span {
    border-color: rgba(0, 104, 255, .13);
    background: rgba(255, 255, 255, .84);
    color: #10233f;
    box-shadow: rgba(16, 35, 63, .05) 0 9px 22px;
}

.df-home-diff-strip span::before {
    background: #0070f3;
    box-shadow: 0 0 0 4px rgba(0, 112, 243, .10);
}

.df-home-proof-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 880px !important;
    margin-top: 1.2rem !important;
    order: 3;
}

.df-home-proof-row div {
    border-color: rgba(16, 35, 63, .10);
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: rgba(16, 35, 63, .06) 0 18px 38px;
    backdrop-filter: blur(16px);
}

.df-home-proof-row span {
    color: #60748d;
}

.df-home-proof-row b {
    color: #10233f;
}

.df-hero-product-live {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin-top: 2rem !important;
    order: 2;
    border: 1px solid rgba(16, 35, 63, .12);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        rgba(0, 112, 243, .12) 0 42px 100px,
        rgba(16, 35, 63, .14) 0 18px 48px;
    animation: dfPanelRise 7s ease-in-out infinite;
}

.df-hero-product-live > .df-hero-product-top {
    border-radius: 30px 30px 0 0;
}

.df-hero-product-live > .df-hero-product-grid {
    border-radius: 0 0 30px 30px;
}

.df-hero-product-top {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.df-hero-product-top strong {
    color: #10233f;
}

.df-hero-product-status span {
    border-color: rgba(0, 112, 243, .12);
    background: #f7fbff;
    color: #10233f;
}

.df-hero-sidebar,
.df-hero-inspector {
    background: #f4f8ff;
}

.df-hero-document {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(243, 248, 255, .62)),
        repeating-linear-gradient(90deg, rgba(0, 112, 243, .035) 0 1px, transparent 1px 26px);
}

.df-hero-step,
.df-hero-variable,
.df-hero-side-card {
    border-color: rgba(16, 35, 63, .10);
    background: rgba(255, 255, 255, .88);
}

.df-hero-step-active {
    border-color: rgba(0, 112, 243, .26);
    box-shadow: rgba(0, 112, 243, .14) 0 12px 24px;
}

.df-hero-step-active b {
    background: #0070f3;
}

.df-hero-doc-paper-live {
    border-color: rgba(16, 35, 63, .10);
    box-shadow: rgba(16, 35, 63, .12) 0 20px 50px;
}

.df-hero-floating-card {
    border-color: rgba(0, 112, 243, .13);
    background: rgba(255, 255, 255, .90);
    box-shadow: rgba(0, 112, 243, .12) 0 22px 44px;
}

.df-hero-floating-card-source {
    top: 5.6rem;
    left: -3.2rem;
}

.df-hero-floating-card-output {
    right: -3.3rem;
    bottom: 4.6rem;
}

.df-hero-scan-line {
    background: linear-gradient(90deg, transparent, rgba(0, 112, 243, .85), rgba(0, 184, 148, .80), transparent);
    filter: drop-shadow(0 0 12px rgba(0, 112, 243, .34));
}

.df-home-compare-section,
.df-home-section-ink,
.df-home-workflow-section,
.df-home-section-split,
.df-home-final-cta {
    background: #f7fbff;
}

@media (min-width: 981px) {
    .df-home-hero-studio .df-hero-product-grid {
        grid-template-columns: 180px minmax(0, 1fr) 260px;
        min-height: 490px;
    }

    .df-home-hero-studio .df-hero-doc-paper {
        min-height: 400px;
    }
}

@media (max-width: 980px) {
    .df-home-hero-studio .df-home-brand-title {
        max-width: 10em;
        font-size: clamp(3rem, 9vw, 4.8rem);
        letter-spacing: -.052em;
    }

    .df-home-proof-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-hero-product-live {
        animation: none;
    }
}

@media (max-width: 560px) {
    .df-home-hero-studio {
        padding-block: 2.8rem 2.25rem;
    }

    .df-home-hero-studio .df-home-brand-title {
        max-width: 9.5em;
        font-size: clamp(2.35rem, 10vw, 2.78rem);
        letter-spacing: -.045em;
        line-height: 1;
    }

    .df-home-hero-studio .df-home-lead-premium {
        color: #4d627a;
        font-size: 1rem;
        line-height: 1.58;
    }

    .df-home-proof-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .df-home-proof-row div {
        min-height: 5rem;
    }

    .df-hero-product-live {
        display: none;
    }
}

/* Lower home redesign: product narrative, contrast and premium rhythm */
@keyframes dfRailGlow {
    0%, 100% {
        transform: scaleX(.18);
        opacity: .35;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.df-home-product-section,
.df-home-flow-section,
.df-home-usecases-section {
    position: relative;
    overflow: hidden;
    background: #f7fbff;
    padding-block: clamp(4rem, 8vw, 7rem);
}

.df-home-product-section::before,
.df-home-flow-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 35, 63, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 35, 63, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(circle at 50% 18%, black, transparent 68%);
    pointer-events: none;
}

.df-home-section-center {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.df-home-section-center h2,
.df-home-ops-copy h2,
.df-home-usecases h2,
.df-home-cta-modern h2 {
    margin-top: 1rem;
    color: #10233f;
    font-family: var(--df-font-body);
    font-size: clamp(2.35rem, 4.6vw, 4.7rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .98;
    text-wrap: balance;
}

.df-home-section-center p,
.df-home-ops-copy p,
.df-home-cta-modern p {
    max-width: 720px;
    margin-top: 1rem;
    color: #526984;
    font-size: 1.06rem;
    line-height: 1.72;
}

.df-product-contrast {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 1rem;
    margin-top: 2.2rem;
}

.df-product-contrast-main,
.df-product-contrast-side {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 32px;
    background: rgba(255, 255, 255, .82);
    box-shadow: rgba(16, 35, 63, .08) 0 28px 72px;
    backdrop-filter: blur(18px);
}

.df-product-contrast-main {
    overflow: hidden;
    padding: clamp(1.1rem, 2vw, 1.6rem);
}

.df-product-rail {
    display: grid;
    grid-template-columns: auto minmax(34px, 1fr) auto minmax(34px, 1fr) auto;
    gap: .7rem;
    align-items: center;
    color: #10233f;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.df-product-rail i {
    position: relative;
    height: 2px;
    border-radius: 999px;
    background: rgba(0, 112, 243, .16);
}

.df-product-rail i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #0070f3, #00b894);
    transform-origin: left;
    animation: dfRailGlow 3.8s ease-in-out infinite;
}

.df-product-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.df-mini-document {
    position: relative;
    min-height: 320px;
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 24px;
    background:
        linear-gradient(180deg, #fff, #f8fbff);
    padding: 1.1rem;
    box-shadow: rgba(16, 35, 63, .06) 0 18px 42px;
}

.df-mini-document::before {
    content: "";
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 112, 243, .16), rgba(0, 184, 148, .12));
}

.df-mini-document strong,
.df-mini-document small,
.df-mini-document span {
    display: block;
}

.df-mini-document strong {
    max-width: 9rem;
    color: #10233f;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.16;
}

.df-mini-document span {
    height: .7rem;
    margin-top: 1rem;
    border-radius: 999px;
    background: rgba(96, 116, 141, .14);
}

.df-mini-document span:nth-of-type(1) {
    width: 86%;
}

.df-mini-document span:nth-of-type(2) {
    width: 66%;
}

.df-mini-document span:nth-of-type(3) {
    width: 78%;
}

.df-mini-document mark {
    display: inline-flex;
    margin-top: 1.35rem;
    border-radius: 999px;
    background: rgba(0, 112, 243, .10);
    color: #0068ff;
    padding: .35rem .55rem;
    font-size: .78rem;
    font-weight: 900;
}

.df-mini-document small {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;
    border-top: 1px solid rgba(16, 35, 63, .10);
    color: #60748d;
    padding-top: .8rem;
    font-weight: 800;
}

.df-mini-document-active {
    transform: translateY(-10px);
    border-color: rgba(0, 112, 243, .26);
    box-shadow: rgba(0, 112, 243, .16) 0 28px 64px;
}

.df-mini-document-active mark {
    background: linear-gradient(135deg, rgba(0, 112, 243, .12), rgba(0, 184, 148, .14));
    color: #10233f;
}

.df-product-contrast-side {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.df-product-contrast-side article {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    padding: 1rem;
}

.df-product-contrast-side article.is-featured {
    border-color: rgba(0, 112, 243, .34);
    background: linear-gradient(135deg, #10233f, #064b9b);
    color: white;
    box-shadow: rgba(0, 112, 243, .22) 0 18px 42px;
}

.df-product-contrast-side span {
    display: block;
    color: #0070f3;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.df-product-contrast-side strong {
    display: block;
    margin-top: .35rem;
    color: #10233f;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.df-product-contrast-side p {
    margin-top: .45rem;
    color: #60748d;
    font-size: .88rem;
    line-height: 1.5;
}

.df-product-contrast-side .is-featured span,
.df-product-contrast-side .is-featured strong,
.df-product-contrast-side .is-featured p {
    color: white;
}

.df-product-contrast-side .is-featured p {
    opacity: .78;
}

.df-home-ops-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 16%, rgba(0, 112, 243, .28), transparent 28rem),
        linear-gradient(135deg, #08172c 0%, #10233f 54%, #053c82 100%);
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.df-home-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
}

.df-home-ops-copy h2,
.df-home-ops-copy p {
    color: white;
}

.df-home-ops-copy p {
    opacity: .76;
}

.df-home-ops-copy .df-kicker {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: white;
}

.df-home-ops-copy .df-button-primary {
    margin-top: 1.5rem;
}

.df-home-ops-panel {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 32px;
    background: rgba(255, 255, 255, .08);
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, .28) 0 32px 90px;
    backdrop-filter: blur(18px);
}

.df-ops-header,
.df-ops-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, .10);
    color: white;
    padding: 1rem;
}

.df-ops-header span,
.df-ops-meter span {
    opacity: .68;
    font-weight: 800;
}

.df-ops-meter {
    margin-top: .75rem;
    background: linear-gradient(135deg, rgba(0, 112, 243, .34), rgba(0, 184, 148, .18));
}

.df-ops-meter b {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.df-ops-list {
    display: grid;
    gap: .65rem;
    margin-top: .75rem;
}

.df-ops-list article {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .85rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    padding: .85rem;
}

.df-ops-list article > span {
    align-self: start;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: white;
    padding: .34rem .55rem;
    font-size: .68rem;
    font-weight: 900;
    text-align: center;
}

.df-ops-list strong {
    display: block;
    color: white;
    font-weight: 900;
}

.df-ops-list p {
    margin-top: .25rem;
    color: rgba(255, 255, 255, .66);
    font-size: .86rem;
    line-height: 1.45;
}

.df-home-flow-section .df-section-heading h2 {
    max-width: 760px;
    color: #10233f;
    font-family: var(--df-font-body);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
}

.df-home-flow-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.df-home-flow-track::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    right: 12%;
    left: 12%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0070f3, #00b894);
}

.df-home-flow-track article {
    position: relative;
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 28px;
    background: rgba(255, 255, 255, .86);
    padding: 1.2rem;
    box-shadow: rgba(16, 35, 63, .07) 0 22px 52px;
}

.df-home-flow-track article > span {
    display: grid;
    width: 4.4rem;
    height: 4.4rem;
    place-items: center;
    border: 8px solid #f7fbff;
    border-radius: 50%;
    background: #0070f3;
    color: white;
    font-weight: 900;
    box-shadow: rgba(0, 112, 243, .18) 0 16px 32px;
}

.df-home-flow-track h3 {
    margin-top: 1.2rem;
    color: #10233f;
    font-size: 1.25rem;
    font-weight: 900;
}

.df-home-flow-track p {
    margin-top: .45rem;
    color: #60748d;
    line-height: 1.55;
}

.df-home-usecases {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 2rem;
    align-items: center;
}

.df-home-usecases h2 {
    max-width: 9em;
}

.df-usecase-board {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.df-usecase-board span,
.df-usecase-board a {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 999px;
    background: white;
    color: #10233f;
    padding: .78rem 1rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: rgba(16, 35, 63, .05) 0 12px 26px;
}

.df-usecase-board a {
    border-color: rgba(0, 112, 243, .22);
    color: #0068ff;
}

.df-home-cta-modern {
    padding: 0 0 clamp(4rem, 8vw, 7rem);
    background: #f7fbff;
}

.df-home-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    border-radius: 36px;
    background:
        radial-gradient(circle at 82% 20%, rgba(255, 255, 255, .22), transparent 22rem),
        linear-gradient(135deg, #0070f3, #00a3ff);
    color: white;
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: rgba(0, 112, 243, .24) 0 32px 80px;
}

.df-home-cta-inner .df-kicker {
    width: fit-content;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    color: white;
}

.df-home-cta-modern h2,
.df-home-cta-modern p {
    color: white;
}

.df-home-cta-modern p {
    opacity: .78;
}

.df-home-cta-pricing {
    display: grid;
    gap: .75rem;
    min-width: 260px;
}

.df-home-cta-pricing span {
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    padding: .9rem 1rem;
    font-weight: 800;
}

.df-home-cta-pricing b {
    display: block;
    font-size: 1.45rem;
    font-weight: 900;
}

.df-home-cta-pricing .df-button-primary {
    background: white;
    color: #0068ff;
    box-shadow: none;
}

@media (max-width: 980px) {
    .df-product-contrast,
    .df-home-ops-grid,
    .df-home-usecases,
    .df-home-cta-inner {
        grid-template-columns: 1fr;
    }

    .df-product-stage,
    .df-home-flow-track {
        grid-template-columns: 1fr;
    }

    .df-home-flow-track::before {
        display: none;
    }

    .df-usecase-board {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .df-home-product-section,
    .df-home-ops-section,
    .df-home-flow-section,
    .df-home-usecases-section {
        padding-block: 3rem;
    }

    .df-home-section-center h2,
    .df-home-ops-copy h2,
    .df-home-usecases h2,
    .df-home-cta-modern h2 {
        font-size: 2.15rem;
        letter-spacing: -.04em;
    }

    .df-product-rail {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .df-product-rail i {
        width: 2px;
        height: 1.7rem;
        justify-self: center;
    }

    .df-mini-document {
        min-height: 230px;
    }

    .df-ops-list article {
        grid-template-columns: 1fr;
    }

    .df-home-cta-inner {
        border-radius: 28px;
    }
}

/* Global premium product system: extends the approved home direction to public, app and admin screens. */
:root {
    --df-ink: #10233f;
    --df-muted: #5f7187;
    --df-ash: #8a9aad;
    --df-soft: #f7fbff;
    --df-paper: #f3f8ff;
    --df-surface: #ffffff;
    --df-line: rgba(16, 35, 63, .12);
    --df-graphite: #10233f;
    --df-blue: #0068ff;
    --df-blue-dark: #004fc7;
    --df-green: #078c6b;
    --df-red: #c0332d;
    --df-shadow: rgba(16, 35, 63, .06) 0 16px 38px, rgba(16, 35, 63, .04) 0 4px 12px;
    --df-shadow-lg: rgba(0, 104, 255, .13) 0 34px 80px, rgba(16, 35, 63, .12) 0 14px 34px;
    --df-radius: 22px;
    --df-radius-soft: 30px;
}

html,
body {
    background: #f7fbff;
    color: #10233f;
}

.df-public,
.df-client {
    background:
        radial-gradient(circle at 18% 4rem, rgba(0, 104, 255, .13), transparent 22rem),
        radial-gradient(circle at 88% 9rem, rgba(0, 184, 148, .10), transparent 20rem),
        linear-gradient(180deg, #ffffff 0, #f7fbff 24rem, #f4f8ff 100%);
    color: #10233f;
}

.df-header {
    border-bottom: 1px solid rgba(16, 35, 63, .09);
    background: rgba(255, 255, 255, .84);
    box-shadow: rgba(16, 35, 63, .04) 0 10px 30px;
    backdrop-filter: blur(22px);
}

.df-header-inner {
    min-height: 74px;
}

.df-brand {
    color: #10233f;
    font-family: var(--df-font-body);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.df-brand span {
    color: #0070f3;
}

.df-nav {
    gap: 1.15rem;
    color: #62728a;
    font-size: .9rem;
    font-weight: 850;
}

.df-nav a {
    transition: color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.df-nav a:hover {
    color: #0068ff;
    transform: translateY(-1px);
}

.df-button-primary,
.df-payment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0068ff, #00a3ff);
    color: white;
    box-shadow: rgba(0, 104, 255, .24) 0 18px 38px;
    font-weight: 900;
    white-space: nowrap;
}

.df-button-primary:hover,
.df-payment-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #005be0, #007ee5);
    box-shadow: rgba(0, 104, 255, .30) 0 22px 48px;
    transform: translateY(-1px);
}

.df-button-secondary,
.df-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border-color: rgba(16, 35, 63, .14);
    background: rgba(255, 255, 255, .88);
    color: #10233f;
    box-shadow: rgba(16, 35, 63, .05) 0 10px 24px;
    font-weight: 850;
    white-space: nowrap;
}

.df-button-secondary:hover {
    border-color: rgba(0, 104, 255, .30);
    color: #0068ff;
    transform: translateY(-1px);
}

.df-button-danger {
    border-color: rgba(192, 51, 45, .22);
    color: #b42318;
}

.df-kicker,
.df-badge,
.df-email-status,
.df-owner-pill {
    border: 1px solid rgba(0, 104, 255, .13);
    border-radius: 999px;
    background: #edf6ff;
    color: #0068ff;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.df-card,
.df-panel,
.df-stat,
.df-link-card,
.df-choice,
.df-table-wrap,
.df-demo-workbench,
.df-demo-output,
.df-api-section,
.df-api-sidebar nav,
.df-pricing-summary,
.df-pricing-rate-card,
.df-pricing-topup-card,
.df-pricing-ledger,
.df-pricing-notes div,
.df-dashboard-hero,
.df-dashboard-loader,
.df-dashboard-metrics > *,
.df-dashboard-insights > div,
.df-templates-hero,
.df-template-create,
.df-template-library,
.df-usage-hero,
.df-usage-balance,
.df-usage-costs div,
.df-payment-hero,
.df-payment-checkout,
.df-payment-summary,
.df-payment-trust-strip span,
.df-payment-plan,
.df-payment-custom,
.df-admin-credit-settings,
.df-admin-users-table-card,
.df-admin-ledger,
.df-settings-main,
.df-settings-test,
.df-settings-recent,
.df-crm-header,
.df-crm-dock,
.df-crm-workspace,
.df-crm-fold,
.df-crm-table-card,
.df-crm-detail-panel,
.df-crm-metrics article {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 28px;
    background: rgba(255, 255, 255, .88);
    box-shadow: rgba(16, 35, 63, .06) 0 18px 42px;
    backdrop-filter: blur(16px);
}

.df-panel,
.df-dashboard-status-grid span,
.df-crm-toolbar,
.df-crm-selection-bar,
.df-crm-fold-grid section,
.df-empty-state,
.df-payment-custom {
    background: rgba(244, 248, 255, .78);
}

.df-public main:not(.df-home) .df-title,
.df-public main:not(.df-home) h1,
.df-client h1,
.df-client h2,
.df-client h3 {
    color: #10233f;
    font-family: var(--df-font-body);
    font-weight: 950;
    letter-spacing: -.055em;
    line-height: 1.02;
}

.df-public main:not(.df-home) .df-lead,
.df-public main:not(.df-home) p,
.df-client p {
    color: #5f7187;
}

.df-input,
select.df-input,
textarea.df-input {
    min-height: 46px;
    border: 1px solid rgba(16, 35, 63, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    color: #10233f;
    box-shadow: inset rgba(16, 35, 63, .035) 0 1px 0;
    font-weight: 750;
}

.df-input:focus,
select.df-input:focus,
textarea.df-input:focus {
    border-color: rgba(0, 104, 255, .55);
    outline: 4px solid rgba(0, 104, 255, .13);
}

.df-table-wrap,
.df-crm-table-scroll {
    overflow: auto;
    border-radius: 22px;
}

.df-table,
.df-crm-table {
    border-collapse: separate;
    border-spacing: 0;
    color: #10233f;
}

.df-table thead th,
.df-crm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f8ff;
    color: #667890;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.df-table tbody tr,
.df-crm-table tbody tr {
    background: rgba(255, 255, 255, .72);
}

.df-table tbody tr:hover,
.df-crm-table tbody tr:hover {
    background: #f8fbff;
}

.df-code,
.df-payment-terminal {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0, rgba(0, 163, 255, .20), transparent 18rem),
        linear-gradient(145deg, #0b172d, #132642);
    color: #f9fbff;
    box-shadow: rgba(16, 35, 63, .18) 0 20px 46px;
}

.df-app-main {
    padding-block: clamp(1.2rem, 3vw, 2.2rem) clamp(2rem, 5vw, 4rem);
}

.df-app-titlebar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.df-app-titlebar span {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(0, 104, 255, .13);
    border-radius: 999px;
    background: #edf6ff;
    color: #0068ff;
    padding: .34rem .68rem;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-app-titlebar h1 {
    margin-top: .35rem;
    font-size: clamp(2.1rem, 4vw, 3.55rem);
}

/* Public pages */
.df-demo,
.df-api,
.df-pricing {
    position: relative;
    isolation: isolate;
}

.df-demo::before,
.df-api::before,
.df-pricing::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 22rem;
    background:
        linear-gradient(rgba(0, 104, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 104, 255, .035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, black, transparent);
}

.df-demo-intro,
.df-pricing-summary {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 36px;
    background:
        radial-gradient(circle at 90% 18%, rgba(0, 163, 255, .16), transparent 22rem),
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(243, 248, 255, .78));
    box-shadow: rgba(16, 35, 63, .08) 0 26px 64px;
    padding: clamp(1.35rem, 4vw, 3rem);
}

.df-demo-intro h1,
.df-api-section:first-child h1,
.df-pricing-summary h1 {
    max-width: 12em;
    font-size: clamp(2.6rem, 6vw, 5.8rem);
}

.df-demo-stepbar {
    gap: .6rem;
}

.df-demo-stepbar span {
    border-color: rgba(16, 35, 63, .10);
    border-radius: 999px;
    background: white;
    box-shadow: rgba(16, 35, 63, .05) 0 10px 22px;
}

.df-demo-stepbar .df-demo-stepbar-active {
    border-color: rgba(0, 104, 255, .22);
    background: #edf6ff;
    color: #0068ff;
}

.df-demo-grid {
    align-items: stretch;
}

.df-demo-workbench,
.df-demo-output {
    border-radius: 32px;
}

.df-demo-editor {
    border-radius: 24px;
    overflow: hidden;
}

.df-demo-process {
    background: #f4f8ff;
}

.df-demo-file {
    border-radius: 20px;
    background: white;
}

.df-demo-paper-stage {
    background:
        radial-gradient(circle at 50% 0, rgba(0, 104, 255, .08), transparent 18rem),
        #edf2f9;
}

.df-demo-paper-stage > div {
    border-radius: 20px;
    box-shadow: rgba(16, 35, 63, .14) 0 22px 54px;
}

.df-demo-output {
    background:
        radial-gradient(circle at 100% 0, rgba(0, 184, 148, .10), transparent 14rem),
        rgba(255, 255, 255, .92);
}

.df-demo-pipeline span {
    border-radius: 999px;
    background: #f4f8ff;
    padding: .5rem .65rem .5rem 1.55rem;
}

.df-api-layout {
    grid-template-columns: 220px minmax(0, 1fr);
}

.df-api-sidebar {
    position: sticky;
    top: 98px;
    align-self: start;
    max-height: calc(100vh - 116px);
    overflow: auto;
    z-index: 3;
}

.df-api-sidebar nav {
    gap: .35rem;
    padding: .7rem;
}

.df-api-sidebar nav a {
    border-radius: 14px;
    padding: .72rem .85rem;
}

.df-api-section:first-child {
    background:
        radial-gradient(circle at 92% 16%, rgba(0, 184, 148, .11), transparent 19rem),
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(244, 248, 255, .78));
}

.df-api-content .df-panel {
    border-radius: 20px;
}

.df-pricing {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.df-pricing-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: 1.3rem;
}

.df-pricing-summary .df-lead {
    max-width: 46rem;
    font-size: 1.08rem;
}

.df-pricing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: flex-end;
}

.df-pricing-detail-grid {
    gap: 1rem;
}

.df-pricing-rate-card,
.df-pricing-topup-card {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
}

.df-pricing-rate-card::after,
.df-pricing-topup-card::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(0, 104, 255, .10);
}

.df-pricing-rate-primary {
    border-color: rgba(0, 104, 255, .18);
    background:
        radial-gradient(circle at 100% 0, rgba(0, 163, 255, .14), transparent 14rem),
        #ffffff;
}

.df-pricing-rate-card b,
.df-pricing-topup-card b {
    color: #10233f;
    font-size: clamp(2.05rem, 4vw, 3.2rem);
    letter-spacing: -.06em;
}

.df-pricing-topup-card {
    background:
        radial-gradient(circle at 90% 0, rgba(0, 163, 255, .30), transparent 18rem),
        linear-gradient(145deg, #0b172d, #132642);
    color: white;
}

.df-pricing-topup-card span,
.df-pricing-topup-card p,
.df-pricing-topup-card b {
    color: white;
}

.df-pricing-topup-card small {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .78);
}

.df-pricing-ledger {
    margin-top: 1rem;
    padding: 1.25rem;
}

.df-pricing-example-table {
    border-color: rgba(16, 35, 63, .10);
    border-radius: 22px;
}

.df-pricing-example-table > div:first-child {
    background: #f4f8ff;
}

.df-pricing-notes {
    gap: 1rem;
}

/* Client app */
.df-dashboard-hero,
.df-templates-hero,
.df-usage-hero,
.df-payment-hero {
    border-radius: 34px;
    background:
        radial-gradient(circle at 88% 18%, rgba(0, 163, 255, .16), transparent 20rem),
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(244, 248, 255, .76));
    padding: clamp(1.25rem, 3vw, 2rem);
}

.df-dashboard-hero h2,
.df-templates-hero h2,
.df-usage-hero h2,
.df-payment-hero h2 {
    max-width: 16em;
    font-size: clamp(1.75rem, 3vw, 2.65rem);
}

.df-dashboard-actions {
    align-items: center;
}

.df-dashboard-metrics .df-stat {
    position: relative;
    overflow: hidden;
    min-height: 8.2rem;
    padding: 1.05rem;
}

.df-dashboard-metrics .df-stat::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(0, 104, 255, .10);
}

.df-dashboard-insights > div,
.df-dashboard-status-grid span,
.df-usage-costs div,
.df-payment-breakdown div {
    border-radius: 20px;
    background: #f4f8ff;
}

.df-template-create,
.df-template-library,
.df-usage-balance,
.df-payment-checkout,
.df-payment-summary,
.df-card {
    padding: clamp(1rem, 2.4vw, 1.45rem);
}

.df-template-flow {
    align-self: stretch;
}

.df-template-flow span,
.df-template-row,
.df-upload-zone {
    border-color: rgba(16, 35, 63, .10);
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: rgba(16, 35, 63, .04) 0 10px 24px;
}

.df-template-doc-icon,
.df-upload-icon {
    border-radius: 16px;
    background: #edf6ff;
    color: #0068ff;
}

.df-usage-balance {
    background:
        radial-gradient(circle at 100% 0, rgba(0, 163, 255, .14), transparent 15rem),
        #ffffff;
}

.df-credit-amount {
    color: #10233f;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -.065em;
}

.df-usage-table {
    min-width: 900px;
}

.df-usage-table th,
.df-usage-table td {
    padding: .78rem .9rem;
    white-space: nowrap;
}

.df-usage-table td:last-child {
    white-space: normal;
}

.df-payment-card-preview,
.df-payment-terminal {
    background:
        radial-gradient(circle at 88% 4%, rgba(0, 163, 255, .32), transparent 16rem),
        linear-gradient(145deg, #0b172d, #132642);
}

.df-payment-trust-strip {
    gap: .65rem;
}

.df-payment-trust-strip span {
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #5f7187;
}

.df-payment-plan {
    min-height: 9.2rem;
    border-radius: 24px;
}

.df-payment-plan:hover,
.df-choice-active {
    border-color: rgba(0, 104, 255, .28) !important;
    background: #f8fbff !important;
    box-shadow: rgba(0, 104, 255, .13) 0 18px 38px !important;
}

.df-payment-plan b {
    color: #10233f;
    letter-spacing: -.06em;
}

.df-payments-grid aside {
    top: 96px;
}

/* Login */
.df-login-page {
    min-height: 100dvh;
    padding-top: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 14%, rgba(0, 104, 255, .18), transparent 24rem),
        radial-gradient(circle at 84% 70%, rgba(0, 184, 148, .12), transparent 22rem),
        linear-gradient(135deg, #ffffff, #f4f8ff);
}

.df-login-shell {
    min-height: 100dvh;
}

.df-login-copy-main h1 {
    color: #10233f;
    font-family: var(--df-font-body);
    letter-spacing: -.065em;
}

.df-login-card {
    border-radius: 34px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 163, 255, .11), transparent 15rem),
        rgba(255, 255, 255, .92);
    box-shadow: rgba(16, 35, 63, .12) 0 28px 78px;
}

.df-login-card .df-tab {
    border-radius: 999px;
    font-weight: 900;
}

.df-login-card .df-tab-active {
    background: #10233f;
    color: white;
}

.df-login-proof .df-panel {
    border-radius: 22px;
}

/* Admin and CRM */
.df-crm-header,
.df-crm-dock,
.df-crm-workspace,
.df-admin-credit-settings,
.df-settings-main {
    background:
        radial-gradient(circle at 95% 12%, rgba(0, 163, 255, .12), transparent 18rem),
        rgba(255, 255, 255, .92);
}

.df-crm-page {
    gap: 1rem;
}

.df-crm-header h2 {
    font-size: clamp(2rem, 3.4vw, 3.2rem);
}

.df-crm-metrics {
    gap: .8rem;
}

.df-crm-metrics article {
    min-height: 7.4rem;
    padding: 1rem;
}

.df-crm-metrics b {
    color: #10233f;
    letter-spacing: -.055em;
}

.df-crm-toolbar {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 24px;
    padding: .85rem;
}

.df-crm-table-card {
    overflow: hidden;
}

.df-crm-table th,
.df-crm-table td {
    padding-block: .72rem;
}

.df-crm-row-active {
    background: #edf6ff !important;
    box-shadow: inset 4px 0 0 #0068ff;
}

.df-crm-row-selected {
    background: #f8fbff !important;
}

.df-crm-company strong,
.df-crm-contact strong {
    color: #10233f;
}

.df-icon-button {
    min-width: 2.5rem;
    border-radius: 999px;
    border-color: rgba(16, 35, 63, .12);
    background: white;
}

.df-icon-button-primary {
    background: #0068ff;
    color: white;
    border-color: #0068ff;
}

.df-crm-detail-panel {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow: auto;
}

.df-crm-detail-head {
    align-items: start;
}

.df-crm-detail-tools {
    align-items: end;
}

.df-crm-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.df-crm-detail-actions .df-button-primary,
.df-crm-detail-actions .df-button-secondary {
    min-height: 2.65rem;
    padding-inline: .65rem;
    font-size: .82rem;
    white-space: nowrap;
}

.df-crm-detail-section {
    border-radius: 22px;
    background: #f8fbff;
}

.df-crm-draft {
    min-height: 13rem;
}

.df-admin-users-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.df-admin-users-scroll,
.df-settings-log-list,
.df-admin-ledger-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 104, 255, .32) transparent;
}

.df-admin-users-table th,
.df-admin-users-table td {
    padding: .62rem .7rem;
}

.df-admin-row-actions {
    flex-wrap: nowrap;
}

.df-settings-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
}

.df-settings-recent {
    max-height: calc(100vh - 106px);
    overflow: hidden;
}

.df-settings-log-list {
    max-height: min(520px, calc(100vh - 240px));
}

.df-settings-log-list article,
.df-admin-ledger-list article {
    border-radius: 18px;
    background: #f8fbff;
}

/* Shared motion for non-home screens. */
.df-page-ready .df-demo-intro,
.df-page-ready .df-demo-workbench,
.df-page-ready .df-demo-output,
.df-page-ready .df-api-section,
.df-page-ready .df-pricing-summary,
.df-page-ready .df-pricing-rate-card,
.df-page-ready .df-pricing-topup-card,
.df-page-ready .df-pricing-ledger,
.df-page-ready .df-pricing-notes > div,
.df-page-ready .df-dashboard-hero,
.df-page-ready .df-dashboard-metrics > *,
.df-page-ready .df-template-create,
.df-page-ready .df-template-library,
.df-page-ready .df-usage-hero,
.df-page-ready .df-usage-balance,
.df-page-ready .df-payment-hero,
.df-page-ready .df-payment-checkout,
.df-page-ready .df-payment-summary,
.df-page-ready .df-crm-header,
.df-page-ready .df-crm-metrics > *,
.df-page-ready .df-crm-workspace,
.df-page-ready .df-crm-dock,
.df-page-ready .df-settings-main,
.df-page-ready .df-settings-test,
.df-page-ready .df-settings-recent,
.df-page-ready .df-admin-users-table-card,
.df-page-ready .df-admin-ledger {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition:
        opacity .58s cubic-bezier(.2, .8, .2, 1),
        transform .58s cubic-bezier(.2, .8, .2, 1),
        box-shadow .2s ease,
        border-color .2s ease;
    transition-delay: calc(var(--df-reveal-index, 0) * 55ms);
}

.df-page-ready .df-demo-intro.df-in-view,
.df-page-ready .df-demo-workbench.df-in-view,
.df-page-ready .df-demo-output.df-in-view,
.df-page-ready .df-api-section.df-in-view,
.df-page-ready .df-pricing-summary.df-in-view,
.df-page-ready .df-pricing-rate-card.df-in-view,
.df-page-ready .df-pricing-topup-card.df-in-view,
.df-page-ready .df-pricing-ledger.df-in-view,
.df-page-ready .df-pricing-notes > div.df-in-view,
.df-page-ready .df-dashboard-hero.df-in-view,
.df-page-ready .df-dashboard-metrics > *.df-in-view,
.df-page-ready .df-template-create.df-in-view,
.df-page-ready .df-template-library.df-in-view,
.df-page-ready .df-usage-hero.df-in-view,
.df-page-ready .df-usage-balance.df-in-view,
.df-page-ready .df-payment-hero.df-in-view,
.df-page-ready .df-payment-checkout.df-in-view,
.df-page-ready .df-payment-summary.df-in-view,
.df-page-ready .df-crm-header.df-in-view,
.df-page-ready .df-crm-metrics > *.df-in-view,
.df-page-ready .df-crm-workspace.df-in-view,
.df-page-ready .df-crm-dock.df-in-view,
.df-page-ready .df-settings-main.df-in-view,
.df-page-ready .df-settings-test.df-in-view,
.df-page-ready .df-settings-recent.df-in-view,
.df-page-ready .df-admin-users-table-card.df-in-view,
.df-page-ready .df-admin-ledger.df-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.df-public > footer {
    border-top: 1px solid rgba(16, 35, 63, .08) !important;
    background: rgba(255, 255, 255, .84) !important;
}

@media (max-width: 1100px) {
    .df-pricing-summary,
    .df-payment-hero,
    .df-dashboard-hero,
    .df-templates-hero,
    .df-usage-hero {
        grid-template-columns: 1fr;
    }

    .df-payments-grid,
    .df-admin-users-layout,
    .df-settings-layout,
    .df-crm-main {
        grid-template-columns: 1fr;
    }

    .df-payments-grid aside,
    .df-admin-ledger,
    .df-crm-detail-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 820px) {
    .df-login-page {
        overflow: auto;
    }

    .df-login-shell {
        grid-template-columns: 1fr;
        align-content: start;
        padding-block: 1rem 2rem;
    }

    .df-login-copy-main {
        margin-top: 1.25rem;
    }

    .df-login-proof,
    .df-pricing-notes,
    .df-payment-breakdown,
    .df-crm-detail-actions {
        grid-template-columns: 1fr;
    }

    .df-demo-intro h1,
    .df-api-section:first-child h1,
    .df-pricing-summary h1 {
        font-size: clamp(2.25rem, 12vw, 3.7rem);
    }

    .df-api-layout {
        grid-template-columns: 1fr;
    }

    .df-api-sidebar {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .df-container {
        padding-inline: 14px;
    }

    .df-card,
    .df-panel,
    .df-demo-workbench,
    .df-demo-output,
    .df-pricing-summary,
    .df-pricing-rate-card,
    .df-pricing-topup-card,
    .df-dashboard-hero,
    .df-templates-hero,
    .df-usage-hero,
    .df-payment-hero,
    .df-crm-header,
    .df-crm-workspace,
    .df-crm-detail-panel {
        border-radius: 24px;
    }

    .df-pricing-actions,
    .df-dashboard-actions,
    .df-crm-header-actions {
        width: 100%;
    }

    .df-pricing-actions .df-button-primary,
    .df-pricing-actions .df-button-secondary,
    .df-dashboard-actions .df-button-primary,
    .df-dashboard-actions .df-button-secondary,
    .df-crm-header-actions .df-button-primary,
    .df-crm-header-actions .df-button-secondary {
        width: 100%;
    }
}

.df-public main:not(.df-home) .df-kicker,
.df-client .df-kicker,
.df-public main:not(.df-home) .df-badge,
.df-client .df-badge,
.df-public main:not(.df-home) [class*="text-[var(--df-blue)]"],
.df-client [class*="text-[var(--df-blue)]"] {
    color: #0068ff;
}

.df-public main:not(.df-home) .df-kicker,
.df-client .df-kicker {
    background: #edf6ff;
}

.df-demo-paper-stage p,
.df-demo-paper-stage .text-slate-700,
.df-demo-paper-stage .text-[var(--df-ink)] {
    color: #334155;
}

/* Professional polish pass: fixes Blazor-delayed renders and tightens app/payment/API surfaces. */
.df-page-ready .df-demo-intro,
.df-page-ready .df-demo-workbench,
.df-page-ready .df-demo-output,
.df-page-ready .df-api-section,
.df-page-ready .df-pricing-summary,
.df-page-ready .df-pricing-rate-card,
.df-page-ready .df-pricing-topup-card,
.df-page-ready .df-pricing-ledger,
.df-page-ready .df-pricing-notes > div,
.df-page-ready .df-dashboard-hero,
.df-page-ready .df-dashboard-metrics > *,
.df-page-ready .df-template-create,
.df-page-ready .df-template-library,
.df-page-ready .df-usage-hero,
.df-page-ready .df-usage-balance,
.df-page-ready .df-payment-hero,
.df-page-ready .df-payment-command,
.df-page-ready .df-payment-checkout,
.df-page-ready .df-payment-summary,
.df-page-ready .df-crm-header,
.df-page-ready .df-crm-metrics > *,
.df-page-ready .df-crm-workspace,
.df-page-ready .df-crm-dock,
.df-page-ready .df-settings-main,
.df-page-ready .df-settings-test,
.df-page-ready .df-settings-recent,
.df-page-ready .df-admin-users-table-card,
.df-page-ready .df-admin-ledger {
    opacity: 1 !important;
    transform: none !important;
}

.df-app-titlebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: .42rem;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(16, 35, 63, .09);
}

.df-app-titlebar h1 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3rem);
    letter-spacing: 0;
}

.df-app-titlebar span {
    order: -1;
}

.df-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
}

.df-dashboard-hero h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.35rem);
    letter-spacing: 0;
}

.df-dashboard-metrics {
    margin-top: 1rem !important;
}

.df-dashboard-metrics .df-stat {
    min-height: 7rem;
}

.df-dashboard-metrics .df-stat b,
.df-dashboard-metrics .df-stat strong {
    letter-spacing: 0;
}

/* Compact API documentation */
.df-api {
    padding-block: 1.35rem 3rem !important;
}

.df-api-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1rem;
}

.df-api-content {
    display: grid;
    gap: .9rem !important;
}

.df-api-section {
    padding: 1rem !important;
    border-radius: 24px;
}

.df-api-section:first-child {
    padding: 1.25rem !important;
}

.df-api-section:first-child h1 {
    max-width: 16em;
    font-size: clamp(2rem, 3.2vw, 3.15rem);
    letter-spacing: 0;
}

.df-api-section:first-child .df-lead {
    max-width: 58rem;
    font-size: 1rem !important;
}

.df-api-section h2 {
    font-size: 1.35rem !important;
    letter-spacing: 0;
}

.df-api-section .df-panel {
    padding: .9rem !important;
}

.df-api .df-code {
    max-height: 320px;
    font-size: .78rem;
    line-height: 1.52;
}

.df-api-sidebar nav {
    position: sticky;
    top: 92px;
    padding: .55rem;
}

.df-api-sidebar nav a {
    padding: .58rem .72rem;
    font-size: .86rem;
}

/* Private API key page */
.df-api-key-workspace {
    display: grid;
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    gap: 1rem;
    align-items: start;
}

.df-api-key-sidebar,
.df-api-key-docs {
    display: grid;
    gap: 1rem;
}

.df-api-key-sidebar {
    position: sticky;
    top: 92px;
}

.df-api-key-card {
    padding: 1rem !important;
    border-radius: 24px;
}

.df-api-key-card h2 {
    margin-top: .45rem;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.df-api-key-card p {
    margin-top: .45rem;
    font-size: .9rem;
    line-height: 1.5;
}

.df-api-key-card .df-code {
    max-height: 220px;
    font-size: .74rem;
}

.df-api-key-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .85rem;
}

.df-api-key-actions .df-button-secondary,
.df-api-key-actions .df-button-danger {
    min-height: 2.35rem;
    padding-inline: .65rem;
    font-size: .78rem;
}

.df-api-key-doc-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.df-api-key-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .9rem;
}

.df-api-key-flow > div,
.df-api-key-card .rounded-lg.border {
    border: 1px solid rgba(16, 35, 63, .10) !important;
    border-radius: 18px !important;
    background: #f7fbff;
    padding: .85rem !important;
}

.df-api-key-url {
    display: block;
    margin-top: .85rem;
    overflow: hidden;
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 16px;
    background: #f7fbff;
    padding: .82rem;
    color: #10233f;
    font-size: .82rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.df-api-key-costs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .7rem;
}

.df-api-key-costs div {
    border-radius: 16px;
    background: #f7fbff;
    padding: .75rem;
}

.df-api-key-costs span {
    display: block;
    color: #667890;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.df-api-key-costs b {
    display: block;
    margin-top: .2rem;
    color: #10233f;
}

/* Usage */
.df-usage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 1.35rem !important;
}

.df-usage-hero h2 {
    max-width: 18em;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    letter-spacing: 0;
}

.df-usage-balance {
    padding: 1.15rem !important;
}

.df-usage-label {
    color: #0068ff;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-credit-amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .32rem;
    font-size: clamp(2.55rem, 4.3vw, 3.55rem);
    line-height: .9;
    letter-spacing: 0;
}

.df-credit-amount span {
    font-size: clamp(1rem, 2vw, 1.45rem);
}

.df-usage-costs {
    gap: .75rem;
    margin-top: 1.15rem;
}

.df-usage-costs div {
    padding: .95rem;
}

.df-usage-table th,
.df-usage-table td {
    padding: .72rem .85rem;
}

/* Stripe-style payment experience */
.df-payment-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 1.25rem;
    align-items: center;
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 20%, rgba(0, 104, 255, .13), transparent 18rem),
        rgba(255, 255, 255, .92);
    box-shadow: rgba(16, 35, 63, .06) 0 18px 42px;
    padding: 1.25rem;
}

.df-payment-command h2 {
    max-width: 17em;
    margin-top: .6rem;
    color: #10233f;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.02;
}

.df-payment-command p:not(.df-kicker) {
    max-width: 54rem;
    margin-top: .65rem;
    color: #5f7187;
    line-height: 1.55;
}

.df-payment-card-preview {
    min-width: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 5%, rgba(0, 163, 255, .34), transparent 14rem),
        linear-gradient(145deg, #0b172d, #143a61);
    padding: 1.1rem;
    box-shadow: rgba(0, 104, 255, .18) 0 22px 46px;
}

.df-payment-card-preview span,
.df-payment-card-preview small {
    color: rgba(255, 255, 255, .70);
}

.df-payment-card-preview b {
    margin-top: 1.1rem;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: 0;
}

.df-payments-grid-pro {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.25rem;
}

.df-payment-panel,
.df-payment-summary-pro {
    padding: 1.15rem !important;
}

.df-payment-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.df-payment-section-head h2 {
    margin-top: .45rem;
    color: #10233f;
    font-size: 1.55rem;
    letter-spacing: 0;
}

.df-payment-section-head span:not(.df-badge) {
    display: block;
    margin-top: .3rem;
    color: #667890;
    font-size: .9rem;
}

.df-payment-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.df-payment-plan {
    display: grid;
    gap: .5rem;
    min-height: 0;
    border-radius: 22px;
    padding: 1rem;
}

.df-payment-plan span {
    color: #667890;
}

.df-payment-plan b {
    margin: 0;
    color: #10233f;
    font-size: 2.1rem;
    letter-spacing: 0;
}

.df-payment-plan small {
    margin: 0;
    color: #5f7187;
    font-size: .84rem;
    line-height: 1.35;
}

.df-payment-plan em {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: #edf6ff;
    color: #0068ff;
    padding: .28rem .5rem;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.df-payment-assurance-grid,
.df-payment-cost-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}

.df-payment-assurance-grid div,
.df-payment-cost-preview div {
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 18px;
    background: #f7fbff;
    padding: .85rem;
}

.df-payment-assurance-grid b,
.df-payment-cost-preview b,
.df-payment-assurance-grid span,
.df-payment-cost-preview span,
.df-payment-cost-preview small {
    display: block;
}

.df-payment-assurance-grid b,
.df-payment-cost-preview b {
    color: #10233f;
    font-weight: 950;
}

.df-payment-assurance-grid span,
.df-payment-cost-preview small {
    margin-top: .25rem;
    color: #667890;
    font-size: .82rem;
    line-height: 1.38;
}

.df-payment-cost-preview span {
    color: #667890;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.df-payment-cost-preview b {
    margin-top: .2rem;
    font-size: 1.25rem;
}

.df-payment-summary-pro {
    position: sticky;
    top: 92px;
    align-self: start;
    border-radius: 28px;
}

.df-payment-summary-top {
    border-radius: 24px;
    background:
        radial-gradient(circle at 95% 0, rgba(0, 163, 255, .34), transparent 14rem),
        linear-gradient(145deg, #0b172d, #143a61);
    color: white;
    padding: 1.1rem;
}

.df-payment-summary-top span,
.df-payment-summary-top small {
    display: block;
    color: rgba(255, 255, 255, .68);
    font-weight: 850;
}

.df-payment-summary-top b {
    display: block;
    margin-top: .8rem;
    color: white;
    font-size: 2.15rem;
    letter-spacing: 0;
}

.df-payment-lines {
    display: grid;
    margin-top: .95rem;
}

.df-payment-lines div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(16, 35, 63, .10);
    padding: .82rem 0;
}

.df-payment-lines span {
    color: #667890;
    font-weight: 800;
}

.df-payment-lines b {
    color: #10233f;
    font-weight: 950;
}

.df-payment-provider-note {
    margin-top: .85rem;
    border: 1px solid rgba(16, 35, 63, .10);
    border-radius: 18px;
    background: #f7fbff;
    padding: .85rem;
}

.df-payment-provider-note b,
.df-payment-provider-note span {
    display: block;
}

.df-payment-provider-note b {
    color: #10233f;
    font-size: .88rem;
    font-weight: 950;
}

.df-payment-provider-note span {
    margin-top: .25rem;
    color: #667890;
    font-size: .82rem;
    line-height: 1.4;
}

.df-payment-alert {
    border-radius: 16px;
}

#components-reconnect-modal:not(.components-reconnect-show):not(.components-reconnect-failed):not(.components-reconnect-rejected) {
    display: none !important;
}

@media (max-width: 1100px) {
    .df-api-key-workspace,
    .df-payment-command,
    .df-payments-grid-pro,
    .df-dashboard-hero,
    .df-usage-hero {
        grid-template-columns: 1fr;
    }

    .df-api-key-sidebar,
    .df-payment-summary-pro {
        position: static;
    }
}

@media (max-width: 760px) {
    .df-api-key-flow,
    .df-api-key-actions,
    .df-payment-plan-grid,
    .df-payment-assurance-grid,
    .df-payment-cost-preview,
    .df-api-key-costs {
        grid-template-columns: 1fr;
    }

    .df-payment-card-preview {
        width: 100%;
    }
}

.df-dashboard-metrics .df-stat::after {
    display: none;
}

.df-stat-icon {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    min-width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border: 1px solid rgba(0, 104, 255, .16);
    border-radius: 999px;
    background: linear-gradient(135deg, #edf6ff, #dcecff);
    color: #0068ff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: rgba(0, 104, 255, .10) 0 10px 20px;
}

.df-dashboard-metrics .df-stat p:last-of-type {
    padding-right: 2.9rem;
}