@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-600.ttf") format("truetype");
}

.admin-portal {
    display: grid;
    gap: 24px;
    width: min(80vw, 1880px);
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    padding: 18px 24px 80px;
    color: #06145b;
}

.admin-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(6, 20, 91, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.92)),
        linear-gradient(90deg, rgba(253, 97, 76, 0.12), rgba(99, 230, 177, 0.12));
    box-shadow: 0 24px 70px rgba(6, 20, 91, 0.08);
}

.admin-hero h1 {
    margin: 12px 0 10px;
    max-width: 840px;
    font-size: 46px;
    line-height: 1;
    letter-spacing: 0;
}

.admin-hero p {
    max-width: 760px;
    margin: 0;
    color: #61708d;
    font-size: 17px;
    line-height: 1.55;
}

.admin-date-filter,
.admin-filter-bar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-date-filter label {
    display: grid;
    gap: 6px;
    color: #61708d;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-date-filter input,
.admin-filter-bar input,
.admin-filter-bar select {
    min-height: 46px;
    border: 1px solid rgba(6, 20, 91, 0.14);
    border-radius: 10px;
    background: #fff;
    color: #06145b;
    font: inherit;
    font-weight: 700;
    padding: 0 14px;
    box-shadow: 0 12px 28px rgba(6, 20, 91, 0.05);
}

.admin-filter-bar {
    padding: 18px;
    border: 1px solid rgba(6, 20, 91, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.admin-filter-bar input[type="search"] {
    flex: 1 1 320px;
}

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    color: #61708d;
    font-weight: 800;
}

.admin-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border: 1px solid rgba(6, 20, 91, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 46px rgba(6, 20, 91, 0.06);
}

.admin-nav a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 10px;
    color: #61708d;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.admin-nav a.is-active,
.admin-nav a:hover {
    background: #06145b;
    color: #fff;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.admin-stat-card,
.admin-panel {
    border: 1px solid rgba(6, 20, 91, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 60px rgba(6, 20, 91, 0.07);
}

.admin-stat-card {
    min-height: 126px;
    padding: 18px;
}

.admin-stat-card span,
.admin-panel .eyebrow {
    display: block;
    color: #fd614c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-stat-card strong {
    display: block;
    margin-top: 12px;
    color: #06145b;
    font-size: 28px;
    line-height: 1;
}

.admin-stat-card p {
    margin: 10px 0 0;
    color: #61708d;
    font-size: 13px;
    font-weight: 750;
}

.admin-chart-grid,
.admin-grid-two,
.admin-signal-grid {
    display: grid;
    gap: 18px;
}

.admin-chart-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.admin-signal-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.admin-signals-panel {
    padding: 20px;
}

.admin-signals-panel .admin-panel-head {
    margin-bottom: 14px;
}

.admin-signal-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(6, 20, 91, 0.08);
}

.admin-signal-column {
    min-width: 0;
    padding: 16px 18px 0;
    border-left: 1px solid rgba(6, 20, 91, 0.08);
}

.admin-signal-column:first-child {
    border-left: 0;
    padding-left: 0;
}

.admin-signal-column:last-child {
    padding-right: 0;
}

.admin-signal-column-head {
    display: grid;
    gap: 4px;
    min-height: 72px;
}

.admin-signal-column-head span {
    color: #fd614c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-signal-column-head strong {
    color: #06145b;
    font-size: 18px;
    line-height: 1.08;
}

.admin-signal-column-head em {
    color: #61708d;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.admin-signal-list {
    display: grid;
}

.admin-signal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 11px 0;
    border-top: 1px solid rgba(6, 20, 91, 0.08);
    color: #06145b;
    text-decoration: none;
}

.admin-signal-row:hover strong {
    color: #fd614c;
}

.admin-signal-row span {
    min-width: 0;
}

.admin-signal-row strong,
.admin-signal-row em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-signal-row strong {
    color: #06145b;
    font-size: 14px;
    line-height: 1.2;
}

.admin-signal-row em {
    margin-top: 3px;
    color: #61708d;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.admin-signal-row b {
    justify-self: end;
    max-width: 120px;
    overflow: hidden;
    border-radius: 999px;
    padding: 5px 9px;
    color: #06145b;
    background: #f3f6fb;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-signal-empty {
    margin: 0;
    padding: 13px 0 0;
    border-top: 1px solid rgba(6, 20, 91, 0.08);
    color: #61708d;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.admin-panel {
    padding: 22px;
    min-width: 0;
}

.admin-panel-large {
    min-height: 390px;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-panel-head h2,
.admin-panel h2 {
    margin: 8px 0 0;
    color: #06145b;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: 0;
}

.admin-panel-head > span,
.admin-panel-head a {
    color: #61708d;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.admin-panel-head a:hover,
.admin-inline-link:hover,
.admin-table a:hover {
    color: #fd614c;
}

.admin-chart {
    width: 100%;
    height: 320px;
}

.admin-chart-small {
    height: 300px;
}

.admin-chart-compact {
    height: 230px;
}

.admin-operations-grid {
    align-items: start;
}

.admin-activity-panel,
.admin-feed-panel {
    padding: 20px;
}

.admin-activity-panel .admin-panel-head,
.admin-feed-panel .admin-panel-head {
    margin-bottom: 14px;
}

.admin-activity-panel .admin-chart-compact {
    height: 178px;
    margin-top: 12px;
}

.admin-activity-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-activity-summary span {
    min-width: 0;
    border: 1px solid rgba(6, 20, 91, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    color: #61708d;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 850;
}

.admin-activity-summary strong {
    display: block;
    margin-bottom: 3px;
    color: #06145b;
    font-size: 19px;
    line-height: 1;
}

.admin-mini-list,
.admin-event-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.admin-mini-list a,
.admin-mini-list > span,
.admin-event-row {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(6, 20, 91, 0.09);
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #f8fbff);
    color: #06145b;
    text-decoration: none;
}

.admin-mini-list a:hover,
.admin-event-row:hover {
    border-color: rgba(253, 97, 76, 0.35);
    box-shadow: 0 14px 36px rgba(253, 97, 76, 0.1);
}

.admin-mini-list strong,
.admin-event-row strong {
    color: #06145b;
    font-size: 15px;
}

.admin-mini-list span,
.admin-event-row em,
.admin-event-row time {
    color: #61708d;
    font-size: 13px;
    font-style: normal;
    font-weight: 750;
}

.admin-event-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
}

.admin-event-row > span:nth-child(2) {
    min-width: 0;
}

.admin-event-list-compact {
    gap: 0;
    margin-top: 6px;
}

.admin-event-list-compact .admin-event-row {
    grid-template-columns: 10px minmax(0, 1fr) max-content;
    gap: 10px;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid rgba(6, 20, 91, 0.08);
    border-radius: 0;
    padding: 10px 0;
    background: transparent;
}

.admin-event-list-compact .admin-event-row:last-child {
    border-bottom: 0;
}

.admin-event-list-compact .admin-event-row:hover {
    box-shadow: none;
    border-color: rgba(6, 20, 91, 0.08);
}

.admin-event-list-compact .admin-event-row strong,
.admin-event-list-compact .admin-event-row em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-event-list-compact .admin-event-row strong {
    font-size: 14px;
}

.admin-event-list-compact .admin-event-row em,
.admin-event-list-compact .admin-event-row time {
    font-size: 12px;
}

.admin-event-list-compact .admin-event-dot {
    width: 8px;
    height: 8px;
}

.admin-event-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #8da0bf;
}

.admin-event-dot-info {
    background: #63e6b1;
}

.admin-event-dot-warning {
    background: #ffb14a;
}

.admin-event-dot-critical {
    background: #fd614c;
}

.admin-empty,
.admin-mini-list p {
    margin: 0;
    color: #61708d;
    font-weight: 750;
}

.admin-table-panel {
    overflow-x: auto;
    padding: 0;
}

.admin-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(6, 20, 91, 0.08);
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #61708d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-table td {
    color: #06145b;
    font-size: 14px;
    font-weight: 750;
}

.admin-table a {
    color: #06145b;
    text-decoration: none;
}

.admin-table td span {
    display: block;
    margin-top: 4px;
    color: #61708d;
    font-size: 12px;
    word-break: break-word;
}

.admin-table-primary {
    font-weight: 900;
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(6, 20, 91, 0.1);
    border-radius: 999px;
    background: #f5f8ff;
    color: #06145b;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.admin-table td .admin-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 0;
    vertical-align: middle;
}

.admin-source-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(6, 20, 91, 0.1);
    border-radius: 999px;
    background: #f5f8ff;
    color: #06145b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.admin-table td .admin-source-pill {
    display: inline-flex;
    margin-top: 0;
}

.admin-source-google {
    border-color: rgba(66, 133, 244, 0.22);
    background: #edf4ff;
    color: #1759c8;
}

.admin-source-chatgpt {
    border-color: rgba(16, 163, 127, 0.24);
    background: #eafff8;
    color: #087a61;
}

.admin-source-perplexity {
    border-color: rgba(32, 178, 170, 0.26);
    background: #eafffd;
    color: #087a82;
}

.admin-source-claude {
    border-color: rgba(189, 95, 45, 0.22);
    background: #fff3ea;
    color: #9a4f21;
}

.admin-source-bing {
    border-color: rgba(0, 120, 212, 0.24);
    background: #eef8ff;
    color: #0964a9;
}

.admin-source-duckduckgo {
    border-color: rgba(222, 88, 51, 0.24);
    background: #fff0eb;
    color: #b13c1c;
}

.admin-source-gemini {
    border-color: rgba(122, 92, 255, 0.24);
    background: #f2efff;
    color: #5940ca;
}

.admin-source-yahoo {
    border-color: rgba(94, 39, 191, 0.22);
    background: #f3efff;
    color: #5e27bf;
}

.admin-source-reddit {
    border-color: rgba(255, 69, 0, 0.22);
    background: #fff1ec;
    color: #c83d13;
}

.admin-source-linkedin {
    border-color: rgba(10, 102, 194, 0.22);
    background: #eef6ff;
    color: #0a66c2;
}

.admin-source-facebook,
.admin-source-x,
.admin-source-instagram {
    border-color: rgba(6, 20, 91, 0.18);
    background: #f0f4ff;
    color: #263d91;
}

.admin-source-unknown,
.admin-source-other {
    border-color: rgba(97, 112, 141, 0.18);
    background: #f7f9fc;
    color: #61708d;
}

.admin-pill-completed,
.admin-pill-info {
    background: #ecfff7;
    color: #147a52;
}

.admin-pill-refunded,
.admin-pill-warning {
    background: #fff6e8;
    color: #9a5d0a;
}

.admin-pill-failed,
.admin-pill-critical {
    background: #fff0ee;
    color: #b22a1f;
}

.admin-detail-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
}

.admin-detail-list div {
    display: grid;
    grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(6, 20, 91, 0.08);
}

.admin-detail-list dt {
    color: #61708d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-detail-list dd {
    margin: 0;
    color: #06145b;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-detail-list a {
    color: #06145b;
    text-decoration: none;
}

.admin-json {
    max-height: 520px;
    overflow: auto;
    margin: 18px 0 0;
    padding: 18px;
    border-radius: 12px;
    background: #071047;
    color: #f7f9ff;
    font-size: 13px;
    line-height: 1.55;
}

.admin-runtime-note {
    margin: 0;
    color: #657089;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.5;
}

.admin-runtime-table td:first-child span {
    display: block;
    margin-top: 4px;
    color: #657089;
    font-size: 12px;
    font-weight: 800;
}

.admin-runtime-table code {
    overflow-wrap: anywhere;
}

.admin-inline-link {
    color: #06145b;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1180px) {
    .admin-stat-grid,
    .admin-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-chart-grid-main,
    .admin-grid-two {
        grid-template-columns: 1fr;
    }

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

    .admin-signal-column {
        border-left: 0;
        border-top: 1px solid rgba(6, 20, 91, 0.08);
        padding: 16px 0 0;
    }

    .admin-signal-column:nth-child(-n + 2) {
        border-top: 0;
    }

    .admin-signal-column:nth-child(odd) {
        padding-right: 14px;
    }

    .admin-signal-column:nth-child(even) {
        border-left: 1px solid rgba(6, 20, 91, 0.08);
        padding-left: 14px;
    }
}

@media (max-width: 760px) {
    .admin-portal {
        width: 100%;
        max-width: 100%;
        padding: 14px 14px 56px;
    }

    .admin-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .admin-hero h1 {
        font-size: 36px;
    }

    .admin-date-filter,
    .admin-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-date-filter input,
    .admin-filter-bar input,
    .admin-filter-bar select,
    .admin-filter-bar .button {
        width: 100%;
    }

    .admin-stat-grid,
    .admin-signal-grid {
        grid-template-columns: 1fr;
    }

    .admin-activity-summary {
        grid-template-columns: 1fr;
    }

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

    .admin-signal-column,
    .admin-signal-column:nth-child(odd),
    .admin-signal-column:nth-child(even) {
        border-left: 0;
        border-top: 1px solid rgba(6, 20, 91, 0.08);
        padding: 16px 0 0;
    }

    .admin-signal-column:first-child {
        border-top: 0;
    }

    .admin-panel {
        padding: 18px;
    }

    .admin-event-row {
        grid-template-columns: 12px minmax(0, 1fr);
    }

    .admin-event-row time {
        grid-column: 2;
    }

    .admin-detail-list div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-700.ttf") format("truetype");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-800.ttf") format("truetype");
}

:root {
    --navy: #01094b;
    --navy-soft: #141d62;
    --coral: #fd614c;
    --coral-strong: #eb4b38;
    --coral-soft: #fff0ed;
    --lemon: #ffe66d;
    --mint: #dff8e7;
    --sky: #eaf3ff;
    --ink-muted: #5f6885;
    --line: rgba(1, 9, 75, 0.11);
    --shadow: 0 24px 70px rgba(1, 9, 75, 0.12);
    --shadow-soft: 0 18px 45px rgba(1, 9, 75, 0.08);
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Plus Jakarta Sans", var(--font-body);
    font-family: var(--font-body);
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--navy);
    background:
        linear-gradient(180deg, #ffffff 0%, #f7faff 46%, #fff7f5 100%);
    font-size: 16px;
    line-height: 1.5;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(1, 9, 75, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 72%);
    pointer-events: none;
}

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

button,
input {
    font: inherit;
}

[hidden] {
    display: none !important;
}

.page-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.background-shapes {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    display: block;
    border: 1px solid rgba(1, 9, 75, 0.07);
}

.shape-ribbon {
    top: 112px;
    right: -230px;
    width: 820px;
    height: 148px;
    border-radius: 8px;
    background: linear-gradient(105deg, rgba(234, 243, 255, 0.95), rgba(255, 240, 237, 0.96) 54%, rgba(253, 97, 76, 0.24));
    transform: rotate(-12deg);
    box-shadow: 0 26px 70px rgba(1, 9, 75, 0.08);
}

.shape-slab {
    left: -150px;
    bottom: 96px;
    width: 420px;
    height: 240px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(234, 243, 255, 0.95), rgba(223, 248, 231, 0.84));
    transform: rotate(14deg);
}

.shape-track {
    top: 42%;
    left: 58%;
    width: 640px;
    height: 22px;
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.045);
    transform: rotate(18deg);
}

.shape-card {
    top: 64%;
    right: 8%;
    width: 168px;
    height: 104px;
    border-radius: 20px;
    background: rgba(253, 97, 76, 0.08);
    transform: rotate(-10deg);
}

.site-header {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 12px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
}

.brand-logo {
    display: block;
    width: auto;
    height: 38px;
    object-fit: contain;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 12px 26px rgba(1, 9, 75, 0.18);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--navy-soft);
    font-size: 14px;
    font-weight: 700;
}

.site-nav form {
    margin: 0;
}

.nav-drawer-head {
    display: none;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 30px rgba(1, 9, 75, 0.08);
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--navy);
    transition: transform 160ms ease, opacity 160ms ease;
}

.nav-toggle span:nth-child(1) {
    transform: translateY(-6px);
}

.nav-toggle span:nth-child(3) {
    transform: translateY(6px);
}

.site-header.is-nav-open .nav-toggle span:nth-child(1) {
    transform: rotate(45deg);
}

.site-header.is-nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.is-nav-open .nav-toggle span:nth-child(3) {
    transform: rotate(-45deg);
}

.nav-link,
.nav-button,
.header-cta,
.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-link,
.nav-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--navy-soft);
    cursor: pointer;
}

.nav-link:hover,
.nav-button:hover {
    background: rgba(1, 9, 75, 0.05);
}

.nav-account-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.nav-account-trigger {
    gap: 7px;
}

.nav-account-trigger svg {
    width: 15px;
    height: 15px;
    transition: transform 160ms ease;
}

.nav-account-menu:hover .nav-account-trigger svg,
.nav-account-menu:focus-within .nav-account-trigger svg {
    transform: rotate(180deg);
}

.nav-account-dropdown {
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    z-index: 12;
    display: grid;
    min-width: 210px;
    gap: 4px;
    visibility: hidden;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 8px;
    background:
        radial-gradient(circle at 16% 0%, rgba(253, 97, 76, 0.09), transparent 38%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 54px rgba(1, 9, 75, 0.14);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.nav-account-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    left: 0;
    height: 14px;
}

.nav-account-menu:hover .nav-account-dropdown,
.nav-account-menu:focus-within .nav-account-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-account-dropdown a {
    display: flex;
    min-height: 38px;
    align-items: center;
    border-radius: 7px;
    padding: 9px 10px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850;
}

.nav-account-dropdown a:hover {
    background: rgba(1, 9, 75, 0.055);
}

.header-cta,
.button-primary {
    border: 1px solid var(--coral);
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 14px 34px rgba(253, 97, 76, 0.28);
}

.button-secondary {
    border: 1px solid rgba(1, 9, 75, 0.13);
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 30px rgba(1, 9, 75, 0.06);
}

.header-cta:hover,
.button:hover {
    transform: translateY(-1px);
}

.page-main {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 44px 0 72px;
}

.page-main:has(.admin-portal) {
    width: 100%;
    max-width: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 52px;
    align-items: center;
    padding: 34px 0 54px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--coral);
}

.hero-title {
    max-width: 660px;
    margin: 0;
    color: var(--navy);
    font-size: 64px;
    line-height: 0.98;
    font-weight: 850;
}

.hero-copy {
    max-width: 590px;
    margin: 22px 0 0;
    color: var(--ink-muted);
    font-size: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 640px;
    margin-top: 32px;
}

.trust-item {
    position: relative;
    border-top: 1px solid rgba(1, 9, 75, 0.09);
    padding-top: 16px;
}

.trust-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--mint));
}

.trust-item strong {
    display: block;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.trust-item span {
    display: block;
    margin-top: 7px;
    color: var(--ink-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.product-preview,
.auth-panel,
.auth-aside,
.dashboard-panel,
.metric-card {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.product-preview {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    padding: 0;
}

.product-preview::before {
    content: "";
    position: absolute;
    top: 68px;
    right: -46px;
    width: 290px;
    height: 76px;
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.15), rgba(255, 230, 109, 0.24));
    transform: rotate(-15deg);
}

.checkout-preview {
    display: grid;
    align-items: stretch;
    overflow: visible;
    border-color: transparent;
    color: var(--navy);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    perspective: 1400px;
}

.checkout-preview::before {
    display: none;
}

.checkout-preview::after {
    display: none;
}

.checkout-preview-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
    padding: 18px;
}

.checkout-showcase {
    position: relative;
    z-index: 1;
    min-height: 540px;
    padding: 24px;
    transform-style: preserve-3d;
}

.checkout-showcase::before,
.checkout-showcase::after {
    content: "";
    position: absolute;
    z-index: 0;
    border: 0;
    pointer-events: none;
}

.checkout-showcase::before {
    top: 116px;
    right: 2px;
    width: 520px;
    height: 360px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(253, 97, 76, 0.16), transparent 60%),
        radial-gradient(circle at 70% 42%, rgba(141, 224, 180, 0.16), transparent 58%),
        radial-gradient(circle at 42% 62%, rgba(1, 9, 75, 0.16), transparent 62%);
    filter: blur(24px);
    transform: rotate(-7deg) translateZ(-180px);
}

.checkout-showcase::after {
    top: 42px;
    right: 80px;
    width: 260px;
    height: 84px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.68), rgba(255, 230, 109, 0.48));
    opacity: 0.72;
    filter: blur(0.2px);
    transform: rotate(-14deg) translateZ(-60px);
}

.showcase-site-card,
.checkout-window,
.checkout-float-chip {
    position: absolute;
}

.showcase-site-card,
.checkout-window,
.checkout-float-chip {
    z-index: 2;
}

.showcase-site-card {
    top: 88px;
    left: 36px;
    width: 258px;
    min-height: 286px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 20px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 54px rgba(1, 9, 75, 0.22);
    transform: rotate(-3deg);
    backdrop-filter: blur(18px);
}

.showcase-site-card h2 {
    margin: 28px 0 10px;
    color: var(--navy);
    font-size: 30px;
    line-height: 0.98;
}

.showcase-site-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.showcase-site-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding-bottom: 14px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.showcase-badge {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 10px 22px rgba(1, 9, 75, 0.2);
}

.checkout-window {
    top: 8px;
    right: -2px;
    width: min(430px, calc(100% - 52px));
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 18px;
    padding: 22px;
    color: var(--navy);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)),
        radial-gradient(circle at 88% 7%, rgba(141, 224, 180, 0.22), transparent 34%),
        radial-gradient(circle at 10% 8%, rgba(253, 97, 76, 0.1), transparent 32%);
    box-shadow:
        0 54px 110px rgba(1, 9, 75, 0.2),
        0 18px 44px rgba(253, 97, 76, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: rotateX(6deg) rotateY(-13deg) rotateZ(1deg) translateZ(90px);
    transform-origin: 50% 62%;
    transition: transform 180ms ease, box-shadow 180ms ease;
    animation: checkout-drift 7s ease-in-out infinite;
    backdrop-filter: blur(24px);
}

.checkout-showcase.is-active .checkout-window {
    transform: rotateX(5deg) rotateY(-11deg) rotateZ(0.6deg) translateY(-8px) translateZ(118px) scale(1.02);
    box-shadow:
        0 54px 110px rgba(1, 9, 75, 0.26),
        0 18px 44px rgba(253, 97, 76, 0.1);
}

.checkout-window .checkout-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.checkout-window .checkout-modal-top span,
.checkout-window .checkout-modal-top strong {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.checkout-window .checkout-modal-top span {
    gap: 7px;
    color: var(--coral-strong);
}

.checkout-window .checkout-modal-top strong {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.06);
}

.checkout-hero-lock {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkout-window h2 {
    max-width: 330px;
    margin: 18px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 32px;
    line-height: 0.98;
    letter-spacing: 0;
}

.checkout-summary {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 14px;
    margin-top: 18px;
    padding: 13px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.06);
}

.checkout-summary-art {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 230, 109, 0.5), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--coral));
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(1, 9, 75, 0.18);
}

.checkout-summary strong,
.checkout-summary span {
    display: block;
}

.checkout-summary strong {
    font-size: 16px;
    line-height: 1.08;
}

.checkout-summary span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 750;
}

.checkout-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.checkout-summary-pills em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid rgba(32, 183, 122, 0.22);
    border-radius: 999px;
    padding: 0 8px;
    color: #196348;
    background: rgba(141, 224, 180, 0.18);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.checkout-form-preview {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    margin-top: 14px;
    padding-top: 14px;
    color: var(--navy);
    font-size: 22px;
    font-weight: 950;
}

.checkout-primary-action {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    margin-top: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 18px 38px rgba(253, 97, 76, 0.26);
    font-size: 18px;
    font-weight: 950;
}

.checkout-note {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    margin: 10px 0 0;
    color: var(--ink-muted);
    background: transparent;
    font-size: 11.5px;
    font-weight: 850;
    text-align: center;
}

.checkout-window-dark {
    border-color: rgba(102, 227, 167, 0.34);
    color: #ffffff;
    background:
        linear-gradient(rgba(95, 165, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 165, 255, 0.055) 1px, transparent 1px),
        radial-gradient(circle at 84% 6%, rgba(76, 201, 240, 0.2), transparent 34%),
        radial-gradient(circle at 12% 8%, rgba(253, 97, 76, 0.18), transparent 34%),
        linear-gradient(145deg, #071038, #0b1647 58%, #071033);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    box-shadow:
        0 58px 118px rgba(1, 9, 75, 0.34),
        0 0 0 1px rgba(102, 227, 167, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.checkout-window-dark .checkout-modal-top span,
.checkout-window-dark .checkout-modal-top strong,
.checkout-window-dark h2,
.checkout-window-dark .checkout-summary strong,
.checkout-window-dark .checkout-price,
.checkout-window-dark .fake-input,
.checkout-window-dark .checkout-total-row {
    color: #ffffff;
}

.checkout-window-dark .checkout-modal-top span {
    color: #8df0c7;
}

.checkout-window-dark .checkout-modal-top strong {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.checkout-window-dark .checkout-summary {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.checkout-window-dark .checkout-summary span,
.checkout-window-dark .field-row label,
.checkout-window-dark .checkout-card-input em,
.checkout-window-dark .checkout-note {
    color: rgba(255, 255, 255, 0.68);
}

.checkout-window-dark .checkout-summary-pills em {
    border-color: rgba(141, 240, 199, 0.3);
    color: #d8fff1;
    background: rgba(141, 240, 199, 0.13);
}

.checkout-window-dark .fake-input {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.12);
}

.checkout-window-dark .checkout-total-row {
    border-top-color: rgba(255, 255, 255, 0.14);
    margin-top: 18px;
}

.checkout-window-bebas h2,
.checkout-window-bebas .checkout-summary strong,
.checkout-window-bebas .checkout-primary-action {
    font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    letter-spacing: 0.02em;
}

.checkout-window-bebas h2 {
    font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important;
    font-size: 42px;
    font-weight: 400;
    text-transform: uppercase;
}

.checkout-window-bebas .checkout-summary strong {
    font-size: 23px;
    font-weight: 400;
}

.checkout-window-bebas .checkout-primary-action {
    font-size: 28px;
    font-weight: 400;
}

.hero-cursor {
    position: absolute;
    right: 82px;
    bottom: 4px;
    z-index: 7;
    width: 58px;
    height: 76px;
    background: rgba(1, 9, 75, 0.28);
    clip-path: polygon(0 0, 0 72%, 18% 56%, 31% 94%, 47% 88%, 33% 51%, 61% 51%);
    filter: drop-shadow(0 18px 22px rgba(1, 9, 75, 0.18));
    transform: rotate(-18deg) translateZ(240px);
    animation: cursor-drift 4.8s ease-in-out infinite;
}

.hero-cursor::before {
    content: "";
    position: absolute;
    inset: 3px 4px 5px 3px;
    background: #ffffff;
    clip-path: polygon(0 0, 0 72%, 18% 56%, 31% 94%, 47% 88%, 33% 51%, 61% 51%);
}

.checkout-float-chip {
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 34px rgba(1, 9, 75, 0.2);
    backdrop-filter: blur(16px);
    font-size: 12px;
    font-weight: 850;
}

.checkout-float-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--coral);
}

.chip-files {
    left: 42px;
    bottom: 36px;
}

.chip-keys {
    left: 40px;
    bottom: 116px;
}

@keyframes checkout-drift {
    0%,
    100% {
        transform: rotateX(6deg) rotateY(-13deg) rotateZ(1deg) translateY(0) translateZ(90px);
    }

    50% {
        transform: rotateX(7deg) rotateY(-11deg) rotateZ(0.2deg) translateY(-14px) translateZ(104px);
    }
}

@keyframes cursor-drift {
    0%,
    100% {
        transform: rotate(-18deg) translate(0, 0) translateZ(240px);
    }

    50% {
        transform: rotate(-15deg) translate(-8px, 8px) translateZ(252px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-window,
    .hero-cursor,
    .download-card,
    .growth-feed,
    .brand-story-art img,
    .delivery-confidence-art img,
    .features-hero-art img,
    .features-hero-art::before,
    .calm-proof-grid article::before,
    .feature-depth-grid article::before {
        animation: none;
    }
}

.embed-code-card,
.merchant-card,
.checkout-placeholder,
.checkout-demo-modal {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

.embed-code-card {
    overflow: hidden;
}

.embed-code-card .preview-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    padding: 13px 14px;
}

.embed-code-card pre {
    margin: 0;
    padding: 16px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(0, 0, 0, 0.18);
    font: 700 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    overflow: hidden;
    white-space: pre-wrap;
}

.code-accent {
    color: #ffd4ce;
}

.checkout-preview-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
    gap: 14px;
    align-items: start;
}

.merchant-card {
    min-height: 280px;
    padding: 18px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    transform: translateY(8px);
}

.merchant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding-bottom: 14px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 800;
}

.merchant-logo {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--navy);
}

.merchant-card h2 {
    max-width: 260px;
    margin: 24px 0 8px;
    color: var(--navy);
    font-size: 28px;
    line-height: 1.02;
}

.merchant-card p {
    max-width: 300px;
    margin: 0 0 18px;
    color: var(--ink-muted);
    font-size: 14px;
}

.embed-buy-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 12px 16px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 14px 30px rgba(253, 97, 76, 0.36);
    cursor: pointer;
    font-weight: 850;
}

.embed-buy-button:hover {
    transform: translateY(-1px);
}

.checkout-placeholder {
    min-height: 280px;
    padding: 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(34px);
}

.checkout-placeholder .checkout-pay-button {
    background: rgba(1, 9, 75, 0.74);
}

.checkout-demo-modal {
    position: absolute;
    top: 22px;
    right: 0;
    width: min(300px, 100%);
    padding: 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 70px rgba(1, 9, 75, 0.34);
}

.checkout-demo-modal::before {
    content: "";
    position: absolute;
    inset: -900px;
    z-index: -1;
    background: rgba(1, 9, 75, 0.26);
    backdrop-filter: blur(2px);
}

.checkout-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.checkout-modal-top strong {
    font-size: 14px;
}

.checkout-close {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    color: var(--navy);
    background: #ffffff;
    cursor: pointer;
    font-weight: 900;
}

.checkout-product {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 10px;
    background: #fbfcff;
}

.checkout-product-art {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--navy), var(--coral));
    font-weight: 900;
}

.checkout-product strong,
.checkout-product span {
    display: block;
}

.checkout-product strong {
    font-size: 13px;
}

.checkout-product span,
.field-row label {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 750;
}

.checkout-price {
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
}

.checkout-fields {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.field-row {
    display: grid;
    gap: 6px;
}

.checkout-window .field-row label {
    color: #657089;
    font-size: 12px;
    font-weight: 900;
}

.fake-input {
    min-height: 46px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 12px;
    padding: 12px 13px;
    color: var(--navy);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 252, 255, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 24px rgba(1, 9, 75, 0.04);
    font-size: 13px;
    font-weight: 900;
}

.checkout-card-input {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.checkout-card-input strong,
.checkout-card-input em {
    font-size: 13px;
    line-height: 1;
}

.checkout-card-input em {
    color: #8a93aa;
    font-style: normal;
    font-weight: 950;
}

.checkout-card-brand {
    position: relative;
    display: block;
    width: 32px;
    height: 22px;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(1, 9, 75, 0.12), rgba(1, 9, 75, 0.05)),
        linear-gradient(135deg, rgba(253, 97, 76, 0.86), rgba(255, 230, 109, 0.8));
}

.checkout-card-brand::before,
.checkout-card-brand::after {
    content: "";
    position: absolute;
    left: 6px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.checkout-card-brand::before {
    top: 6px;
    width: 8px;
}

.checkout-card-brand::after {
    bottom: 6px;
    width: 18px;
}

.checkout-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 10px;
    color: #657089;
    font-size: 12px;
    font-weight: 900;
}

.checkout-discount-row strong {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 5px 8px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
}

.checkout-pay-button {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-top: 14px;
    color: #ffffff;
    background: var(--navy);
    font-size: 14px;
    font-weight: 900;
}

.embed-delivery-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.embed-delivery-strip span {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 12px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.09);
    font-size: 12px;
    font-weight: 750;
}

.embed-delivery-strip strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
}

.preview-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
}

.traffic {
    display: flex;
    gap: 7px;
}

.traffic span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--coral);
}

.traffic span:nth-child(2) {
    background: var(--lemon);
}

.traffic span:nth-child(3) {
    background: #8de0b4;
}

.preview-pill {
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--navy-soft);
    background: rgba(1, 9, 75, 0.06);
    font-size: 12px;
    font-weight: 800;
}

.preview-body {
    position: relative;
    padding: 24px 0 4px;
}

.preview-title {
    margin: 0 0 20px;
    font-size: 26px;
    line-height: 1.15;
}

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

.metric-mini {
    min-height: 112px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #ffffff;
}

.metric-mini span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 700;
}

.metric-mini strong {
    display: block;
    margin-top: 18px;
    font-size: 27px;
    line-height: 1;
}

.sparkline {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 38px;
    margin-top: 10px;
}

.sparkline i {
    display: block;
    width: 100%;
    min-width: 8px;
    border-radius: 6px 6px 2px 2px;
    background: var(--coral);
}

.workflow-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.workflow-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.workflow-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: var(--navy);
    background: var(--coral-soft);
    font-weight: 900;
}

.workflow-item strong {
    display: block;
    font-size: 14px;
}

.workflow-item span {
    color: var(--ink-muted);
    font-size: 13px;
}

.status-chip {
    border-radius: 999px;
    padding: 7px 10px;
    color: #24553a;
    background: var(--mint);
    font-size: 12px;
    font-weight: 800;
}

.checkout-preview .workflow-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.checkout-preview .workflow-item {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    background: rgba(255, 255, 255, 0.94);
}

.checkout-preview .status-chip {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(1, 9, 75, 0.09);
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    margin: 4px 0 18px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(234, 243, 255, 0.58), rgba(255, 240, 237, 0.6));
}

.proof-strip div {
    min-height: 92px;
    border-right: 1px solid rgba(1, 9, 75, 0.08);
    padding: 18px 20px;
}

.proof-strip div:last-child {
    border-right: 0;
}

.proof-strip span,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.proof-strip span {
    color: var(--ink-muted);
}

.proof-strip strong {
    display: block;
    margin-top: 8px;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.15;
}

.section-kicker::before {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.section-kicker-light {
    color: #ffd4ce;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.section-heading h2,
.catalog-copy h2,
.growth-copy h2,
.license-copy h2,
.landing-cta h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.04;
}

.section-heading p,
.catalog-copy p,
.growth-copy p,
.license-copy p,
.landing-cta p {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
}

.brand-story-section,
.delivery-confidence-section {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1fr);
    gap: 54px;
    align-items: center;
    padding: 72px 0;
}

.brand-story-copy h2,
.calm-proof-section h2,
.delivery-confidence-section h2,
.feature-depth-head h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.04;
}

.brand-story-copy p,
.calm-proof-section p,
.delivery-confidence-section p,
.feature-depth-head p {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 1.55;
}

.brand-story-points {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.brand-story-points div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.05);
}

.brand-story-points div::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--coral), var(--lemon), #8de0b4);
}

.brand-story-points strong,
.delivery-confidence-list span {
    display: block;
    color: var(--navy);
    font-weight: 900;
}

.brand-story-points span {
    display: block;
    margin-top: 4px;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}

.brand-story-art,
.delivery-confidence-art,
.features-hero-art {
    display: grid;
    place-items: center;
    margin: 0;
}

.brand-story-art img,
.delivery-confidence-art img,
.features-hero-art img {
    display: block;
    width: min(100%, 620px);
    filter: drop-shadow(0 34px 58px rgba(1, 9, 75, 0.17));
    animation: site-asset-float 8s ease-in-out infinite;
}

.calm-proof-section {
    position: relative;
    padding: 76px 0;
}

.calm-proof-section::before {
    content: "";
    position: absolute;
    inset: 16px calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(255, 240, 237, 0.82) 42%, rgba(234, 243, 255, 0.9)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 54px);
    transform: skewY(-3deg);
}

.calm-proof-section > div:first-child {
    display: grid;
    max-width: 860px;
    margin: 0 auto 26px;
    text-align: center;
}

.calm-proof-grid,
.feature-depth-grid,
.feature-ops-strip {
    display: grid;
    gap: 14px;
}

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

.calm-proof-grid article,
.feature-depth-grid article,
.feature-ops-strip article {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.07);
}

.calm-proof-grid article {
    min-height: 210px;
    padding: 22px;
}

.calm-proof-grid article::before,
.feature-depth-grid article::before {
    content: "";
    position: absolute;
    left: -22%;
    right: -22%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--coral), var(--lemon), #8de0b4, transparent);
    animation: trust-line-travel 4.8s ease-in-out infinite;
}

.calm-proof-grid span,
.feature-depth-grid span,
.feature-ops-strip span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.calm-proof-grid strong {
    display: block;
    margin-top: 24px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.12;
}

.calm-proof-grid p {
    margin-top: 12px;
    font-size: 14px;
}

.delivery-confidence-section {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 0.84fr);
}

.delivery-confidence-art img {
    width: min(100%, 560px);
    animation-delay: -2s;
}

.delivery-confidence-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.delivery-confidence-list span {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.045);
    font-size: 14px;
}

.feature-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 18px;
}

.feature {
    min-height: 178px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 16px 42px rgba(1, 9, 75, 0.06);
}

.feature-marker {
    width: 34px;
    height: 8px;
    border-radius: 999px;
    margin-bottom: 22px;
    background: var(--coral);
}

.feature:nth-child(2) .feature-marker {
    background: var(--lemon);
}

.feature:nth-child(3) .feature-marker {
    background: #8de0b4;
}

.feature h2,
.feature h3,
.auth-panel h1,
.dashboard-hero h1 {
    margin: 0;
    color: var(--navy);
    line-height: 1.08;
}

.feature h2,
.feature h3 {
    font-size: 20px;
}

.feature p {
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.flow-section {
    position: relative;
    margin-top: 50px;
    padding: 76px 0 66px;
}

.flow-section::before {
    content: "";
    position: absolute;
    inset: 14px calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.92), rgba(234, 243, 255, 0.86) 44%, rgba(255, 240, 237, 0.82)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 54px);
    transform: skewY(-3deg);
}

.flow-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.flow-board::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
    transform: translateY(-50%);
}

.flow-step {
    position: relative;
    min-height: 232px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 44px rgba(1, 9, 75, 0.08);
    backdrop-filter: blur(18px);
}

.flow-step:nth-child(2) {
    transform: translateY(24px);
}

.flow-step:nth-child(3) {
    transform: translateY(-6px);
}

.flow-number {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 16px 32px rgba(1, 9, 75, 0.16);
    font-size: 13px;
    font-weight: 950;
}

.flow-step:nth-child(2) .flow-number {
    background: var(--coral);
}

.flow-step:nth-child(3) .flow-number {
    color: var(--navy);
    background: var(--lemon);
}

.flow-step h3 {
    margin: 28px 0 8px;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.08;
}

.flow-step p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
}

.catalog-section {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    padding: 72px 0 32px;
}

.catalog-copy {
    position: sticky;
    top: 26px;
    padding-top: 18px;
}

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

.catalog-card {
    position: relative;
    min-height: 214px;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 42px rgba(1, 9, 75, 0.06);
}

.catalog-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -36px;
    width: 138px;
    height: 118px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 18px;
    background: rgba(234, 243, 255, 0.62);
    transform: rotate(-14deg);
}

.catalog-card-wide {
    min-height: 260px;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(15, 36, 126, 0.94));
}

.catalog-card-accent {
    grid-column: 1 / -1;
    min-height: 174px;
    background:
        linear-gradient(110deg, rgba(255, 240, 237, 0.96), rgba(255, 255, 255, 0.84) 48%, rgba(223, 248, 231, 0.78));
}

.catalog-card h3 {
    position: relative;
    z-index: 1;
    margin: 24px 0 8px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.catalog-card p {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.catalog-card-wide h3,
.catalog-card-wide p {
    color: #ffffff;
}

.catalog-card-wide p {
    color: rgba(255, 255, 255, 0.72);
}

.catalog-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 72px;
    height: 58px;
}

.catalog-art::before,
.catalog-art::after {
    content: "";
    position: absolute;
    border-radius: 8px;
}

.catalog-art-audio::before {
    inset: 8px 0 0;
    background:
        linear-gradient(90deg, rgba(253, 97, 76, 0.96), rgba(255, 230, 109, 0.78)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 3px, transparent 3px 9px);
}

.catalog-art-audio::after {
    left: 10px;
    right: 10px;
    bottom: 14px;
    height: 18px;
    background: repeating-linear-gradient(90deg, #ffffff 0 4px, transparent 4px 10px);
}

.catalog-art-book::before {
    inset: 4px 14px 0 4px;
    background: linear-gradient(135deg, #ffffff, var(--sky));
    box-shadow: 12px 8px 0 rgba(253, 97, 76, 0.2);
}

.catalog-art-book::after {
    left: 17px;
    top: 17px;
    width: 28px;
    height: 3px;
    background: var(--coral);
    box-shadow: 0 9px 0 rgba(1, 9, 75, 0.22);
}

.catalog-art-course::before {
    inset: 5px 3px;
    background: linear-gradient(135deg, var(--navy), #3459c8);
}

.catalog-art-course::after {
    left: 27px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff;
    border-radius: 0;
}

.catalog-art-plugin::before {
    inset: 5px 8px 5px 0;
    background: var(--mint);
}

.catalog-art-plugin::after {
    left: 18px;
    top: 17px;
    width: 34px;
    height: 20px;
    border: 3px solid var(--navy);
    border-radius: 6px;
    box-shadow: 0 -10px 0 -7px var(--coral), 0 10px 0 -7px var(--coral);
}

.catalog-art-freebie::before {
    inset: 7px 6px;
    background: linear-gradient(135deg, var(--coral), #ff9c8d);
}

.catalog-art-freebie::after {
    left: 14px;
    top: 26px;
    width: 44px;
    height: 5px;
    background: #ffffff;
    box-shadow: 0 -12px 0 rgba(255, 255, 255, 0.64);
}

.growth-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.82fr);
    gap: 58px;
    align-items: center;
    margin-top: 36px;
    padding: 82px 0;
}

.growth-section::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.94), rgba(255, 240, 237, 0.8) 38%, rgba(234, 243, 255, 0.92)),
        repeating-linear-gradient(135deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 56px);
}

.growth-visual {
    position: relative;
    min-height: 420px;
    perspective: 1200px;
}

.download-card,
.growth-feed,
.growth-score {
    position: absolute;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 26px 70px rgba(1, 9, 75, 0.13);
    backdrop-filter: blur(20px);
}

.download-card {
    top: 30px;
    left: 0;
    width: min(360px, 78%);
    padding: 24px;
    transform: rotateY(-10deg) rotateZ(-1deg);
    animation: soft-float 7s ease-in-out infinite;
}

.download-tag {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--coral-strong);
    background: var(--coral-soft);
    font-size: 12px;
    font-weight: 900;
}

.download-card h3 {
    margin: 22px 0 8px;
    color: var(--navy);
    font-size: 27px;
    line-height: 1.04;
}

.download-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.download-field,
.download-action {
    display: flex;
    min-height: 48px;
    align-items: center;
    border-radius: 8px;
    margin-top: 18px;
    padding: 12px 30px;
    font-weight: 850;
}

.download-field {
    border: 1px solid rgba(1, 9, 75, 0.12);
    color: var(--navy);
    background: #ffffff;
}

.download-action {
    justify-content: center;
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 14px 30px rgba(1, 9, 75, 0.18);
}

.growth-feed {
    right: 0;
    bottom: 46px;
    display: grid;
    gap: 10px;
    width: min(340px, 70%);
    padding: 16px;
    transform: rotateY(8deg) rotateZ(1deg);
    animation: soft-float-alt 7.5s ease-in-out infinite;
}

.growth-feed div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 10px;
}

.growth-feed div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.growth-feed span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--coral);
}

.growth-feed div:nth-child(2) span {
    background: var(--lemon);
}

.growth-feed div:nth-child(3) span {
    background: #8de0b4;
}

.growth-feed strong {
    color: var(--navy);
    font-size: 13px;
}

.growth-feed em {
    color: var(--ink-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.growth-score {
    right: 64px;
    top: 6px;
    min-width: 142px;
    padding: 18px;
    background: linear-gradient(145deg, var(--coral), var(--coral-strong));
    color: #ffffff;
    transform: rotateZ(3deg);
}

.growth-score span,
.growth-score em {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.growth-score strong {
    display: block;
    margin: 5px 0;
    font-size: 38px;
    line-height: 1;
}

.mini-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.mini-points span {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 850;
}

.license-section,
.landing-cta {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
    padding-right: max(20px, calc((100vw - 1120px) / 2));
    padding-left: max(20px, calc((100vw - 1120px) / 2));
    overflow: hidden;
}

.license-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(340px, 0.72fr);
    gap: 70px;
    align-items: center;
    margin-top: 34px;
    padding-top: 84px;
    padding-bottom: 84px;
    color: #ffffff;
    background:
        linear-gradient(126deg, #01094b 0%, #07136b 48%, #14248f 100%);
}

.license-section::before,
.license-section::after,
.landing-cta::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.license-section::before {
    top: -42px;
    right: -120px;
    width: 620px;
    height: 154px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.92), rgba(255, 230, 109, 0.68));
    transform: rotate(-13deg);
}

.license-section::after {
    left: -180px;
    bottom: 52px;
    width: 580px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(18deg);
}

.license-copy,
.license-console,
.landing-cta > * {
    position: relative;
    z-index: 1;
}

.license-copy h2,
.landing-cta h2 {
    color: #ffffff;
}

.license-copy p,
.landing-cta p {
    color: rgba(255, 255, 255, 0.72);
}

.license-console {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);
}

.console-top,
.key-row,
.license-receipt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.console-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 850;
}

.console-top strong {
    border-radius: 999px;
    padding: 7px 10px;
    color: #24553a;
    background: var(--mint);
    font-size: 12px;
}

.key-row {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    margin-top: 12px;
    padding: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
}

.key-row:nth-child(3) {
    transform: translateX(18px);
}

.key-row:nth-child(4) {
    transform: translateX(38px);
}

.key-row em {
    border-radius: 999px;
    padding: 6px 9px;
    color: #ffd4ce;
    background: rgba(253, 97, 76, 0.16);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.license-receipt {
    border-radius: 8px;
    margin-top: 16px;
    padding: 16px;
    color: var(--navy);
    background: #ffffff;
}

.license-receipt span,
.license-receipt strong {
    display: block;
}

.license-receipt span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.license-receipt strong {
    max-width: 250px;
    text-align: right;
    font-size: 14px;
}

.landing-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding-top: 72px;
    padding-bottom: 78px;
    color: #ffffff;
    background:
        linear-gradient(105deg, var(--coral), #f04e3d 48%, #c9352b 100%);
}

.landing-cta::before {
    top: 22px;
    right: max(20px, calc((100vw - 1120px) / 2));
    width: 360px;
    height: 96px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(-10deg);
}

.landing-cta div {
    max-width: 720px;
}

.cta-button {
    flex: 0 0 auto;
    border-color: #ffffff;
    color: var(--coral-strong);
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(1, 9, 75, 0.18);
}

@keyframes soft-float {
    0%,
    100% {
        transform: rotateY(-10deg) rotateZ(-1deg) translateY(0);
    }

    50% {
        transform: rotateY(-8deg) rotateZ(-0.4deg) translateY(-12px);
    }
}

@keyframes soft-float-alt {
    0%,
    100% {
        transform: rotateY(8deg) rotateZ(1deg) translateY(0);
    }

    50% {
        transform: rotateY(7deg) rotateZ(0.4deg) translateY(10px);
    }
}

@keyframes site-asset-float {
    0%,
    100% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(-12px) rotateZ(-0.5deg);
    }
}

@keyframes site-glow-breathe {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.04);
    }
}

@keyframes trust-line-travel {
    0%,
    100% {
        transform: translateX(-18%);
    }

    50% {
        transform: translateX(18%);
    }
}

.stripe-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1fr);
    gap: 58px;
    align-items: center;
    margin-top: 36px;
    padding: 94px 0 86px;
}

.stripe-intro::before,
.stripe-intro::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.stripe-intro::before {
    inset: 28px calc(50% - 50vw);
    z-index: -2;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 255, 0.9) 42%, rgba(255, 240, 237, 0.86)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.045) 0 1px, transparent 1px 54px);
    transform: skewY(-5deg);
}

.stripe-intro::after {
    top: 58px;
    right: calc(50% - 50vw - 80px);
    z-index: -1;
    width: min(760px, 66vw);
    height: 136px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(1, 9, 75, 0.1), rgba(253, 97, 76, 0.16), rgba(255, 230, 109, 0.22));
    transform: rotate(-12deg);
}

.stripe-intro-copy h2,
.product-map-head h2,
.ops-copy h2,
.launch-band h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 44px;
    line-height: 1.04;
}

.stripe-intro-copy p,
.product-map-head p,
.ops-copy p,
.launch-band p {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
}

.stripe-surface {
    position: relative;
    min-height: 438px;
    perspective: 1200px;
}

.product-loop-art {
    position: relative;
    min-height: 438px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-loop-art::before {
    content: "";
    position: absolute;
    inset: 9% 2% 2% 6%;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 42% 46%, rgba(141, 224, 180, 0.34), transparent 35%),
        radial-gradient(circle at 72% 42%, rgba(253, 97, 76, 0.18), transparent 38%);
    filter: blur(24px);
}

.product-loop-art img {
    display: block;
    width: min(860px, 116%);
    max-width: none;
    height: auto;
    transform: translateX(4%);
    filter: drop-shadow(0 30px 44px rgba(1, 9, 75, 0.12));
}

.surface-browser,
.surface-checkout,
.surface-events {
    position: absolute;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 30px 74px rgba(1, 9, 75, 0.14);
    backdrop-filter: blur(22px);
}

.surface-browser {
    top: 42px;
    left: 0;
    width: min(470px, 84%);
    padding: 18px;
    transform: rotateY(-10deg) rotateZ(-1deg);
}

.surface-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 14px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.surface-bar span {
    width: 34px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--lemon));
}

.surface-product {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding-top: 24px;
}

.surface-art {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 230, 109, 0.68), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--coral));
}

.surface-product h3 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.05;
}

.surface-product p {
    margin: 7px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
}

.surface-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 14px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 16px 32px rgba(253, 97, 76, 0.26);
    font-size: 13px;
    font-weight: 900;
}

.surface-checkout {
    top: 144px;
    right: 8px;
    width: min(330px, 58%);
    padding: 18px;
    transform: rotateY(8deg) rotateZ(1deg) translateZ(64px);
}

.surface-checkout-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--navy);
    font-weight: 900;
}

.surface-field {
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    margin-top: 10px;
    padding: 12px;
    color: var(--navy);
    background: #ffffff;
    font-size: 13px;
    font-weight: 850;
}

.surface-field-dark {
    color: #ffffff;
    background: var(--navy);
}

.surface-events {
    right: 66px;
    bottom: 28px;
    display: grid;
    gap: 10px;
    width: 260px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.74);
    transform: rotateZ(-2deg);
}

.surface-events div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850;
}

.surface-events span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--coral);
}

.surface-events div:nth-child(2) span {
    background: var(--lemon);
}

.surface-events div:nth-child(3) span {
    background: #8de0b4;
}

.commerce-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    margin-top: 14px;
    column-gap: 0;
}

.commerce-rail div {
    border-right: 1px solid rgba(1, 9, 75, 0.09);
    padding: 24px 32px 0;
}

.commerce-rail div:first-child {
    padding-left: 0;
}

.commerce-rail div:last-child {
    border-right: 0;
    padding-right: 0;
}

.commerce-rail span {
    display: block;
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
}

.commerce-rail strong {
    display: block;
    margin-top: 10px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.1;
}

.commerce-rail p {
    margin: 8px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.product-map {
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding: 72px 0;
}

.product-lanes {
    border-top: 1px solid rgba(1, 9, 75, 0.1);
}

.product-lanes article {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 25px 0;
}

.product-lanes span {
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 950;
}

.product-lanes strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1.2;
}

.ops-section {
    position: relative;
    left: 50%;
    right: 50%;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
    gap: 68px;
    align-items: center;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
    padding: 104px max(20px, calc((100vw - 1120px) / 2));
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(126deg, #01094b 0%, #07136b 48%, #14248f 100%);
}

.ops-section::before,
.ops-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.ops-section::before {
    top: -34px;
    right: -98px;
    width: 720px;
    height: 150px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.92), rgba(255, 230, 109, 0.66));
    transform: rotate(-12deg);
}

.ops-section::after {
    left: -160px;
    bottom: 68px;
    width: 620px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(17deg);
}

.ops-copy,
.ops-console {
    position: relative;
    z-index: 1;
}

.ops-copy h2 {
    color: #ffffff;
}

.ops-copy p {
    color: rgba(255, 255, 255, 0.72);
}

.ops-console {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 16px;
}

.ops-panel {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);
}

.ops-panel-freebie {
    transform: translateY(28px);
}

.ops-panel-license {
    min-height: 300px;
}

.ops-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    padding-bottom: 14px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 850;
}

.ops-panel-top strong {
    border-radius: 999px;
    padding: 7px 10px;
    color: #24553a;
    background: var(--mint);
    font-size: 12px;
}

.ops-panel h3 {
    margin: 28px 0 10px;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.04;
}

.ops-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.ops-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    margin-top: 12px;
    padding: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
}

.ops-key em {
    border-radius: 999px;
    padding: 6px 9px;
    color: #ffd4ce;
    background: rgba(253, 97, 76, 0.16);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.launch-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    padding: 82px 0 72px;
}

.launch-band div {
    max-width: 760px;
}

.demo-page {
    display: grid;
    gap: 0;
    padding: 58px 0 44px;
}

.demo-hero {
    max-width: 860px;
}

.demo-hero h1 {
    margin: 14px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.96;
    letter-spacing: 0;
    text-wrap: balance;
}

.demo-hero p {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--ink-muted);
    font-size: 19px;
    line-height: 1.55;
}

.demo-showcase {
    display: grid;
    gap: 0;
    margin-top: 0;
}

.demo-slab {
    position: relative;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.demo-slab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(247, 250, 255, 0.74) 34%, rgba(255, 255, 255, 0) 72%);
    opacity: 0.82;
}

.demo-slab::after {
    content: "";
    position: absolute;
    inset: 8% -8% auto 58%;
    z-index: 0;
    height: 88%;
    transform: skewX(-17deg);
    transform-origin: center;
    opacity: 0.7;
}

.demo-slab-inner {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1120px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 56px;
    align-items: center;
    margin: 0 auto;
    padding: 72px 0;
}

.demo-slab:nth-child(even) .demo-slab-inner {
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
}

.demo-slab:nth-child(even) .demo-slab-copy {
    grid-column: 2;
}

.demo-slab:nth-child(even) .demo-button-stage {
    grid-column: 1;
    grid-row: 1;
}

.demo-slab:nth-child(even)::before {
    background:
        linear-gradient(250deg, transparent 0%, rgba(247, 250, 255, 0.78) 34%, rgba(255, 255, 255, 0) 74%);
}

.demo-slab:nth-child(even)::after {
    inset: 8% 58% auto -8%;
}

.demo-slab-0::after {
    background: linear-gradient(135deg, rgba(253, 97, 76, 0.18), rgba(255, 209, 102, 0.22));
}

.demo-slab-1::after {
    background: linear-gradient(135deg, rgba(99, 230, 177, 0.22), rgba(76, 201, 240, 0.18));
}

.demo-slab-2::after {
    background: linear-gradient(135deg, rgba(6, 20, 91, 0.13), rgba(253, 97, 76, 0.14));
}

.demo-slab-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.demo-slab h2 {
    margin: 10px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
}

.demo-slab p {
    max-width: 600px;
    margin: 14px 0 0;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.55;
}

.demo-context-list {
    display: grid;
    max-width: 620px;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    list-style: none;
}

.demo-context-list li {
    position: relative;
    padding-left: 24px;
}

.demo-context-list li::before {
    content: "";
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: var(--coral);
}

.demo-button-stage {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 132px;
    overflow: hidden;
    place-items: center;
    isolation: isolate;
    border: 1px solid rgba(141, 224, 180, 0.24);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(rgba(141, 224, 180, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141, 224, 180, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(76, 201, 240, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 201, 240, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 16% 18%, rgba(65, 230, 197, 0.2), transparent 32%),
        linear-gradient(135deg, #06145b 0%, #01094b 58%, #071123 100%);
    background-size:
        22px 22px,
        22px 22px,
        88px 88px,
        88px 88px,
        auto,
        auto;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 18px 46px rgba(255, 255, 255, 0.03),
        0 18px 38px rgba(1, 9, 75, 0.16);
}

.demo-button-stage::before,
.demo-button-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.demo-button-stage::before {
    inset: 12px;
    z-index: -1;
    border: 1px solid rgba(141, 224, 180, 0.22);
    border-radius: 5px;
    background:
        linear-gradient(90deg, rgba(141, 224, 180, 0.28), transparent 18%, transparent 82%, rgba(141, 224, 180, 0.28)),
        linear-gradient(rgba(141, 224, 180, 0.2), transparent 18%, transparent 82%, rgba(141, 224, 180, 0.2));
    opacity: 0.76;
}

.demo-button-stage::after {
    inset: auto 16px 14px auto;
    width: 72px;
    height: 18px;
    border-top: 1px solid rgba(65, 230, 197, 0.42);
    border-bottom: 1px solid rgba(65, 230, 197, 0.22);
    opacity: 0.72;
}

.demo-placeholder-button {
    min-height: 48px;
    border: 1px solid rgba(141, 224, 180, 0.32);
    border-radius: 8px;
    padding: 0 18px;
    color: #dffff7;
    background: rgba(255, 255, 255, 0.08);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.demo-cta {
    position: relative;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(rgba(141, 224, 180, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141, 224, 180, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 10% 8%, rgba(65, 230, 197, 0.22), transparent 34%),
        linear-gradient(135deg, #06145b 0%, #01094b 56%, #071123 100%);
    background-size: 30px 30px, 30px 30px, auto, auto;
}

.demo-cta::before {
    content: "";
    position: absolute;
    inset: -34% -8% auto 58%;
    height: 180%;
    transform: skewX(-18deg);
    background: linear-gradient(135deg, rgba(65, 230, 197, 0.18), rgba(253, 97, 76, 0.16));
    opacity: 0.82;
}

.demo-cta > * {
    position: relative;
    z-index: 1;
}

.demo-cta-inner {
    display: grid;
    width: min(1120px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    margin: 0 auto;
    padding: 76px 0;
}

.demo-cta .section-kicker {
    color: #8de0b4;
}

.demo-cta h2 {
    max-width: 760px;
    margin: 12px 0 0;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(38px, 5vw, 66px);
    line-height: 0.98;
    letter-spacing: 0;
    text-wrap: balance;
}

.demo-cta p {
    max-width: 650px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 18px;
    line-height: 1.55;
}

.demo-cta .button {
    justify-self: end;
    white-space: nowrap;
}

.landing-footer {
    display: grid;
    grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
    gap: 52px;
    padding: 54px 0 32px;
}

.footer-brand img {
    display: block;
    width: auto;
    height: 36px;
}

.footer-brand p {
    max-width: 350px;
    margin: 20px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
}

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

.footer-columns div {
    display: grid;
    gap: 9px;
    align-content: start;
}

.footer-columns strong {
    color: var(--navy);
    font-size: 13px;
    line-height: 1.15;
}

.footer-columns span,
.footer-columns a,
.footer-button,
.footer-bottom {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 700;
}

.footer-columns form {
    margin: 0;
}

.footer-button {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.footer-columns a:hover,
.footer-button:hover {
    color: var(--coral-strong);
}

.marketing-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 38px;
    align-items: center;
    padding: 76px 0 54px;
}

.marketing-detail-copy h1 {
    max-width: 780px;
    margin: 16px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(46px, 6vw, 76px);
    line-height: 0.96;
}

.marketing-detail-copy p {
    max-width: 660px;
    margin: 20px 0 0;
    color: var(--ink-muted);
    font-size: 19px;
    line-height: 1.55;
}

.marketing-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.marketing-detail-art {
    display: grid;
    min-height: 390px;
    place-items: center;
    padding: 8px 0;
}

.marketing-detail-art img {
    display: block;
    width: min(100%, 560px);
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 34px 52px rgba(1, 9, 75, 0.18));
}

.marketing-detail-visual {
    position: relative;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(253, 97, 76, 0.14), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.86));
    box-shadow: 0 26px 70px rgba(1, 9, 75, 0.12);
}

.marketing-detail-visual > span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.marketing-detail-visual div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 13px;
    background: rgba(255, 255, 255, 0.76);
}

.marketing-detail-visual i {
    display: block;
    width: 16px;
    height: 16px;
    border: 4px solid rgba(141, 224, 180, 0.34);
    border-radius: 999px;
    background: #23b26d;
}

.marketing-detail-visual strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.28;
}

.marketing-detail-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 0 58px;
}

.marketing-detail-sections article {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 42px rgba(1, 9, 75, 0.06);
}

.marketing-detail-sections span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
}

.marketing-detail-sections h2 {
    margin: 16px 0 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.1;
}

.marketing-detail-sections p {
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.55;
}

.marketing-compare-links {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 0 0 62px;
}

.marketing-compare-links > div:first-child {
    position: sticky;
    top: 18px;
}

.marketing-compare-links h2 {
    margin: 14px 0 0;
    color: var(--navy);
    font-size: clamp(30px, 4vw, 56px);
    line-height: 0.96;
}

.marketing-compare-links p {
    margin: 14px 0 0;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.58;
}

.marketing-compare-link-grid {
    display: grid;
    gap: 14px;
}

.marketing-compare-link-grid a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 18px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(255, 99, 79, 0.08), rgba(141, 224, 180, 0.1)),
        rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.07);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.marketing-compare-link-grid a:hover {
    border-color: rgba(255, 99, 79, 0.42);
    box-shadow: 0 22px 56px rgba(1, 9, 75, 0.1);
    transform: translateY(-2px);
}

.marketing-compare-link-grid span {
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.marketing-compare-link-grid strong {
    color: var(--navy);
    font-size: 24px;
    line-height: 1.05;
}

.marketing-compare-link-grid p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
}

.marketing-guide {
    display: grid;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 10px 0 66px;
}

.marketing-guide-intro,
.marketing-guide-positioning,
.marketing-guide-checklist,
.marketing-guide-faq {
    grid-column: 1 / -1;
    max-width: 940px;
}

.marketing-guide-intro h2,
.marketing-guide-positioning h2,
.marketing-guide-checklist h2,
.marketing-guide-faq h2 {
    margin: 14px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.02;
}

.marketing-guide-intro p,
.marketing-guide-positioning p,
.marketing-guide-chapter p,
.marketing-guide-checklist p,
.marketing-guide-faq p {
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 1.74;
}

.marketing-guide-intro p {
    max-width: 820px;
    margin: 18px 0 0;
}

.marketing-guide-positioning {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 40px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 252, 255, 0.78));
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.08);
}

.marketing-guide-positioning p {
    margin: 18px 0 0;
}

.marketing-guide-positioning strong {
    color: var(--navy);
}

.marketing-guide-positioning-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.marketing-guide-positioning-grid section {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.marketing-guide-positioning-grid h3 {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
}

.marketing-guide-positioning-grid ul {
    display: grid;
    gap: 9px;
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.marketing-guide-toc {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.08);
}

.marketing-guide-toc strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.marketing-guide-toc a {
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    text-decoration: none;
}

.marketing-guide-toc a:hover {
    color: var(--coral-strong);
}

.marketing-guide-body {
    display: grid;
    gap: 22px;
}

.marketing-guide-chapter {
    scroll-margin-top: 24px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 42px);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 55px rgba(1, 9, 75, 0.07);
}

.marketing-guide-chapter > span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
}

.marketing-guide-chapter h2 {
    margin: 14px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.8vw, 44px);
    line-height: 1.04;
}

.marketing-guide-chapter p {
    margin: 18px 0 0;
}

.marketing-guide-chapter ul {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.marketing-guide-chapter li {
    position: relative;
    padding-left: 22px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.45;
}

.marketing-guide-chapter li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--coral);
    box-shadow: 0 0 0 5px rgba(253, 97, 76, 0.1);
}

.marketing-guide-faq {
    margin-top: 26px;
}

.marketing-guide-checklist {
    margin-top: 12px;
}

.marketing-guide-checklist > p {
    max-width: 820px;
    margin: 18px 0 0;
}

.marketing-guide-checklist > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.marketing-guide-checklist article {
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 15px 38px rgba(1, 9, 75, 0.06);
}

.marketing-guide-checklist h3 {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.18;
}

.marketing-guide-checklist article p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.58;
}

.marketing-guide-checklist strong {
    color: var(--navy);
}

.marketing-guide-faq > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.marketing-guide-faq article {
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 15px 38px rgba(1, 9, 75, 0.06);
}

.marketing-guide-faq h3 {
    margin: 0;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.2;
}

.marketing-guide-faq p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.58;
}

.marketing-landing-band {
    position: relative;
    isolation: isolate;
}

.marketing-detail-hero {
    min-height: 620px;
}

.marketing-detail-hero::before {
    content: "";
    position: absolute;
    inset: 36px -5vw 24px;
    z-index: -2;
    border: 1px solid rgba(1, 9, 75, 0.08);
    background:
        linear-gradient(108deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.9) 45%, rgba(255, 239, 235, 0.82) 100%);
    clip-path: polygon(0 8%, 100% 0, 100% 84%, 0 100%);
}

.marketing-detail-hero::after {
    content: "";
    position: absolute;
    right: -7vw;
    bottom: 28px;
    z-index: -1;
    width: min(58vw, 760px);
    height: 128px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(1, 9, 75, 0.07), rgba(141, 224, 180, 0.2));
    transform: rotate(18deg);
}

.marketing-geometry {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.marketing-geometry span {
    position: absolute;
    display: block;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    transform: rotate(-12deg);
}

.marketing-geometry span:nth-child(1) {
    top: 64px;
    right: 7%;
    width: 260px;
    height: 64px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.16), rgba(255, 255, 255, 0.12));
}

.marketing-geometry span:nth-child(2) {
    right: 34%;
    bottom: 96px;
    width: 420px;
    height: 18px;
    background: rgba(1, 9, 75, 0.07);
}

.marketing-geometry span:nth-child(3) {
    left: -38px;
    bottom: 80px;
    width: 320px;
    height: 110px;
    background: linear-gradient(110deg, rgba(141, 224, 180, 0.22), rgba(255, 255, 255, 0.04));
}

.marketing-detail-copy {
    position: relative;
    z-index: 1;
}

.marketing-detail-copy h1 {
    max-width: 860px;
    text-wrap: balance;
}

.marketing-detail-copy p {
    max-width: 700px;
}

.marketing-detail-art {
    position: relative;
    z-index: 1;
}

.marketing-detail-art img {
    animation: marketing-art-float 7s ease-in-out infinite;
}

.marketing-flow-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 4px 0 78px;
    padding: 44px 28px 52px;
    color: #ffffff;
    background: linear-gradient(115deg, #01094b 0%, #17246f 58%, #255d69 100%);
    clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
    box-shadow: 0 30px 80px rgba(1, 9, 75, 0.16);
}

.marketing-flow-strip::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
    pointer-events: none;
}

.marketing-flow-strip article {
    position: relative;
    border: 0;
    border-radius: 0;
    padding: 34px 30px;
    background: transparent;
    box-shadow: none;
}

.marketing-flow-strip article + article {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.marketing-flow-strip span {
    color: #8de0b4;
    font-size: 52px;
    line-height: 0.8;
    opacity: 0.84;
}

.marketing-flow-strip h2 {
    margin-top: 20px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 42px);
}

.marketing-flow-strip p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
}

.marketing-guide {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 0;
}

.marketing-guide::before {
    content: "";
    position: absolute;
    inset: 120px -4vw 6%;
    z-index: -3;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(239, 246, 255, 0.78) 16%, rgba(255, 247, 245, 0.82) 80%, rgba(255, 255, 255, 0));
    clip-path: polygon(0 3%, 100% 0, 100% 96%, 0 100%);
}

.marketing-geometry-guide span:nth-child(1) {
    top: 330px;
    right: -72px;
    width: 360px;
    height: 86px;
    background: linear-gradient(95deg, rgba(253, 97, 76, 0.14), rgba(255, 255, 255, 0.08));
}

.marketing-geometry-guide span:nth-child(2) {
    top: 820px;
    left: -88px;
    width: 300px;
    height: 70px;
    background: linear-gradient(95deg, rgba(141, 224, 180, 0.22), rgba(255, 255, 255, 0.08));
}

.marketing-guide-intro {
    position: relative;
    max-width: 1040px;
    padding: 18px 0 18px 34px;
}

.marketing-guide-intro::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--coral), #8de0b4);
}

.marketing-guide-intro h2 {
    max-width: 880px;
    font-size: clamp(44px, 5.8vw, 78px);
    text-wrap: balance;
}

.marketing-guide-intro p {
    max-width: 780px;
}

.marketing-guide-positioning {
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: clamp(34px, 5vw, 62px);
    color: #ffffff;
    background: linear-gradient(120deg, #01094b 0%, #15206a 48%, #273b82 100%);
    clip-path: polygon(0 7%, 100% 0, 100% 92%, 0 100%);
    box-shadow: 0 34px 90px rgba(1, 9, 75, 0.18);
}

.marketing-guide-positioning .section-kicker {
    color: #8de0b4;
}

.marketing-guide-positioning h2 {
    max-width: 960px;
    color: #ffffff;
    font-size: clamp(36px, 5vw, 64px);
    text-wrap: balance;
}

.marketing-guide-positioning p {
    max-width: 940px;
    color: rgba(255, 255, 255, 0.78);
}

.marketing-guide-positioning strong {
    color: #ffffff;
}

.marketing-guide-positioning-grid {
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}

.marketing-guide-positioning-grid section {
    border: 0;
    border-radius: 0;
    padding: 24px;
    background: transparent;
}

.marketing-guide-positioning-grid section + section {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.marketing-guide-positioning-grid h3 {
    color: #ffffff;
}

.marketing-guide-positioning-grid ul {
    color: rgba(255, 255, 255, 0.74);
}

.marketing-guide-toc {
    position: relative;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 0;
    border-top: 4px solid var(--coral);
    border-radius: 0;
    padding: 18px 0 0;
    background: transparent;
    box-shadow: none;
}

.marketing-guide-toc strong {
    flex-basis: 100%;
}

.marketing-guide-toc a {
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.72);
}

.marketing-guide-body {
    gap: 0;
}

.marketing-guide-chapter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.44fr);
    gap: clamp(24px, 5vw, 62px);
    align-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    padding: clamp(56px, 8vw, 96px) clamp(22px, 4vw, 56px);
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.marketing-guide-chapter::before {
    content: "";
    position: absolute;
    inset: 22px 0;
    z-index: -2;
    border: 1px solid rgba(1, 9, 75, 0.08);
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.9));
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

.marketing-guide-chapter-alt {
    grid-template-columns: minmax(240px, 0.44fr) minmax(0, 1fr);
}

.marketing-guide-chapter-alt::before {
    background: linear-gradient(112deg, rgba(1, 9, 75, 0.98), rgba(27, 42, 120, 0.95));
    clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
}

.marketing-guide-chapter-alt .marketing-guide-chapter-copy {
    grid-column: 2;
    grid-row: 1;
}

.marketing-guide-chapter-alt .marketing-chapter-notes {
    grid-column: 1;
    grid-row: 1;
}

.marketing-chapter-number {
    position: absolute;
    top: 34px;
    right: 38px;
    z-index: -1;
    color: rgba(253, 97, 76, 0.1);
    font-family: var(--font-heading);
    font-size: clamp(92px, 14vw, 190px);
    line-height: 0.8;
}

.marketing-guide-chapter-alt .marketing-chapter-number {
    color: rgba(141, 224, 180, 0.12);
}

.marketing-guide-chapter > span {
    display: none;
}

.marketing-guide-chapter-copy > span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
}

.marketing-guide-chapter h2 {
    max-width: 760px;
    font-size: clamp(36px, 5vw, 64px);
    text-wrap: balance;
}

.marketing-guide-chapter p {
    max-width: 760px;
}

.marketing-guide-chapter-alt h2,
.marketing-guide-chapter-alt p {
    color: #ffffff;
}

.marketing-guide-chapter-alt p {
    color: rgba(255, 255, 255, 0.76);
}

.marketing-guide-chapter-alt .marketing-guide-chapter-copy > span {
    color: #8de0b4;
}

.marketing-guide-chapter ul {
    display: none;
}

.marketing-chapter-notes {
    display: grid;
    gap: 0;
    border: 1px solid rgba(1, 9, 75, 0.1);
    background: rgba(255, 255, 255, 0.72);
    transform: rotate(-1.5deg);
}

.marketing-guide-chapter-alt .marketing-chapter-notes {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    transform: rotate(1.5deg);
}

.marketing-chapter-notes p {
    margin: 0;
    padding: 18px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.45;
}

.marketing-chapter-notes p + p {
    border-top: 1px solid rgba(1, 9, 75, 0.08);
}

.marketing-guide-chapter-alt .marketing-chapter-notes p {
    color: rgba(255, 255, 255, 0.88);
}

.marketing-guide-chapter-alt .marketing-chapter-notes p + p {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.marketing-guide-checklist {
    max-width: none;
    padding: clamp(36px, 6vw, 70px);
    background: linear-gradient(120deg, rgba(255, 248, 246, 0.96), rgba(239, 246, 255, 0.88));
    clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

.marketing-guide-checklist h2 {
    max-width: 860px;
    font-size: clamp(38px, 5vw, 62px);
}

.marketing-guide-checklist > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    background: rgba(1, 9, 75, 0.08);
}

.marketing-guide-checklist article {
    border: 0;
    border-radius: 0;
    padding: 24px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.marketing-guide-faq {
    max-width: none;
}

.marketing-guide-faq h2 {
    max-width: 860px;
    font-size: clamp(38px, 5vw, 62px);
}

.marketing-guide-faq > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    background: rgba(1, 9, 75, 0.08);
}

.marketing-guide-faq article {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
}

@keyframes marketing-art-float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(1.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-detail-art img {
        animation: none;
    }
}

.marketing-detail-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: 8px;
    padding: 32px;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.2), transparent 30%),
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(20, 29, 98, 0.96));
    box-shadow: 0 28px 70px rgba(1, 9, 75, 0.16);
}

.marketing-detail-cta h2 {
    max-width: 680px;
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.04;
}

.marketing-detail-cta p {
    max-width: 640px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.5;
}

.footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-top: 1px solid rgba(1, 9, 75, 0.09);
    padding-top: 24px;
}

.footer-legal-stack {
    display: grid;
    gap: 12px;
}

.footer-bottom nav {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 34px;
    flex-wrap: wrap;
}

.footer-bottom a {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--coral-strong);
}

.legal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
    align-items: end;
    padding: 96px 0 42px;
}

.legal-hero h1 {
    max-width: 820px;
    margin: 16px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(56px, 8vw, 104px);
    line-height: 0.92;
}

.legal-hero p {
    max-width: 820px;
    margin: 26px 0 0;
    color: var(--ink-muted);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.48;
}

.legal-meta-card {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(255, 240, 237, 0.72), rgba(234, 243, 255, 0.64) 55%, rgba(223, 248, 231, 0.52)),
        rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
}

.legal-meta-card strong {
    margin-top: 10px;
    color: rgba(95, 104, 133, 0.9);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-meta-card strong:first-child {
    margin-top: 0;
}

.legal-meta-card span,
.legal-meta-card a {
    color: var(--navy);
    font-size: 15px;
    font-weight: 850;
}

.legal-meta-card a {
    color: var(--coral-strong);
}

.legal-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 0 0 92px;
}

.legal-toc {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.07);
    backdrop-filter: blur(18px);
}

.legal-toc strong {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
}

.legal-toc a {
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 850;
}

.legal-toc a:hover {
    color: var(--coral-strong);
    background: rgba(253, 97, 76, 0.08);
}

.legal-document {
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 42px 46px 48px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95)),
        rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.legal-section {
    padding: 30px 0;
    border-top: 1px solid rgba(1, 9, 75, 0.09);
}

.legal-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.legal-section:last-child {
    padding-bottom: 0;
}

.legal-section h2,
.legal-section h3,
.legal-section p,
.legal-section ul {
    max-width: 860px;
}

.legal-section h2 {
    margin: 0 0 15px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
}

.legal-section h3 {
    margin: 26px 0 8px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.legal-section p {
    margin: 0 0 14px;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.78;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section a {
    color: var(--coral-strong);
    font-weight: 900;
}

.legal-section ul {
    display: grid;
    gap: 10px;
    margin: 12px 0 18px;
    padding-left: 22px;
    color: var(--ink-muted);
    font-weight: 650;
    line-height: 1.68;
}

.legal-section li::marker {
    color: var(--coral);
}

.legal-callout {
    max-width: 860px;
    margin: 22px 0 4px;
    border: 1px solid rgba(253, 97, 76, 0.24);
    border-radius: 8px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(255, 240, 237, 0.88), rgba(255, 255, 255, 0.92));
}

.legal-callout strong {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 900;
}

.legal-callout p {
    margin: 0;
}

.pricing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
    gap: 68px;
    align-items: center;
    padding: 58px 0 86px;
}

.pricing-hero::before,
.pricing-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.pricing-hero::before {
    inset: 20px calc(50% - 50vw) 44px;
    z-index: -2;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.96), rgba(234, 243, 255, 0.92) 44%, rgba(255, 240, 237, 0.88)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 54px);
    transform: skewY(-5deg);
}

.pricing-hero::after {
    top: 54px;
    right: calc(50% - 50vw - 120px);
    z-index: -1;
    width: min(780px, 70vw);
    height: 142px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(1, 9, 75, 0.1), rgba(253, 97, 76, 0.16), rgba(255, 230, 109, 0.23));
    transform: rotate(-12deg);
}

.pricing-hero h1 {
    max-width: 690px;
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 62px;
    line-height: 0.98;
    font-weight: 850;
}

.pricing-hero p,
.pricing-story p,
.pricing-faq p {
    color: var(--ink-muted);
}

.pricing-hero-copy > p {
    max-width: 580px;
    margin: 22px 0 0;
    font-size: 18px;
}

.pricing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.pricing-visual {
    position: relative;
    min-height: 430px;
    perspective: 1200px;
}

.pricing-checkout-card,
.pricing-margin-card,
.pricing-visual-note {
    position: absolute;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 74px rgba(1, 9, 75, 0.14);
    backdrop-filter: blur(22px);
}

.pricing-checkout-card {
    top: 42px;
    left: 0;
    width: min(430px, 78%);
    padding: 18px;
    transform: rotateY(-10deg) rotateZ(-1deg);
}

.pricing-checkout-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 14px;
    color: var(--navy);
    font-weight: 900;
}

.pricing-checkout-top span {
    border-radius: 999px;
    padding: 7px 10px;
    color: #24553a;
    background: var(--mint);
    font-size: 12px;
    font-weight: 900;
}

.pricing-product-line {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px;
    background: #ffffff;
}

.pricing-product-art {
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 230, 109, 0.62), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--coral));
}

.pricing-product-art-free {
    background:
        linear-gradient(135deg, var(--mint), var(--sky));
}

.pricing-product-line strong,
.pricing-product-line em {
    display: block;
}

.pricing-product-line strong {
    color: var(--navy);
    font-size: 14px;
}

.pricing-product-line em {
    color: var(--ink-muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.pricing-product-line b {
    color: var(--coral-strong);
    font-size: 12px;
}

.pricing-margin-card {
    right: 0;
    bottom: 78px;
    width: min(330px, 60%);
    padding: 22px;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(15, 36, 126, 0.94));
    transform: rotateY(8deg) rotateZ(1deg) translateZ(58px);
}

.pricing-margin-card span,
.pricing-plan-top span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-margin-card span {
    color: #ffd4ce;
}

.pricing-margin-card strong {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.04;
}

.pricing-margin-track {
    height: 11px;
    border-radius: 999px;
    margin-top: 22px;
    background: rgba(255, 255, 255, 0.14);
}

.pricing-margin-track span {
    display: block;
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.pricing-visual-note {
    left: 76px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(330px, 66%);
    padding: 14px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850;
    transform: rotateZ(-2deg);
}

.pricing-visual-note span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--coral);
}

.pricing-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 0 72px;
}

.pricing-plan {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 54px rgba(1, 9, 75, 0.08);
}

.pricing-plan::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -64px;
    width: 210px;
    height: 150px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 18px;
    background: rgba(234, 243, 255, 0.72);
    transform: rotate(-14deg);
}

.pricing-plan-featured {
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(15, 36, 126, 0.94));
    box-shadow: 0 34px 88px rgba(1, 9, 75, 0.22);
}

.pricing-plan-featured::after {
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.72), rgba(255, 230, 109, 0.44));
}

.pricing-plan > * {
    position: relative;
    z-index: 1;
}

.pricing-plan-badge {
    display: inline-flex;
    border-radius: 999px;
    margin-bottom: 18px;
    padding: 8px 11px;
    color: #ffd4ce;
    background: rgba(253, 97, 76, 0.16);
    font-size: 12px;
    font-weight: 900;
}

.pricing-plan-top {
    display: grid;
    gap: 10px;
}

.pricing-plan-featured .pricing-plan-top span {
    color: #ffd4ce;
}

.pricing-plan-top strong {
    color: var(--navy);
    font-size: 25px;
    line-height: 1.08;
}

.pricing-plan-featured .pricing-plan-top strong {
    color: #ffffff;
}

.pricing-price {
    margin-top: 28px;
    color: var(--navy);
    font-size: 58px;
    line-height: 1;
    font-weight: 950;
}

.pricing-price span {
    color: var(--ink-muted);
    font-size: 18px;
    font-weight: 850;
}

.pricing-plan-featured .pricing-price {
    color: #ffffff;
}

.pricing-plan-featured .pricing-price span {
    color: rgba(255, 255, 255, 0.7);
}

.pricing-fee {
    margin: 10px 0 24px;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 900;
}

.pricing-plan-featured .pricing-fee {
    color: rgba(255, 255, 255, 0.76);
}

.pricing-includes {
    display: grid;
    gap: 11px;
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    margin-top: 26px;
    padding-top: 24px;
}

.pricing-plan-featured .pricing-includes {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.pricing-includes span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
}

.pricing-plan-featured .pricing-includes span {
    color: rgba(255, 255, 255, 0.86);
}

.pricing-includes span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--coral);
}

.pricing-plan-featured .pricing-includes span::before {
    background: var(--lemon);
}

.pricing-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(340px, 0.74fr);
    gap: 60px;
    align-items: center;
    padding: 76px 0;
}

.pricing-story::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 255, 0.86), rgba(255, 240, 237, 0.82));
    transform: skewY(-3deg);
}

.pricing-story h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.04;
}

.pricing-story p {
    margin: 16px 0 0;
    font-size: 17px;
}

.pricing-meter {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 24px 62px rgba(1, 9, 75, 0.1);
}

.meter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding: 14px 0;
    color: var(--ink-muted);
    font-weight: 800;
}

.meter-row strong {
    color: var(--navy);
}

.meter-track {
    height: 12px;
    border-radius: 999px;
    margin-top: 24px;
    background: rgba(1, 9, 75, 0.08);
}

.meter-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.meter-caption {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 850;
}

.pricing-faq {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 44px 0 28px;
}

.pricing-faq article {
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    padding-top: 20px;
}

.pricing-faq span {
    display: block;
    color: var(--navy);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.14;
}

.pricing-faq p {
    margin: 12px 0 0;
    font-size: 14px;
}

.pricing-open-hero {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    padding: 40px 0 0;
    text-align: center;
}

.pricing-open-hero::before,
.pricing-open-hero::after,
.pricing-card-stage::before,
.pricing-card-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.pricing-open-hero::before {
    inset: 18px calc(50% - 50vw) -330px;
    z-index: -2;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.96), rgba(234, 243, 255, 0.92) 48%, rgba(255, 240, 237, 0.9)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 54px);
    transform: skewY(-5deg);
}

.pricing-open-hero::after {
    top: 40px;
    left: calc(50% - 34vw);
    z-index: -1;
    width: min(760px, 68vw);
    height: 124px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(1, 9, 75, 0.08), rgba(253, 97, 76, 0.16), rgba(255, 230, 109, 0.22));
    transform: rotate(-10deg);
}

.pricing-open-hero .section-kicker {
    justify-content: center;
}

.pricing-open-hero h1 {
    margin: 16px auto 0;
    color: var(--navy);
    font-size: 58px;
    line-height: 0.98;
    font-weight: 850;
}

.pricing-open-hero p {
    max-width: 710px;
    margin: 20px auto 0;
    color: var(--ink-muted);
    font-size: 18px;
}

.pricing-card-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 380px;
    margin-top: 58px;
    padding: 18px 0 66px;
    perspective: 1400px;
}

.pricing-card-stage::before {
    left: calc(50% - 520px);
    right: calc(50% - 520px);
    top: 132px;
    height: 198px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(234, 243, 255, 0.7), rgba(255, 240, 237, 0.72), rgba(253, 97, 76, 0.12));
    transform: rotate(-7deg);
}

.pricing-card-stage::after {
    left: 50%;
    bottom: 58px;
    width: min(780px, 76vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 9, 75, 0.16), transparent);
    transform: translateX(-50%);
}

.tilt-plan {
    position: relative;
    z-index: 1;
    width: min(322px, 100%);
    min-height: 298px;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 34px 86px rgba(1, 9, 75, 0.14);
    backdrop-filter: blur(22px);
    transform-style: preserve-3d;
}

.tilt-plan::after {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -64px;
    width: 210px;
    height: 148px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 18px;
    background: rgba(234, 243, 255, 0.78);
    transform: rotate(-14deg);
}

.tilt-plan-free {
    transform: rotateY(12deg) rotateZ(-2deg) translateY(18px);
}

.tilt-plan-creator {
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(15, 36, 126, 0.94));
    box-shadow: 0 40px 96px rgba(1, 9, 75, 0.24);
    transform: rotateY(-12deg) rotateZ(2deg) translateY(-8px);
}

.tilt-plan-creator::after {
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.72), rgba(255, 230, 109, 0.44));
}

.tilt-plan > * {
    position: relative;
    z-index: 1;
}

.tilt-badge {
    display: inline-flex;
    border-radius: 999px;
    margin-bottom: 12px;
    padding: 8px 11px;
    color: #ffd4ce;
    background: rgba(253, 97, 76, 0.16);
    font-size: 12px;
    font-weight: 900;
}

.tilt-plan-top {
    display: grid;
    gap: 10px;
}

.tilt-plan-top span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.tilt-plan-creator .tilt-plan-top span {
    color: #ffd4ce;
}

.tilt-plan-top strong {
    max-width: 260px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.tilt-plan-creator .tilt-plan-top strong {
    color: #ffffff;
}

.tilt-price {
    margin-top: 20px;
    color: var(--navy);
    font-size: 44px;
    line-height: 1;
    font-weight: 950;
}

.tilt-price span {
    color: var(--ink-muted);
    font-size: 18px;
    font-weight: 850;
}

.tilt-plan-creator .tilt-price {
    color: #ffffff;
}

.tilt-plan-creator .tilt-price span {
    color: rgba(255, 255, 255, 0.7);
}

.tilt-fee {
    margin: 8px 0 20px;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 900;
}

.tilt-plan-creator .tilt-fee {
    color: rgba(255, 255, 255, 0.76);
}

.tilt-includes {
    display: grid;
    gap: 10px;
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    margin-top: 24px;
    padding-top: 22px;
}

.tilt-plan-creator .tilt-includes {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.tilt-includes span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
}

.tilt-plan-creator .tilt-includes span {
    color: rgba(255, 255, 255, 0.86);
}

.tilt-includes span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--coral);
}

.tilt-plan-creator .tilt-includes span::before {
    background: var(--lemon);
}

.pricing-content-section {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(360px, 1fr);
    gap: 70px;
    align-items: center;
    padding: 82px 0;
}

.pricing-content-section h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.04;
}

.pricing-content-section p {
    margin: 16px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
}

.pricing-capability-list {
    border-top: 1px solid rgba(1, 9, 75, 0.1);
}

.pricing-capability-list article {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 24px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 20px 0;
}

.pricing-capability-list span {
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 950;
}

.pricing-capability-list strong {
    color: var(--navy);
    font-size: 20px;
    line-height: 1.18;
}

.pricing-content-section-flip {
    position: relative;
    grid-template-columns: minmax(360px, 0.82fr) minmax(0, 0.92fr);
}

.pricing-content-section-flip::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 255, 0.86), rgba(255, 240, 237, 0.82));
    transform: skewY(-3deg);
}

.pricing-upgrade-card {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 24px 62px rgba(1, 9, 75, 0.1);
}

.pricing-upgrade-card div:not(.upgrade-track) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding: 14px 0;
    color: var(--ink-muted);
    font-weight: 800;
}

.pricing-upgrade-card strong {
    color: var(--navy);
}

.upgrade-track {
    height: 12px;
    border-radius: 999px;
    margin-top: 24px;
    background: rgba(1, 9, 75, 0.08);
}

.upgrade-track span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.pricing-upgrade-card p {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 800;
}

.features-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1fr);
    gap: 64px;
    align-items: center;
    padding: 58px 0 86px;
}

.features-hero::before,
.features-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.features-hero::before {
    inset: 20px calc(50% - 50vw) 32px;
    z-index: -2;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.96), rgba(234, 243, 255, 0.92) 48%, rgba(255, 240, 237, 0.88)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 54px);
    transform: skewY(-5deg);
}

.features-hero::after {
    top: 62px;
    right: calc(50% - 50vw - 90px);
    z-index: -1;
    width: min(760px, 68vw);
    height: 136px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(1, 9, 75, 0.1), rgba(253, 97, 76, 0.16), rgba(255, 230, 109, 0.23));
    transform: rotate(-12deg);
}

.features-hero h1 {
    margin: 14px 0 0;
    color: var(--navy);
    font-size: 60px;
    line-height: 0.98;
    font-weight: 850;
}

.features-hero p,
.feature-focus p,
.bundle-section p,
.delivery-section p,
.operations-section p,
.feature-cta-band p {
    color: var(--ink-muted);
}

.features-hero-copy > p {
    max-width: 600px;
    margin: 22px 0 0;
    font-size: 18px;
}

.features-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.features-hero-art {
    position: relative;
    min-height: 460px;
}

.features-hero-art::before {
    content: "";
    position: absolute;
    inset: 11% 5% 14%;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(253, 97, 76, 0.16), transparent 62%),
        radial-gradient(circle at 70% 36%, rgba(141, 224, 180, 0.2), transparent 58%);
    filter: blur(22px);
    animation: site-glow-breathe 5.6s ease-in-out infinite;
}

.features-hero-art img {
    width: min(100%, 650px);
}

.features-hero-stack {
    position: relative;
    min-height: 470px;
    perspective: 1300px;
}

.flow-card {
    position: absolute;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 74px rgba(1, 9, 75, 0.14);
    backdrop-filter: blur(22px);
}

.flow-card-site {
    top: 52px;
    left: 0;
    width: min(390px, 72%);
    padding: 20px;
    transform: rotateY(-10deg) rotateZ(-1deg);
}

.flow-card-modal {
    top: 128px;
    right: 0;
    width: min(330px, 60%);
    padding: 18px;
    transform: rotateY(8deg) rotateZ(1deg) translateZ(62px);
}

.flow-card-result {
    left: 82px;
    bottom: 34px;
    display: grid;
    gap: 7px;
    width: min(340px, 66%);
    padding: 16px;
    transform: rotateZ(-2deg);
}

.flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 13px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.flow-card-top > span {
    width: 34px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--lemon));
}

.flow-card-top em {
    border-radius: 999px;
    padding: 7px 10px;
    color: #24553a;
    background: var(--mint);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.flow-card-site h2 {
    margin: 26px 0 8px;
    color: var(--navy);
    font-size: 30px;
    line-height: 1;
}

.flow-card-site p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.flow-card-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-top: 22px;
    padding: 11px 15px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 16px 32px rgba(253, 97, 76, 0.28);
    font-weight: 900;
}

.flow-line {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px;
    background: #ffffff;
}

.flow-line span,
.flow-card-result span {
    display: block;
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
}

.flow-line strong,
.flow-card-result strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 14px;
}

.benefit-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    margin: 6px 0 64px;
}

.benefit-strip article {
    border-right: 1px solid rgba(1, 9, 75, 0.09);
    padding: 24px 34px;
}

.benefit-strip article:first-child {
    padding-left: 0;
}

.benefit-strip article:last-child {
    border-right: 0;
    padding-right: 0;
}

.benefit-strip span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.benefit-strip strong {
    display: block;
    margin-top: 10px;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.15;
}

.feature-depth-section {
    position: relative;
    padding: 84px 0 62px;
}

.feature-depth-section::before {
    content: "";
    position: absolute;
    inset: 22px calc(50% - 50vw);
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.94), rgba(234, 243, 255, 0.84) 45%, rgba(223, 248, 231, 0.72)),
        repeating-linear-gradient(135deg, rgba(1, 9, 75, 0.04) 0 1px, transparent 1px 56px);
    transform: skewY(2.5deg);
}

.feature-depth-head {
    max-width: 850px;
    margin-bottom: 28px;
}

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

.feature-depth-grid article {
    min-height: 260px;
    padding: 22px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.feature-depth-grid article:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(1, 9, 75, 0.1);
}

.feature-depth-grid h3 {
    margin: 22px 0 10px;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.08;
}

.feature-depth-grid p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
}

.feature-focus,
.bundle-section,
.delivery-section,
.operations-section {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1fr);
    gap: 72px;
    align-items: center;
    padding: 78px 0;
}

.feature-focus h2,
.bundle-section h2,
.delivery-section h2,
.operations-section h2,
.feature-cta-band h2 {
    margin: 12px 0 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.04;
}

.feature-focus p,
.bundle-section p,
.delivery-section p,
.operations-section p,
.feature-cta-band p {
    margin: 16px 0 0;
    font-size: 17px;
}

.feature-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.feature-points span {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 850;
}

.checkout-benefit-visual {
    --checkout-scene-scale: 1;
    --checkout-scene-width: 563px;
    --checkout-scene-height: 500px;
    position: relative;
    isolation: isolate;
    width: var(--checkout-scene-width);
    max-width: 100%;
    height: var(--checkout-scene-height);
    margin-inline: auto;
    perspective: 1500px;
}

.checkout-benefit-scene {
    position: absolute;
    top: 0;
    left: 0;
    isolation: isolate;
    width: var(--checkout-scene-width);
    height: var(--checkout-scene-height);
    transform: scale(var(--checkout-scene-scale));
    transform-origin: top left;
}

.checkout-benefit-scene::before {
    content: "";
    position: absolute;
    inset: 28px 10px 22px;
    z-index: -3;
    border: 1px solid rgba(1, 9, 75, 0.07);
    border-radius: 8px;
    background:
        linear-gradient(rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 18%, rgba(253, 97, 76, 0.1), transparent 34%),
        radial-gradient(circle at 82% 82%, rgba(141, 224, 180, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(234, 243, 255, 0.62));
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 24px 70px rgba(1, 9, 75, 0.08);
    transform: rotate(-1deg);
}

.checkout-benefit-scene::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 62px;
    z-index: -2;
    width: 360px;
    height: 92px;
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.13);
    filter: blur(30px);
    transform: rotate(-9deg);
}

.checkout-visual-glow {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(20px);
    opacity: 0.92;
    pointer-events: none;
    animation: site-glow-breathe 6s ease-in-out infinite;
}

.checkout-visual-glow-coral {
    top: 56px;
    left: 46px;
    width: 280px;
    height: 190px;
    background: radial-gradient(circle, rgba(253, 97, 76, 0.2), transparent 68%);
}

.checkout-visual-glow-mint {
    right: 4px;
    bottom: 48px;
    width: 330px;
    height: 230px;
    background: radial-gradient(circle, rgba(141, 224, 180, 0.24), transparent 66%);
    animation-delay: -2.5s;
}

.checkout-page-card,
.checkout-modal-card,
.checkout-signal-stack {
    position: absolute;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 34px 82px rgba(1, 9, 75, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.86) inset;
    backdrop-filter: blur(20px);
}

.checkout-page-card {
    top: 58px;
    left: 8px;
    width: min(448px, 72%);
    overflow: hidden;
    padding: 18px 18px 20px;
    background:
        radial-gradient(circle at 8% 12%, rgba(253, 97, 76, 0.07), transparent 30%),
        rgba(255, 255, 255, 0.92);
    transform: rotateY(-10deg) rotateZ(-1.6deg) translateZ(18px);
}

.checkout-page-card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -82px;
    width: 222px;
    height: 182px;
    border: 1px solid rgba(1, 9, 75, 0.07);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(234, 243, 255, 0.82), rgba(255, 240, 236, 0.56));
    transform: rotate(-18deg);
}

.checkout-page-top,
.checkout-page-product,
.checkout-page-footer,
.checkout-modal-head,
.checkout-modal-product,
.checkout-modal-fields,
.checkout-signal-stack span {
    position: relative;
    z-index: 1;
}

.checkout-page-top,
.checkout-page-footer,
.checkout-modal-head,
.checkout-modal-product {
    display: flex;
    align-items: center;
    gap: 13px;
}

.checkout-page-top {
    justify-content: space-between;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 13px;
}

.checkout-page-top span {
    width: 70px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--coral), var(--lemon));
}

.checkout-page-top strong,
.checkout-page-product span,
.checkout-page-footer span,
.checkout-modal-head span,
.checkout-modal-product p,
.checkout-signal-stack span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.checkout-page-product {
    align-items: start;
    margin-top: 28px;
}

.checkout-page-art,
.checkout-modal-product > span {
    flex: 0 0 auto;
    border-radius: 8px;
    background:
        radial-gradient(circle at 26% 22%, rgba(255, 230, 109, 0.72), transparent 28%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 15px 32px rgba(1, 9, 75, 0.16);
}

.checkout-page-art {
    width: 82px;
    height: 82px;
}

.checkout-page-product h3 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 30px;
    line-height: 1;
}

.checkout-page-product p {
    max-width: 270px;
    margin-top: 8px;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.42;
}

.checkout-page-footer {
    justify-content: space-between;
    margin-top: 28px;
}

.checkout-page-footer button,
.checkout-modal-confirm {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 16px 34px rgba(253, 97, 76, 0.28);
    font: inherit;
    font-size: 14px;
    font-weight: 950;
}

.checkout-modal-card {
    top: 160px;
    right: -2px;
    width: min(360px, 60%);
    padding: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.92)),
        #ffffff;
    transform: rotateY(8deg) rotateZ(1deg) translateZ(86px);
}

.checkout-modal-head {
    justify-content: space-between;
}

.checkout-modal-head strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 27px;
    line-height: 1;
}

.checkout-modal-head em {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 8px 11px;
    color: var(--navy);
    background: rgba(234, 243, 255, 0.78);
    font-style: normal;
    font-size: 13px;
    font-weight: 950;
}

.checkout-modal-product {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    margin-top: 18px;
    padding: 12px;
    background: #ffffff;
}

.checkout-modal-product > span {
    width: 44px;
    height: 44px;
}

.checkout-modal-product strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.1;
}

.checkout-modal-product p {
    margin: 3px 0 0;
}

.checkout-modal-fields {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.checkout-modal-fields span {
    display: flex;
    align-items: center;
    min-height: 46px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 0 13px;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 850;
}

.checkout-modal-fields span::before,
.checkout-signal-stack span::before {
    content: "";
    display: inline-grid;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 9px;
    background: #27b36f;
    box-shadow: 0 0 0 5px rgba(39, 179, 111, 0.12);
}

.checkout-modal-confirm {
    width: 100%;
    margin-top: 14px;
}

.checkout-signal-stack {
    left: 52px;
    bottom: 24px;
    display: grid;
    gap: 9px;
    width: min(284px, 48%);
    padding: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 255, 250, 0.86));
    transform: rotateZ(-1.4deg) translateZ(54px);
}

.checkout-signal-stack span {
    display: flex;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.07);
    border-radius: 8px;
    padding: 10px 11px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(1, 9, 75, 0.06);
}

.feature-split-dark {
    position: relative;
    left: 50%;
    right: 50%;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 0.82fr);
    gap: 72px;
    align-items: center;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
    padding: 96px max(20px, calc((100vw - 1120px) / 2));
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(126deg, #01094b 0%, #07136b 48%, #14248f 100%);
}

.feature-split-dark::before {
    content: "";
    position: absolute;
    top: -38px;
    right: -120px;
    width: 720px;
    height: 150px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(253, 97, 76, 0.92), rgba(255, 230, 109, 0.66));
    transform: rotate(-12deg);
}

.growth-lab,
.feature-split-copy {
    position: relative;
    z-index: 1;
}

.growth-lab {
    --growth-scene-scale: 1;
    --growth-scene-width: 500px;
    --growth-scene-height: 390px;
    width: var(--growth-scene-width);
    max-width: 100%;
    height: var(--growth-scene-height);
}

.growth-lab-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--growth-scene-width);
    height: var(--growth-scene-height);
    transform: scale(var(--growth-scene-scale));
    transform-origin: top left;
}

.growth-lab-card,
.growth-lab-feed {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);
}

.growth-lab-card {
    top: 28px;
    left: 0;
    width: min(340px, 72%);
    padding: 22px;
    transform: rotateY(-8deg) rotateZ(-1deg);
}

.growth-lab-card span,
.growth-lab-feed div {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 850;
}

.growth-lab-card strong {
    display: block;
    margin-top: 28px;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.04;
}

.growth-lab-card p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.growth-lab-feed {
    right: 0;
    bottom: 44px;
    display: grid;
    gap: 10px;
    width: min(320px, 68%);
    padding: 16px;
    transform: rotateY(8deg) rotateZ(1deg);
}

.growth-lab-feed div {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 10px;
}

.growth-lab-feed div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.growth-lab-feed span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--coral);
}

.growth-lab-feed div:nth-child(2) span {
    background: var(--lemon);
}

.growth-lab-feed div:nth-child(3) span {
    background: #8de0b4;
}

.feature-split-copy h2 {
    margin: 12px 0 0;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.04;
}

.feature-split-copy p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
}

.bundle-section {
    position: relative;
    grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1fr);
    padding-top: 96px;
    padding-bottom: 88px;
}

.bundle-section::before {
    content: "";
    position: absolute;
    inset: 22px calc(50% - 50vw);
    z-index: -1;
    background:
        radial-gradient(circle at 16% 26%, rgba(253, 97, 76, 0.1), transparent 32%),
        radial-gradient(circle at 84% 72%, rgba(141, 224, 180, 0.16), transparent 34%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.86) 46%, rgba(255, 247, 232, 0.74)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.032) 0 1px, transparent 1px 56px);
    transform: skewY(-2deg);
}

.bundle-copy p {
    max-width: 600px;
}

.bundle-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(1, 9, 75, 0.1);
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    margin-top: 30px;
}

.bundle-benefits article {
    border-right: 1px solid rgba(1, 9, 75, 0.09);
    padding: 19px 18px 20px;
}

.bundle-benefits article:first-child {
    padding-left: 0;
}

.bundle-benefits article:last-child {
    border-right: 0;
    padding-right: 0;
}

.bundle-benefits span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.bundle-benefits strong {
    display: block;
    margin-top: 10px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.28;
}

.bundle-visual {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
}

.bundle-visual::before {
    content: "";
    position: absolute;
    inset: 14% 8% 10%;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 38%, rgba(253, 97, 76, 0.16), transparent 55%),
        radial-gradient(circle at 74% 60%, rgba(141, 224, 180, 0.2), transparent 58%);
    filter: blur(20px);
    animation: site-glow-breathe 6s ease-in-out infinite;
}

.bundle-visual img {
    display: block;
    width: min(112%, 760px);
    max-width: none;
    margin-inline: -6%;
    filter: drop-shadow(0 30px 54px rgba(1, 9, 75, 0.14));
}

@media (max-width: 980px) {
    .bundle-section {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 72px;
        padding-bottom: 74px;
    }

    .bundle-copy p {
        max-width: 680px;
    }

    .bundle-benefits {
        grid-template-columns: 1fr;
    }

    .bundle-benefits article,
    .bundle-benefits article:first-child,
    .bundle-benefits article:last-child {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.09);
        padding: 18px 0;
    }

    .bundle-benefits article:last-child {
        border-bottom: 0;
    }

    .bundle-visual img {
        width: min(100%, 720px);
        max-width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .bundle-section {
        padding-top: 54px;
        padding-bottom: 56px;
    }

    .bundle-visual img {
        width: 100%;
    }
}

.delivery-section {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: 58px;
    align-items: start;
    padding-top: 92px;
    padding-bottom: 72px;
}

.delivery-copy {
    max-width: 470px;
}

.delivery-copy p {
    max-width: 440px;
}

.delivery-suite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
}

.delivery-flow span,
.delivery-ops-list span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.delivery-flow {
    display: grid;
    border-top: 1px solid rgba(1, 9, 75, 0.12);
}

.delivery-flow-feature {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 22px 0;
}

.delivery-flow-feature strong,
.delivery-flow-stack strong,
.delivery-ops-list strong {
    display: block;
    color: var(--navy);
}

.delivery-flow-feature strong {
    font-size: 20px;
    line-height: 1.18;
}

.delivery-flow-stack {
    display: grid;
}

.delivery-flow-stack article {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 22px 0;
}

.delivery-flow-stack article:last-child {
    border-bottom: 0;
}

.delivery-flow-stack strong {
    font-size: 20px;
    line-height: 1.18;
}

.delivery-ops-list {
    display: grid;
    border-top: 1px solid rgba(1, 9, 75, 0.12);
}

.delivery-ops-list article {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 22px 0;
}

.delivery-ops-list strong {
    font-size: 17px;
    line-height: 1.26;
}

.delivery-ops-list article:last-child {
    border-bottom: 0;
}

@media (max-width: 980px) {
    .delivery-suite {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .delivery-copy {
        max-width: 720px;
    }

    .delivery-copy p {
        max-width: 640px;
    }
}

@media (max-width: 760px) {
    .delivery-flow-feature,
    .delivery-flow-stack article,
    .delivery-ops-list article {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
    }

    .delivery-flow-feature strong {
        font-size: 20px;
    }
}

.feature-ops-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 28px 0 34px;
}

.feature-ops-strip article {
    min-height: 190px;
    padding: 20px;
}

.feature-ops-strip article::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -36px;
    width: 104px;
    height: 96px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 18px;
    background: rgba(234, 243, 255, 0.62);
    transform: rotate(-14deg);
}

.feature-ops-strip strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 24px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.18;
}

.operations-section {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 0.84fr);
}

.operations-board {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 26px 68px rgba(1, 9, 75, 0.11);
    backdrop-filter: blur(20px);
}

.operations-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding-bottom: 18px;
}

.operations-top span,
.operations-row em {
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.operations-top strong {
    color: var(--navy);
}

.operations-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding: 16px 0;
}

.operations-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.operations-row strong {
    color: var(--navy);
    font-size: 14px;
}

.feature-cta-band {
    position: relative;
    left: 50%;
    right: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
    padding: 72px max(20px, calc((100vw - 1120px) / 2));
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(105deg, var(--coral), #f04e3d 48%, #c9352b 100%);
}

.feature-cta-band::before {
    content: "";
    position: absolute;
    top: 20px;
    right: max(20px, calc((100vw - 1120px) / 2));
    width: 360px;
    height: 96px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(-10deg);
}

.feature-cta-band > * {
    position: relative;
    z-index: 1;
}

.feature-cta-band div {
    max-width: 760px;
}

.feature-cta-band h2,
.feature-cta-band p {
    color: #ffffff;
}

.onboarding-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1fr);
    gap: 34px;
    align-items: center;
    padding: 34px 0 62px;
}

.onboarding-shell-wide {
    grid-template-columns: minmax(0, 0.56fr) minmax(600px, 1fr);
}

.wizard-shell {
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 34px 0 62px;
}

.wizard-shell-wide {
    width: min(100%, 1080px);
}

.license-wizard-shell {
    width: min(100%, 820px);
}

.product-wizard-shell {
    width: min(100%, 840px);
}

.wizard-shell-wide .wizard-top h1 {
    max-width: 920px;
}

.wizard-top {
    margin: 0 auto 22px;
    text-align: center;
}

.wizard-top h1 {
    max-width: 720px;
    margin: 14px auto 0;
    color: var(--navy);
    font-size: 42px;
    line-height: 1.02;
}

.wizard-top p {
    max-width: 570px;
    margin: 14px auto 0;
    color: var(--ink-muted);
    font-size: 17px;
}

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

.wizard-card {
    width: 100%;
    margin: 0 auto;
}

.product-wizard-card {
    max-width: 760px;
}

.wizard-checkout-flow {
    display: grid;
    gap: 18px;
}

.wizard-checkout-flow .checkout-preview-card {
    min-height: 620px;
}

.onboarding-copy h1 {
    margin: 14px 0 0;
    color: var(--navy);
    font-size: 50px;
    line-height: 1;
}

.onboarding-copy p {
    max-width: 560px;
    margin: 18px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
}

.onboarding-intro-shell {
    position: relative;
    display: grid;
    width: min(100%, 1040px);
    margin: 0 auto;
    gap: 18px;
    padding: 34px 0 54px;
}

.onboarding-intro-shell::before {
    content: none;
}

.onboarding-intro-shell::after {
    content: none;
}

.onboarding-intro-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 28px 34px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 18%, rgba(141, 224, 180, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
    padding: 34px;
}

.onboarding-intro-copy {
    display: grid;
    gap: 0;
    align-content: center;
}

.onboarding-intro-copy h1 {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(36px, 4.4vw, 54px);
    line-height: 1;
}

.onboarding-intro-copy p {
    max-width: 610px;
    margin: 18px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 1.55;
}

.onboarding-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 24px;
}

.onboarding-intro-actions span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 850;
}

.onboarding-intro-art {
    display: grid;
    place-items: center;
    min-height: 260px;
}

.onboarding-intro-art img {
    display: block;
    width: min(100%, 330px);
    filter: drop-shadow(0 24px 42px rgba(1, 9, 75, 0.14));
    animation: marketing-art-float 7s ease-in-out infinite;
}

.onboarding-intro-path {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    border-top: 1px solid rgba(1, 9, 75, 0.09);
    padding: 24px 0 0;
}

.onboarding-intro-path-heading {
    display: grid;
    gap: 8px;
}

.onboarding-intro-path-heading strong {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.08;
}

.onboarding-intro-path-heading span {
    max-width: 320px;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}

.onboarding-intro-path ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.onboarding-intro-path li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    padding: 14px;
}

.onboarding-intro-path li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(253, 97, 76, 0.12);
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 950;
}

.onboarding-intro-path li strong {
    color: var(--navy);
    font-size: 16px;
    line-height: 1.18;
}

.onboarding-intro-path li p {
    margin: 5px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.42;
}

.is-onboarding-defaults-modal-open {
    overflow: hidden;
}

body:is(
    .is-refund-modal-open,
    .is-onboarding-defaults-modal-open,
    .is-billing-modal-open,
    .is-email-test-modal-open,
    .is-resource-bulk-modal-open
) .page-main {
    z-index: 1000;
}

body:is(
    .is-refund-modal-open,
    .is-onboarding-defaults-modal-open,
    .is-billing-modal-open,
    .is-email-test-modal-open,
    .is-resource-bulk-modal-open
) .site-header {
    z-index: 0;
}

.onboarding-defaults-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 16%, rgba(253, 97, 76, 0.16), transparent 32%),
        rgba(1, 9, 75, 0.34);
    padding: 24px;
    backdrop-filter: blur(12px);
}

.onboarding-defaults-modal-backdrop[hidden] {
    display: none;
}

.onboarding-defaults-modal {
    position: relative;
    width: min(100%, 620px);
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 10px;
    background:
        radial-gradient(circle at 84% 12%, rgba(141, 224, 180, 0.18), transparent 32%),
        radial-gradient(circle at 8% 90%, rgba(253, 97, 76, 0.12), transparent 34%),
        #fff;
    box-shadow: 0 34px 90px rgba(1, 9, 75, 0.24);
    padding: 30px;
}

.onboarding-defaults-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.onboarding-defaults-heading {
    display: grid;
    gap: 12px;
    max-width: 500px;
}

.onboarding-defaults-heading h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1;
}

.onboarding-defaults-heading p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
}

.onboarding-defaults-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.62fr);
    gap: 18px;
    margin-top: 24px;
}

.onboarding-defaults-field {
    margin: 0;
}

.onboarding-defaults-field > span:first-child {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-defaults-field select {
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--navy);
    font: inherit;
    font-weight: 850;
    padding: 0 16px;
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.06);
}

.onboarding-defaults-color-control {
    min-height: 58px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.06);
}

.onboarding-defaults-note {
    grid-column: 1 / -1;
    border: 1px solid rgba(141, 224, 180, 0.55);
    border-radius: 8px;
    background: rgba(238, 255, 247, 0.72);
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    padding: 14px 16px;
}

.onboarding-defaults-note strong {
    color: var(--navy);
}

.onboarding-defaults-form .button {
    grid-column: 1 / -1;
    justify-self: start;
}

.wizard-timeline {
    width: min(100%, 760px);
    margin: 0 auto 24px;
}

.wizard-timeline ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizard-timeline--steps-4 ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wizard-timeline li {
    position: relative;
    display: flex;
    justify-content: center;
}

.wizard-timeline li + li::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: rgba(1, 9, 75, 0.12);
}

.wizard-timeline li:has(.is-complete) + li::before {
    background: linear-gradient(90deg, #8de0b4, rgba(253, 97, 76, 0.34));
}

.wizard-timeline-step {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 106px;
    justify-items: center;
    gap: 7px;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

a.wizard-timeline-step {
    cursor: pointer;
}

.wizard-step-marker {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 999px;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.07);
    font-size: 14px;
}

.wizard-timeline-step.is-active {
    color: var(--coral-strong);
}

.wizard-timeline-step.is-active .wizard-step-marker {
    border-color: rgba(253, 97, 76, 0.42);
    color: #ffffff;
    background: var(--coral);
    box-shadow: 0 14px 32px rgba(253, 97, 76, 0.26);
}

.wizard-timeline-step.is-complete {
    color: #24553a;
}

.wizard-timeline-step.is-complete .wizard-step-marker {
    border-color: rgba(78, 173, 118, 0.34);
    color: #24553a;
    background: var(--mint);
}

.wizard-timeline-step.is-locked {
    cursor: not-allowed;
    opacity: 0.62;
}

.onboarding-card {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.11);
    backdrop-filter: blur(20px);
}

.onboarding-card.product-wizard-card {
    padding: 22px;
    background:
        radial-gradient(circle at 10% 2%, rgba(253, 97, 76, 0.18), transparent 32%),
        radial-gradient(circle at 92% 88%, rgba(141, 224, 180, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.86));
}

.product-quick-card {
    padding: 20px;
}

.product-quick-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.58fr);
    gap: 18px;
    align-items: start;
}

.product-quick-form {
    margin-top: 0;
}

.product-details-panel {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.74);
}

.product-basics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px;
    gap: 18px;
    align-items: start;
}

.product-basics-fields {
    display: grid;
    gap: 14px;
}

.product-type-field {
    min-width: 0;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 10px;
    margin: 0;
    padding: 12px 14px 14px;
    background: rgba(255, 255, 255, 0.38);
    gap: 8px;
}

.product-type-field legend {
    padding: 0 7px;
    color: var(--navy-soft);
    font-size: 14px;
    font-weight: 800;
}

.product-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-type-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 86px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 13px;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-type-option:hover,
.product-type-option:focus-within,
.product-type-option.is-selected {
    border-color: rgba(253, 97, 76, 0.34);
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.08);
    transform: translateY(-1px);
}

.product-type-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--coral);
}

.product-type-option span {
    display: grid;
    gap: 4px;
}

.product-type-option strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.product-type-option em {
    color: var(--ink-muted);
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.35;
}

.product-type-field.is-locked .product-type-option {
    cursor: default;
}

.product-type-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.product-type-field.is-locked .product-type-option:not(.is-selected) {
    opacity: 0.58;
}

.product-type-option.is-disabled:hover,
.product-type-option.is-disabled:focus-within,
.product-type-field.is-locked .product-type-option:hover,
.product-type-field.is-locked .product-type-option:focus-within {
    transform: none;
}

.product-type-option.is-disabled:hover,
.product-type-option.is-disabled:focus-within,
.product-type-field.is-locked .product-type-option:not(.is-selected):hover,
.product-type-field.is-locked .product-type-option:not(.is-selected):focus-within {
    border-color: rgba(1, 9, 75, 0.1);
    box-shadow: none;
}

.product-price-row {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 230px);
    gap: 12px;
    align-items: start;
}

.compact-price-field {
    max-width: 210px;
}

.product-price-row .compact-price-field {
    max-width: none;
}

.product-image-field {
    gap: 8px;
}

.product-quick-form .field textarea {
    min-height: 108px;
}

.product-tag-field {
    gap: 7px;
}

.field-help {
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.45;
}

.tag-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    min-height: 52px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.8);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.tag-editor:focus-within {
    border-color: rgba(253, 97, 76, 0.42);
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.1);
}

.tag-editor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.tag-editor input[type="text"] {
    flex: 1 1 210px;
    min-width: 160px;
    min-height: 34px;
    border: 0;
    padding: 0 3px;
    color: var(--navy);
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 800;
    outline: 0;
}

.tag-editor input[type="text"]::placeholder {
    color: rgba(86, 101, 128, 0.7);
}

.tag-chip,
.resource-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 4px 9px;
    color: #245268;
    background: rgba(235, 248, 255, 0.78);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.tag-chip button {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0;
    color: #5e6f8d;
    background: rgba(1, 9, 75, 0.06);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.secure-record-tags {
    margin-top: 10px;
}

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

.image-dropzone {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px dashed rgba(1, 9, 75, 0.22);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy);
    background:
        linear-gradient(rgba(1, 9, 75, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.03) 1px, transparent 1px),
        rgba(255, 255, 255, 0.76);
    background-size: 20px 20px, 20px 20px, auto;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.image-dropzone:hover,
.image-dropzone.is-dragging,
.image-dropzone.is-ready {
    border-color: rgba(253, 97, 76, 0.56);
    box-shadow: 0 16px 40px rgba(1, 9, 75, 0.09);
    transform: translateY(-1px);
}

.image-dropzone.is-invalid {
    border-color: rgba(180, 35, 24, 0.32);
    background: #fff1ef;
}

.image-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.image-dropzone-preview {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.92);
    background:
        radial-gradient(circle at 20% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 12px 26px rgba(1, 9, 75, 0.1);
    font-size: 24px;
    font-weight: 950;
}

.image-dropzone-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-dropzone-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.image-dropzone-copy strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.image-dropzone-copy em {
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    line-height: 1.4;
}

.image-dropzone-square {
    grid-template-columns: 1fr;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    gap: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

.image-dropzone-square::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.34) 42%, transparent 72%);
    pointer-events: none;
}

.image-dropzone-square .image-dropzone-preview {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    box-shadow: none;
}

.image-dropzone-square .image-dropzone-copy {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 14px;
}

.image-dropzone-square .image-dropzone-copy strong {
    color: #ffffff;
    font-size: 15px;
    text-shadow: 0 2px 8px rgba(1, 9, 75, 0.55), 0 1px 2px rgba(1, 9, 75, 0.36);
}

.image-dropzone-square .image-dropzone-copy em {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    text-shadow: 0 2px 8px rgba(1, 9, 75, 0.5), 0 1px 2px rgba(1, 9, 75, 0.34);
}

.file-step-card,
.license-step-card,
.bundle-products-card {
    display: grid;
    gap: 18px;
    max-width: 640px;
    padding: 22px;
    background:
        radial-gradient(circle at 12% 4%, rgba(253, 97, 76, 0.13), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(141, 224, 180, 0.14), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.88));
}

.bundle-products-card {
    max-width: 780px;
}

.bundle-products-list {
    display: grid;
    gap: 10px;
}

.bundle-product-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.bundle-product-option:hover,
.bundle-product-option:focus-within {
    border-color: rgba(253, 97, 76, 0.34);
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.08);
    transform: translateY(-1px);
}

.bundle-product-option.is-selected {
    border-color: rgba(253, 97, 76, 0.64);
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 0 0 2px rgba(253, 97, 76, 0.38),
        0 18px 42px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

.bundle-product-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bundle-product-main {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.bundle-product-art {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.bundle-product-art img,
.bundle-product-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background:
        radial-gradient(circle at 28% 24%, #ffe86d, transparent 24%),
        linear-gradient(135deg, var(--coral), var(--navy));
}

.bundle-product-art::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    color: #24553a;
    background: var(--mint);
    box-shadow: 0 10px 22px rgba(36, 85, 58, 0.24);
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    transition: opacity 160ms ease, transform 160ms ease;
}

.bundle-product-option.is-selected .bundle-product-art::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.bundle-product-main strong,
.bundle-product-main em {
    display: block;
    min-width: 0;
}

.bundle-product-main strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.25;
}

.bundle-product-main em {
    margin-top: 4px;
    color: var(--ink-muted);
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bundle-product-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.bundle-product-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--ink-muted);
    background: rgba(239, 246, 255, 0.74);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.bundle-product-badge.is-ready {
    border-color: rgba(78, 173, 118, 0.24);
    color: #24553a;
    background: rgba(141, 224, 180, 0.28);
}

.bundle-product-badge.is-alert {
    border-color: rgba(180, 35, 24, 0.18);
    color: #b42318;
    background: #fff1ef;
}

.bundle-products-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.76);
}

.bundle-products-empty strong {
    color: var(--navy);
    font-size: 18px;
}

.bundle-products-empty span {
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.file-step-summary,
.license-key-count {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
}

.file-step-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.file-step-summary.has-file {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.file-step-content {
    min-width: 0;
}

.file-step-check {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(78, 173, 118, 0.34);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #8de0b4, #35b86e);
    box-shadow: 0 12px 28px rgba(78, 173, 118, 0.22);
    font-size: 24px;
    font-weight: 950;
}

.file-step-summary span,
.license-key-count span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.file-status-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-self: end;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.file-status-badge.is-ready {
    border-color: rgba(78, 173, 118, 0.24);
    color: #24553a;
    background: rgba(141, 224, 180, 0.28);
}

.file-status-badge.is-missing {
    border-color: rgba(1, 9, 75, 0.11);
    color: var(--ink-muted);
    background: rgba(239, 246, 255, 0.72);
}

.license-key-count strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.file-step-summary p {
    max-width: 100%;
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.file-dropzone {
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px dashed rgba(1, 9, 75, 0.24);
    border-radius: 8px;
    padding: 28px 20px;
    color: var(--navy);
    background:
        linear-gradient(rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        rgba(255, 255, 255, 0.72);
    background-size: 22px 22px, 22px 22px, auto;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.file-dropzone:hover,
.file-dropzone.is-dragging,
.file-dropzone.is-ready,
.file-dropzone.is-uploading {
    border-color: rgba(253, 97, 76, 0.58);
    box-shadow: 0 20px 48px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

.file-dropzone.is-uploading {
    cursor: wait;
}

.file-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.file-dropzone-icon {
    display: grid;
    min-width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--coral), var(--coral-strong));
    box-shadow: 0 16px 34px rgba(253, 97, 76, 0.26);
    font-size: 18px;
    font-weight: 950;
}

.file-dropzone strong {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.file-dropzone em,
.file-dropzone small {
    max-width: 430px;
    color: var(--ink-muted);
    font-style: normal;
    line-height: 1.45;
}

.file-dropzone em {
    font-size: 14px;
    font-weight: 800;
}

.file-dropzone small {
    font-size: 13px;
}

.upload-progress {
    display: block;
    width: min(100%, 360px);
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.09);
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.upload-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--coral), #ffd96a);
    transition: width 420ms ease;
}

.file-dropzone.is-uploading .upload-progress span {
    background: linear-gradient(90deg, var(--coral), #ffd96a, var(--coral));
    background-size: 180% 100%;
    animation: upload-shimmer 1.2s linear infinite;
}

.file-dropzone.is-uploading .upload-progress {
    opacity: 1;
    transform: translateY(0);
}

.button:disabled {
    cursor: wait;
    opacity: 0.78;
}

@keyframes upload-shimmer {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 180% 0;
    }
}

.license-choice-card {
    display: grid;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    overflow: hidden;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.76);
}

.product-discount-choice {
    border: 0;
    overflow: visible;
    background: transparent;
}

.license-primary-toggle,
.license-fallback-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    cursor: pointer;
}

.license-choice-card .license-fallback-option {
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    background: rgba(239, 246, 255, 0.48);
}

.license-fallback-option[hidden] {
    display: none;
}

.license-primary-toggle input,
.license-fallback-option input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--coral);
}

.license-primary-toggle span,
.license-fallback-option span {
    display: grid;
    gap: 4px;
}

.license-primary-toggle strong,
.license-fallback-option strong {
    font-size: 18px;
    line-height: 1.2;
}

.license-primary-toggle em,
.license-fallback-option small {
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    line-height: 1.45;
}

.license-settings {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 14px;
    background: rgba(239, 246, 255, 0.62);
}

.license-settings[hidden] {
    display: none;
}

.license-dropzone {
    padding: 24px 18px;
}

.embed-card span {
    display: block;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.field textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 8px;
    padding: 13px 14px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    font: inherit;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.14);
}

.field input[type="file"] {
    padding: 11px 14px;
}

.color-field input[type="color"] {
    width: 100%;
    height: 50px;
    padding: 7px;
}

.onboarding-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.onboarding-check-field {
    min-height: 50px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.76);
}

.form-footer-right {
    justify-content: flex-end;
}

.onboarding-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 18px;
    align-items: start;
}

.checkout-preview-card {
    position: relative;
    min-height: auto;
    overflow: visible;
    border-color: rgba(1, 9, 75, 0.16);
    background:
        linear-gradient(rgba(255, 255, 255, 0.34) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
        radial-gradient(circle at 72% 18%, rgba(253, 97, 76, 0.18), transparent 30%),
        radial-gradient(circle at 14% 92%, rgba(141, 224, 180, 0.15), transparent 28%),
        linear-gradient(145deg, #dfe5ee, #c8d1df 54%, #e7e2e1);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 28px 78px rgba(1, 9, 75, 0.15);
}

.checkout-builder-stage {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.checkout-button-design-panel {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: auto;
}

.checkout-settings-card {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 100%;
    border: 0;
    border-right: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 0;
    padding: 30px 28px;
    background:
        radial-gradient(circle at 92% 0%, rgba(253, 97, 76, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.96);
    box-shadow:
        0 26px 72px rgba(1, 9, 75, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(18px);
}

.checkout-settings-card .form-stack {
    gap: 14px;
    margin-top: 0;
}

.checkout-settings-card .field {
    gap: 7px;
}

.checkout-settings-card .field label {
    font-size: 13px;
}

.settings-card-heading {
    display: grid;
    gap: 4px;
}

.settings-card-heading span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.settings-card-heading strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.16;
}

.checkout-settings-card .onboarding-field-row {
    grid-template-columns: 0.56fr 1fr;
    gap: 12px;
}

.checkout-settings-card .onboarding-final-actions {
    grid-template-columns: 1fr;
    gap: 10px;
}

.checkout-settings-card .field input,
.checkout-settings-card .field select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
}

.checkout-settings-card .field select {
    appearance: none;
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 10px;
    padding: 12px 54px 12px 14px;
    color: var(--navy);
    cursor: pointer;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2301094b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") calc(100% - 18px) 50% / 22px 22px no-repeat,
        linear-gradient(90deg, transparent calc(100% - 48px), rgba(1, 9, 75, 0.045) calc(100% - 48px)),
        rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 24px rgba(1, 9, 75, 0.035);
    font-weight: 780;
}

.checkout-select-control {
    position: relative;
    display: block;
}

.checkout-select-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    z-index: 2;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid var(--navy);
    border-bottom: 2.5px solid var(--navy);
    pointer-events: none;
    transform: translateY(-64%) rotate(45deg);
}

.checkout-settings-card .field select:focus {
    border-color: color-mix(in srgb, var(--coral) 44%, rgba(1, 9, 75, 0.16));
    box-shadow:
        0 0 0 4px rgba(253, 97, 76, 0.12),
        0 14px 30px rgba(1, 9, 75, 0.055);
    outline: none;
}

.checkout-settings-card .color-field input[type="color"] {
    height: 44px;
}

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

.slider-field output {
    min-width: 40px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--navy);
    background: rgba(255, 241, 238, 0.78);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.checkout-settings-card .slider-field input[type="range"] {
    width: 100%;
    min-height: 28px;
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.checkout-settings-card .slider-field input[type="range"]:focus {
    box-shadow: none;
}

.checkout-settings-card .slider-field input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    background:
        linear-gradient(90deg, #66708c var(--slider-fill, 50%), rgba(1, 9, 75, 0.1) var(--slider-fill, 50%)),
        rgba(255, 255, 255, 0.9);
}

.checkout-settings-card .slider-field input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    appearance: none;
    border: 3px solid #ffffff;
    border-radius: 999px;
    margin-top: -7px;
    background: var(--coral);
    box-shadow: 0 8px 18px rgba(253, 97, 76, 0.34);
}

.checkout-settings-card .slider-field input[type="range"]::-moz-range-track {
    height: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.1);
}

.checkout-settings-card .slider-field input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: #66708c;
}

.checkout-settings-card .slider-field input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: var(--coral);
    box-shadow: 0 8px 18px rgba(253, 97, 76, 0.34);
}

.checkout-settings-card .embed-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.embed-ready-card strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.25;
}

.embed-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.embed-copy-row input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--navy);
    background: #ffffff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.checkout-settings-card .button {
    width: 100%;
    min-height: 62px;
    margin-top: 4px;
    padding: 16px 20px;
    font-size: 18px;
    box-shadow: 0 18px 36px rgba(253, 97, 76, 0.28);
}

.checkout-preview-column {
    display: grid;
    align-content: start;
    gap: 22px;
    min-width: 0;
    padding: 30px 30px 30px 34px;
}

.checkout-preview-browser {
    position: relative;
    display: flow-root;
    width: 100%;
    min-height: 402px;
    margin: 0;
    filter: drop-shadow(0 30px 74px rgba(1, 9, 75, 0.16));
    isolation: isolate;
}

.checkout-preview-browser::after {
    content: "";
    position: absolute;
    inset: 62px 1px 1px;
    z-index: 1;
    border-radius: 0 0 14px 14px;
    background: transparent;
    transition: background 160ms ease, box-shadow 160ms ease;
    pointer-events: none;
}

.checkout-preview-browser[data-preview-mode="dark"]::after {
    background:
        radial-gradient(circle at 78% 22%, rgba(141, 224, 180, 0.12), transparent 28%),
        radial-gradient(circle at 32% 72%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 32%),
        linear-gradient(135deg, #080d32 0%, #101843 48%, #111b49 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.checkout-browser-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.checkout-browser-native-url {
    fill: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
}

.checkout-preview-mode-toggle {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 3;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 999px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow:
        0 10px 24px rgba(1, 9, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.checkout-preview-mode-toggle button {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 0 11px;
    color: var(--ink-muted);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.checkout-preview-mode-toggle button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--navy);
    box-shadow: 0 8px 16px rgba(1, 9, 75, 0.16);
}

.checkout-preview-site {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(540px, calc(100% - 86px));
    margin: 102px auto 30px;
    gap: 17px;
    transition: color 160ms ease;
}

.checkout-preview-browser[data-preview-mode="dark"] .checkout-preview-site {
    color: #ffffff;
}

.checkout-placeholder-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-placeholder-nav span {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.09);
    transition: background 160ms ease;
}

.checkout-preview-browser[data-preview-mode="dark"] .checkout-placeholder-nav span {
    background: rgba(255, 255, 255, 0.16);
}

.checkout-placeholder-nav span:nth-child(1) {
    width: 82px;
}

.checkout-placeholder-nav span:nth-child(2) {
    width: 56px;
}

.checkout-placeholder-nav span:nth-child(3) {
    width: 68px;
}

.checkout-placeholder-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 22px;
    align-items: center;
}

.checkout-placeholder-copy {
    display: grid;
    gap: 11px;
}

.placeholder-line,
.placeholder-media,
.checkout-placeholder-grid span {
    display: block;
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.09);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.checkout-preview-browser[data-preview-mode="dark"] :is(.placeholder-line, .checkout-placeholder-grid span) {
    background: rgba(255, 255, 255, 0.13);
}

.placeholder-line {
    height: 16px;
}

.placeholder-line-large {
    width: 92%;
    height: 24px;
}

.placeholder-line-medium {
    width: 68%;
}

.placeholder-line-small {
    width: 48%;
}

.placeholder-media {
    height: 94px;
    background:
        radial-gradient(circle at 20% 20%, rgba(253, 97, 76, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 247, 243, 0.9));
}

.checkout-preview-browser[data-preview-mode="dark"] .placeholder-media {
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--coral) 30%, transparent), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(141, 224, 180, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.checkout-embed-slot {
    position: relative;
    display: inline-grid;
    width: fit-content;
    place-items: center;
    justify-self: start;
    margin-top: 12px;
}

.checkout-embed-slot::before,
.checkout-embed-slot::after {
    content: none;
}

.checkout-preview-site [data-zwely-preview] {
    display: block;
}

.checkout-click-note {
    position: absolute;
    top: -34px;
    left: calc(100% + 6px);
    width: 188px;
    height: 70px;
    color: var(--navy);
    filter: drop-shadow(0 8px 18px rgba(1, 9, 75, 0.12));
    pointer-events: none;
    transform: rotate(-2deg);
}

.checkout-click-note svg {
    position: absolute;
    top: 19px;
    left: 0;
    width: 86px;
    height: 54px;
    overflow: visible;
    transform: rotate(-7deg);
}

.checkout-click-note path {
    fill: none;
    stroke: var(--coral);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.checkout-click-note span {
    position: absolute;
    top: 3px;
    left: 48px;
    display: inline-flex;
    border: 1px solid rgba(253, 97, 76, 0.22);
    border-radius: 999px;
    padding: 8px 11px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(1, 9, 75, 0.08);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.checkout-preview-browser[data-preview-mode="dark"] .checkout-click-note {
    color: #ffffff;
}

.checkout-preview-browser[data-preview-mode="dark"] .checkout-click-note span {
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: #1d244f;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.checkout-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.checkout-placeholder-grid span {
    height: 64px;
    background: rgba(1, 9, 75, 0.065);
}

.checkout-preview-browser[data-preview-mode="dark"] .checkout-placeholder-grid span {
    background: rgba(255, 255, 255, 0.11);
}

.onboarding-demo-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--button-color);
    border-radius: var(--button-radius);
    margin-top: 24px;
    padding: var(--button-padding) calc(var(--button-padding) * 1.45);
    color: #ffffff;
    background: linear-gradient(180deg, var(--button-color), color-mix(in srgb, var(--button-color) 78%, #9f1f14));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--button-color) 28%, transparent);
    font-size: var(--button-font-size);
    font-weight: 900;
    cursor: pointer;
}

.onboarding-modal-preview {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
    padding: 34px 48px 34px 382px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        rgba(41, 50, 68, 0.36);
    background-size: 34px 34px, 34px 34px, auto;
    backdrop-filter: blur(8px);
}

.onboarding-modal-window {
    width: min(440px, 100%);
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 84px rgba(1, 9, 75, 0.18);
}

.checkout-theme-panel {
    display: grid;
    gap: 18px;
    min-height: 560px;
}

.checkout-theme-panel[hidden] {
    display: none;
}

.checkout-theme-strip {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 10px;
    padding: 18px;
    background:
        radial-gradient(circle at 8% 12%, rgba(253, 97, 76, 0.08), transparent 30%),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        0 20px 52px rgba(1, 9, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
}

.checkout-theme-strip-head {
    display: flex;
    max-width: none;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.checkout-theme-strip-head span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-theme-strip-head strong {
    max-width: 520px;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 820;
    line-height: 1.35;
    text-align: left;
}

.checkout-theme-stage {
    --checkout-preview-accent: var(--coral);
    --checkout-preview-radius: 8px;
    display: grid;
    min-height: 420px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 34px;
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--checkout-preview-accent) 14%, transparent), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(141, 224, 180, 0.16), transparent 34%),
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        rgba(235, 241, 249, 0.58);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 20px 54px rgba(1, 9, 75, 0.08);
}

.checkout-theme-modal {
    position: relative;
    display: grid;
    width: min(430px, 100%);
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 22px;
    padding: 22px;
    color: var(--navy);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(249, 251, 255, 0.982)),
        radial-gradient(circle at 94% -4%, color-mix(in srgb, var(--checkout-preview-accent) 6%, transparent), transparent 32%);
    box-shadow:
        0 44px 110px rgba(4, 10, 39, 0.22),
        0 16px 36px rgba(4, 10, 39, 0.1);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.checkout-theme-modal-top,
.checkout-theme-product,
.checkout-theme-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.checkout-theme-heading-stack {
    display: grid;
    gap: 5px;
}

.checkout-theme-heading-stack span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy-soft);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout-theme-heading-stack h2 {
    margin: 0;
    color: inherit;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.04;
}

.checkout-theme-heading-stack i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--checkout-preview-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--checkout-preview-accent) 12%, transparent);
}

.checkout-theme-modal-top button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
}

.checkout-theme-modal-top button span {
    position: relative;
    width: 14px;
    height: 14px;
}

.checkout-theme-modal-top button span::before,
.checkout-theme-modal-top button span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.checkout-theme-modal-top button span::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.checkout-theme-modal-top button span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.checkout-theme-product {
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.085);
    border-radius: 16px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.64);
}

.checkout-theme-product img,
.checkout-theme-product-art {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 12px;
    object-fit: cover;
    background:
        radial-gradient(circle at 20% 18%, #ffe87a, transparent 24%),
        linear-gradient(135deg, var(--checkout-preview-accent), var(--navy) 86%);
    box-shadow: 0 8px 18px rgba(1, 9, 75, 0.1);
}

.checkout-theme-product div {
    min-width: 0;
}

.checkout-theme-product strong {
    display: block;
    color: inherit;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

.checkout-theme-product p,
.checkout-theme-modal > p {
    margin: 5px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.4;
}

.checkout-theme-product em {
    flex: 0 0 auto;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--navy);
    background: #ffffff;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.checkout-theme-fields {
    display: grid;
    gap: 11px;
    border: 1px solid rgba(1, 9, 75, 0.095);
    border-radius: 16px;
    padding: 13px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 8px 20px rgba(1, 9, 75, 0.028);
}

.checkout-theme-fields-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding-bottom: 9px;
}

.checkout-theme-field,
.checkout-theme-card-field {
    display: grid;
    gap: 8px;
}

.checkout-theme-field span,
.checkout-theme-card-field > span,
.checkout-theme-fields-head span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

.checkout-theme-fields-head em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(1, 9, 75, 0.07);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--ink-muted);
    background: var(--surface-sunken);
    font-size: 10px;
    font-style: normal;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout-theme-field input,
.checkout-theme-card-field > div {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 14px;
    padding: 11px 13px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 620;
    box-shadow: none;
    outline: none;
}

.checkout-theme-field input::placeholder {
    color: rgba(92, 103, 129, 0.72);
}

.checkout-theme-card-field {
    gap: 7px;
}

.checkout-theme-card-field > span {
    padding-left: 2px;
}

.checkout-theme-card-field > div {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 9px;
    padding: 13px;
}

.checkout-theme-card-field i,
.checkout-theme-card-field > div span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.18);
}

.checkout-theme-card-field i {
    width: 28px;
    height: 18px;
    border-radius: 5px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent),
        color-mix(in srgb, var(--checkout-preview-accent) 72%, var(--navy));
}

.checkout-theme-card-field > div span {
    width: 42px;
}

.checkout-theme-card-field > div span:nth-child(3) {
    width: 58px;
}

.checkout-theme-card-field > div span:nth-child(4) {
    width: 34px;
}

.checkout-theme-total {
    align-items: center;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 2px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
}

.checkout-theme-submit {
    display: grid;
    min-height: 50px;
    place-items: center;
    border-radius: max(8px, var(--checkout-preview-radius));
    color: #ffffff;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--checkout-preview-accent) 94%, #ffffff), color-mix(in srgb, var(--checkout-preview-accent) 78%, #9f1f14));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--checkout-preview-accent) 28%, transparent);
    font-size: 16px;
    font-weight: 950;
}

.checkout-theme-modal[data-theme="gallery"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--checkout-preview-accent) 16%, rgba(1, 9, 75, 0.1));
    padding: 0 0 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.96));
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-modal-top {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    color: #ffffff;
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-heading-stack span,
.checkout-theme-modal[data-theme="gallery"] .checkout-theme-heading-stack h2 {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(1, 9, 75, 0.34);
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-modal-top button {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    background: rgba(1, 9, 75, 0.22);
    backdrop-filter: blur(14px);
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-modal-top button span::before,
.checkout-theme-modal[data-theme="gallery"] .checkout-theme-modal-top button span::after {
    background: #ffffff;
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product {
    position: relative;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 22px 22px 0 0;
    padding: 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--checkout-preview-accent) 9%, #ffffff), #ffffff);
    box-shadow: none;
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 198px;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(1, 9, 75, 0.46), rgba(1, 9, 75, 0.05) 48%, rgba(1, 9, 75, 0.22)),
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--checkout-preview-accent) 34%, transparent), transparent 34%);
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product img,
.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product-art {
    display: block;
    width: 100%;
    height: 248px;
    min-height: 248px;
    border-radius: 0;
    object-fit: cover;
    background:
        radial-gradient(circle at 18% 18%, #fff4a8, transparent 22%),
        radial-gradient(circle at 80% 16%, color-mix(in srgb, var(--checkout-preview-accent) 42%, #8de0b4), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--checkout-preview-accent) 84%, #ffffff), #01094b 82%);
    box-shadow: none;
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product div {
    position: relative;
    z-index: 1;
    margin: -72px 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 22px 46px rgba(1, 9, 75, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-product em {
    position: absolute;
    top: 92px;
    right: 18px;
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 26px rgba(1, 9, 75, 0.16);
    backdrop-filter: blur(14px);
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-fields,
.checkout-theme-modal[data-theme="gallery"] .checkout-theme-total,
.checkout-theme-modal[data-theme="gallery"] .checkout-theme-submit,
.checkout-theme-modal[data-theme="gallery"] > p {
    margin-right: 22px;
    margin-left: 22px;
}

.checkout-theme-modal[data-theme="gallery"] .checkout-theme-fields {
    border-color: transparent;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.checkout-theme-modal[data-theme="midnight"] {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    border-color: color-mix(in srgb, var(--checkout-preview-accent) 34%, rgba(141, 224, 180, 0.22));
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 108% -8%, color-mix(in srgb, var(--checkout-preview-accent) 32%, transparent), transparent 36%),
        radial-gradient(circle at -8% 108%, rgba(141, 224, 180, 0.14), transparent 34%),
        linear-gradient(145deg, #040829, #101746 58%, #050a31);
    background-size: 28px 28px, 28px 28px, auto, auto, auto;
    box-shadow:
        0 54px 130px rgba(1, 9, 75, 0.48),
        0 18px 42px color-mix(in srgb, var(--checkout-preview-accent) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-heading-stack span,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-total,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product strong,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-heading-stack h2,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-field input,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field > div {
    color: #ffffff;
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-fields,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-field input,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field > div,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-modal-top button {
    border-color: rgba(141, 224, 180, 0.16);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product img,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product-art {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.24),
        0 0 0 4px rgba(255, 255, 255, 0.055),
        0 0 32px color-mix(in srgb, var(--checkout-preview-accent) 20%, transparent);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product p,
.checkout-theme-modal[data-theme="midnight"] > p,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-field span,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field > span,
.checkout-theme-modal[data-theme="midnight"] .checkout-theme-fields-head span {
    color: rgba(226, 233, 255, 0.74);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-field input::placeholder {
    color: rgba(226, 233, 255, 0.64);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-product em {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--checkout-preview-accent) 38%, rgba(141, 224, 180, 0.2));
    background: color-mix(in srgb, var(--checkout-preview-accent) 18%, rgba(255, 255, 255, 0.08));
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field > div {
    border-color: rgba(141, 224, 180, 0.16);
    background: rgba(255, 255, 255, 0.075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 4px color-mix(in srgb, var(--checkout-preview-accent) 9%, transparent);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field i {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent),
        color-mix(in srgb, var(--checkout-preview-accent) 58%, #8de0b4);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-card-field > div span {
    background: rgba(226, 233, 255, 0.34);
}

.checkout-theme-modal[data-theme="midnight"] .checkout-theme-submit {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--checkout-preview-accent) 82%, #ffffff), color-mix(in srgb, var(--checkout-preview-accent) 68%, #8de0b4));
    box-shadow:
        0 22px 44px color-mix(in srgb, var(--checkout-preview-accent) 28%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

.checkout-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 224px));
    justify-content: start;
    gap: 12px;
    overflow-x: auto;
    padding: 0;
    scroll-snap-type: x mandatory;
    scrollbar-color: rgba(1, 9, 75, 0.22) transparent;
}

.checkout-theme-tile {
    display: grid;
    grid-template-rows: 118px auto;
    align-content: start;
    gap: 9px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 10px;
    padding: 14px;
    color: var(--navy);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.94));
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.065);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.checkout-theme-tile:hover,
.checkout-theme-tile:focus-visible {
    border-color: color-mix(in srgb, var(--coral) 30%, rgba(1, 9, 75, 0.1));
    transform: translateY(-1px);
}

.checkout-theme-tile.is-active {
    border-color: var(--coral);
    border-width: 3px;
    padding: 12px;
    box-shadow:
        0 20px 48px rgba(1, 9, 75, 0.1),
        0 0 0 5px rgba(253, 97, 76, 0.12);
}

.checkout-theme-tile-preview {
    position: relative;
    display: grid;
    width: 100%;
    height: 118px;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(145deg, #ffffff, #f6f9ff);
}

.checkout-theme-tile-preview i,
.checkout-theme-tile-preview b,
.checkout-theme-tile-preview em {
    display: block;
    border-radius: 7px;
}

.checkout-theme-tile-preview i {
    width: 44px;
    height: 44px;
    background:
        radial-gradient(circle at 20% 18%, #ffe87a, transparent 24%),
        linear-gradient(135deg, var(--coral), var(--navy) 86%);
}

.checkout-theme-tile-preview b {
    position: absolute;
    top: 14px;
    left: 64px;
    right: 16px;
    height: 12px;
    background: rgba(1, 9, 75, 0.16);
}

.checkout-theme-tile-preview em {
    position: absolute;
    right: 16px;
    bottom: 14px;
    left: 16px;
    height: 18px;
    background: var(--coral);
}

.checkout-theme-tile-preview[data-theme="gallery"] {
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.14), transparent 36%),
        #ffffff;
}

.checkout-theme-tile-preview[data-theme="gallery"] i {
    width: 72px;
    height: 58px;
}

.checkout-theme-tile-preview[data-theme="gallery"] b {
    left: 96px;
}

.checkout-theme-tile-preview[data-theme="midnight"] {
    background: linear-gradient(145deg, #070d34, #111a50 72%);
}

.checkout-theme-tile-preview[data-theme="midnight"] b {
    background: rgba(255, 255, 255, 0.24);
}

.checkout-theme-tile-preview[data-theme="midnight"] em {
    background: linear-gradient(90deg, var(--coral), #8de0b4);
}

.checkout-theme-tile strong {
    color: var(--navy);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.1;
}

.checkout-theme-actions {
    display: flex;
    justify-content: center;
}

.checkout-summary-image {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
}

.license-preview-note {
    border: 1px solid rgba(36, 85, 58, 0.14);
    border-radius: 8px;
    margin-top: 14px;
    padding: 11px 12px;
    color: #24553a;
    background: var(--mint);
    font-size: 13px;
    font-weight: 850;
}

.embed-card {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px;
    background: rgba(234, 243, 255, 0.48);
}

.embed-card textarea {
    min-height: 78px;
    resize: none;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy);
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.embed-step-card {
    display: grid;
    gap: 18px;
    max-width: 720px;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(253, 97, 76, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.86));
}

.embed-step-card-locked {
    max-width: 560px;
    padding: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(253, 97, 76, 0.14), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.17), transparent 40%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.86));
}

.embed-product-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.embed-product-summary img,
.embed-product-art {
    width: 58px;
    height: 58px;
    border-radius: 8px;
}

.embed-product-summary img {
    object-fit: cover;
}

.embed-product-art {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.9);
    background:
        radial-gradient(circle at 20% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    font-weight: 950;
}

.embed-product-summary span,
.embed-code-heading span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.embed-product-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.embed-product-summary p {
    margin: 5px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
}

.embed-code-panel {
    display: grid;
    gap: 11px;
    border: 0;
    border-radius: 0;
    padding: 14px;
    background: transparent;
}

.payments-connect-card {
    position: relative;
    display: grid;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(253, 97, 76, 0.12), transparent 32%),
        rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.07);
}

.payments-connect-card::after {
    content: "";
    position: absolute;
    right: -76px;
    bottom: -96px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(141, 224, 180, 0.32);
    border-radius: 999px;
    background: rgba(141, 224, 180, 0.12);
    pointer-events: none;
}

.payments-connect-main {
    position: relative;
    z-index: 1;
}

.payments-connect-main {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 28px;
    background: transparent;
}

.payments-connect-main > span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.payments-connect-mark {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(253, 97, 76, 0.18);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 244, 241, 0.92));
    box-shadow: 0 16px 34px rgba(253, 97, 76, 0.15);
}

.payments-connect-mark::before {
    content: "";
    width: 18px;
    height: 14px;
    border: 3px solid var(--coral);
    border-radius: 5px;
    box-shadow: inset 0 8px 0 rgba(253, 97, 76, 0.08);
}

.payments-connect-mark::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 16px;
    width: 10px;
    height: 12px;
    border: 3px solid var(--coral);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.payments-connect-main h2 {
    max-width: 430px;
    margin: 0;
    color: var(--navy);
    font-size: 26px;
    line-height: 1.08;
}

.payments-connect-main p {
    max-width: 420px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.4;
}

.payments-connect-main .button {
    justify-self: start;
    margin-top: 4px;
}

.payments-connect-main small {
    max-width: 360px;
    color: rgba(98, 111, 139, 0.86);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.payments-connected-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(78, 173, 118, 0.22);
    border-radius: 8px;
    padding: 14px;
    color: #24553a;
    background: rgba(141, 224, 180, 0.18);
}

.payments-connected-card span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #8de0b4, #35b86e);
    font-size: 15px;
    font-weight: 950;
}

.payments-connected-card strong {
    color: #24553a;
    font-size: 16px;
    line-height: 1.1;
}

.payments-connected-card p {
    grid-column: 2;
    margin: -5px 0 0;
    color: rgba(36, 85, 58, 0.78);
    font-size: 13px;
}

.embed-install-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.16), transparent 38%),
        rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.06);
}

.embed-install-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(78, 173, 118, 0.18);
    border-radius: 8px;
    padding: 12px;
    background: rgba(244, 253, 248, 0.9);
}

.embed-install-check {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #8de0b4, #20a862);
    box-shadow: 0 14px 28px rgba(32, 168, 98, 0.22);
    font-size: 16px;
    font-weight: 950;
}

.embed-install-intro strong {
    display: block;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.1;
}

.embed-install-intro p {
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.35;
}

.embed-install-list {
    display: grid;
    gap: 10px;
}

.embed-troubleshoot-link {
    justify-self: start;
    width: fit-content;
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.embed-troubleshoot-link:hover,
.embed-troubleshoot-link:focus-visible {
    color: #cf392b;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.embed-install-step {
    background: transparent;
}

.embed-code-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.embed-code-heading span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(253, 97, 76, 0.2);
    border-radius: 999px;
    color: var(--coral-strong);
    background: rgba(255, 244, 241, 0.9);
    font-size: 13px;
    line-height: 1;
}

.embed-code-heading strong {
    color: var(--navy);
    font-size: 16px;
    line-height: 1.25;
}

.embed-code-heading p {
    margin: 3px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.35;
}

.embed-code-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.embed-code-panel textarea {
    min-height: 52px;
    max-height: 70px;
    resize: none;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(1, 9, 75, 0.04);
    font: 800 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.embed-code-block {
    min-width: 0;
    min-height: 52px;
    max-height: 96px;
    overflow: auto;
    margin: 0;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(1, 9, 75, 0.04),
        0 12px 24px rgba(1, 9, 75, 0.035);
    font: 800 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-color: rgba(253, 97, 76, 0.5) rgba(1, 9, 75, 0.045);
    scrollbar-width: thin;
}

.embed-code-block:focus-visible {
    outline: 3px solid rgba(253, 97, 76, 0.18);
    outline-offset: 2px;
    border-color: rgba(253, 97, 76, 0.34);
}

.embed-code-block code {
    display: block;
    white-space: inherit;
}

.embed-code-block::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.embed-code-block::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.045);
}

.embed-code-block::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(253, 97, 76, 0.48);
    background-clip: padding-box;
}

.embed-code-panel .button {
    justify-self: stretch;
    min-width: 96px;
    padding-inline: 18px;
}

.embed-final-form {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 10px;
}

.embed-final-form .form-alert {
    grid-column: 1 / -1;
}

.onboarding-final-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.85fr);
    gap: 22px;
    align-items: stretch;
    max-width: 980px;
    margin: 18px auto 0;
}

.auth-panel,
.auth-aside {
    padding: 32px;
}

.auth-panel h1 {
    font-size: 38px;
}

.auth-panel p,
.auth-aside p {
    color: var(--ink-muted);
}

.form-stack {
    display: grid;
    gap: 16px;
    margin-top: 26px;
}

.field {
    display: grid;
    gap: 8px;
}

.field label,
.check-field {
    color: var(--navy-soft);
    font-size: 14px;
    font-weight: 800;
}

.field label span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 800;
}

.field-hint {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.45;
}

.field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 8px;
    padding: 13px 14px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.14);
}

.check-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.check-field input {
    width: 16px;
    height: 16px;
    accent-color: var(--coral);
}

.form-error,
.form-alert {
    color: #b42318;
    font-size: 13px;
    font-weight: 700;
}

.form-alert {
    border: 1px solid rgba(180, 35, 24, 0.18);
    border-radius: 8px;
    padding: 12px;
    background: #fff1ef;
}

.form-alert.form-alert-success {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    max-height: 120px;
    border-color: rgba(36, 85, 58, 0.22);
    color: #24553a;
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.28), transparent 34%),
        rgba(217, 251, 229, 0.9);
    box-shadow: 0 12px 32px rgba(36, 85, 58, 0.08);
    transform: translateX(0);
    opacity: 1;
    overflow: hidden;
    transition:
        opacity 320ms ease,
        transform 320ms ease,
        max-height 320ms ease,
        padding 320ms ease,
        border-width 320ms ease,
        margin 320ms ease;
}

.form-alert.form-alert-success .form-alert-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #34a853;
    box-shadow: 0 8px 18px rgba(52, 168, 83, 0.24);
    font-size: 13px;
    font-weight: 950;
}

.form-alert.form-alert-success.is-dismissing {
    max-height: 0;
    border-width: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateX(18px);
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.text-link {
    color: var(--coral-strong);
    font-weight: 800;
}

.field-link {
    justify-self: start;
    font-size: 13px;
}

.coming-soon-shell {
    max-width: 1040px;
}

.coming-soon-panel {
    display: grid;
    align-content: center;
}

.coming-soon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.auth-aside {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(1, 9, 75, 0.98), rgba(20, 29, 98, 0.96));
}

.auth-aside::before,
.auth-aside::after {
    content: "";
    position: absolute;
    z-index: 0;
    height: 58px;
    border-radius: 22px;
    transform: rotate(-16deg);
}

.auth-aside::before {
    top: 34px;
    right: -72px;
    width: 230px;
    background: var(--coral);
}

.auth-aside::after {
    right: 56px;
    bottom: 42px;
    width: 170px;
    background: var(--lemon);
}

.auth-aside > * {
    position: relative;
    z-index: 1;
}

.auth-aside h2 {
    max-width: 320px;
    margin: 0;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.1;
}

.auth-aside p {
    max-width: 340px;
    color: rgba(255, 255, 255, 0.72);
}

.aside-list {
    display: grid;
    gap: 12px;
    margin-top: 36px;
}

.aside-list div {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.aside-list strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
}

.aside-list span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    margin-bottom: 24px;
}

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

.dashboard-hero p {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--ink-muted);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.dashboard-panel {
    padding: 22px;
}

.panel-wide {
    grid-column: span 7;
}

.panel-side {
    grid-column: span 5;
}

.panel-full {
    grid-column: 1 / -1;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 20px;
}

.panel-heading span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 700;
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.metric-card {
    min-height: 134px;
    padding: 18px;
    box-shadow: 0 12px 36px rgba(1, 9, 75, 0.07);
}

.metric-card span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin-top: 18px;
    font-size: 34px;
    line-height: 1;
}

.metric-card em {
    display: block;
    margin-top: 10px;
    color: var(--coral-strong);
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 0 0 12px;
}

.timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--coral);
}

.dot.lemon {
    background: var(--lemon);
}

.dot.mint {
    background: #8de0b4;
}

.timeline-item strong {
    display: block;
    font-size: 14px;
}

.timeline-item span {
    color: var(--ink-muted);
    font-size: 13px;
}

.timeline-time {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 800;
}

.home-dashboard {
    display: grid;
    width: min(100%, 1080px);
    margin: 0 auto;
    gap: 18px;
}

.home-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    padding-top: 6px;
}

.home-dashboard-hero h1 {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--navy);
    font-size: 44px;
    line-height: 1.02;
}

.home-dashboard-hero p {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.45;
}

.home-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.home-revenue-card,
.home-activity-card,
.home-health-card,
.home-product-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.1), transparent 26%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 255, 0.86));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
    backdrop-filter: blur(20px);
}

.home-revenue-card {
    padding: 17px 18px 14px;
}

.home-chart-head,
.home-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.home-section-kicker {
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-chart-head h2,
.home-card-head h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.08;
}

.home-card-head a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    color: var(--navy-soft);
    font-size: 13px;
    font-weight: 900;
}

.home-chart-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 1px;
    overflow: hidden;
    min-width: min(100%, 510px);
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.08);
}

.home-chart-stats div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.78);
}

.home-chart-stats span,
.home-mini-metrics span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-chart-stats strong {
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.05;
}

.home-sales-chart {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 218px;
    margin-top: 10px;
}

.home-chart-note {
    margin: 4px 0 0;
    color: #7c879d;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-align: right;
}

.product-analytics-page {
    display: grid;
    width: min(100%, 1080px);
    margin: 0 auto;
    gap: 18px;
}

.product-analytics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.11), transparent 27%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.88));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
}

.product-analytics-product {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-width: 0;
}

.product-analytics-product img,
.product-analytics-product > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border-radius: 10px;
    object-fit: cover;
    color: #ffffff;
    background:
        radial-gradient(circle at 22% 18%, #ffe87a, transparent 23%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.13);
    font-size: 24px;
    font-weight: 950;
}

.product-analytics-hero h1 {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 38px;
    line-height: 1.02;
}

.product-analytics-hero p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.analytics-date-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(142px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    min-width: min(100%, 420px);
}

.analytics-date-filter label {
    display: grid;
    gap: 5px;
}

.analytics-date-filter span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.analytics-date-filter input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.84);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

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

.analytics-stat-grid article,
.analytics-chart-card,
.analytics-signal-card {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 252, 255, 0.86));
    box-shadow: 0 18px 48px rgba(1, 9, 75, 0.08);
}

.analytics-stat-grid article {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 15px 16px;
}

.analytics-stat-grid span,
.analytics-signal-list span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.analytics-stat-grid strong {
    color: var(--navy);
    font-size: 25px;
    line-height: 1.04;
}

.analytics-stat-grid p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 800;
}

.analytics-chart-card {
    position: relative;
    overflow: hidden;
    padding: 17px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.1), transparent 27%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.88));
}

.analytics-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.analytics-card-head h2,
.analytics-signal-card h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.06;
}

.analytics-card-head p,
.analytics-signal-card p {
    max-width: 620px;
    margin: 7px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.45;
}

.analytics-card-head-compact h2 {
    font-size: 20px;
}

.analytics-card-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 5px 10px;
    color: var(--navy-soft);
    background: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.product-performance-chart {
    width: 100%;
    height: 270px;
    margin-top: 12px;
}

.analytics-empty-note,
.analytics-mini-empty {
    margin: 6px 0 0;
    color: #7c879d;
    font-size: 11px;
    font-weight: 750;
    text-align: right;
}

.analytics-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.58fr) minmax(260px, 0.58fr);
    gap: 12px;
    align-items: stretch;
}

.product-source-chart {
    width: 100%;
    height: 238px;
    margin-top: 10px;
}

.analytics-signal-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 17px;
}

.analytics-signal-list {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.07);
}

.analytics-signal-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.78);
}

.analytics-signal-list strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
}

.analytics-fulfillment-list {
    display: grid;
    gap: 8px;
}

.analytics-fulfillment-list div {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 10px 11px;
    background: rgba(255, 255, 255, 0.78);
}

.analytics-fulfillment-list strong {
    color: var(--navy);
    font-size: 13px;
}

.analytics-inline-action {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 900;
}

.account-analytics-page {
    width: min(100%, 1180px);
}

.account-analytics-hero {
    align-items: center;
}

.account-analytics-heading h1 {
    max-width: 720px;
}

.account-sales-chart {
    width: 100%;
    height: 295px;
    margin-top: 12px;
}

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

.account-compact-chart {
    width: 100%;
    height: 236px;
    margin-top: 10px;
}

.account-horizontal-chart {
    width: 100%;
    height: 246px;
    margin-top: 10px;
}

.account-analytics-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-analytics-signal-grid .analytics-signal-card {
    min-height: 260px;
}

.home-ops-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 15px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.09), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.88));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
    backdrop-filter: blur(20px);
}

.home-ops-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 2px 13px;
}

.home-ops-head h2 {
    max-width: 680px;
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 25px;
    line-height: 1.06;
}

.home-ops-head a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    color: var(--navy-soft);
    font-size: 13px;
    font-weight: 900;
}

.home-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(292px, 0.42fr);
    grid-template-areas:
        "command readiness"
        "activity metrics";
    gap: 10px;
}

.home-ops-panel.is-launch-ready .home-ops-grid {
    grid-template-areas: "activity metrics";
}

.home-ops-panel.is-launch-ready .home-ops-activity,
.home-ops-panel.is-launch-ready .home-care-grid {
    min-height: 248px;
}

.home-command-card,
.home-readiness-rail,
.home-ops-activity,
.home-care-grid {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.035);
}

.home-command-card {
    grid-area: command;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 142px;
    padding: 18px 18px 18px 21px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.2), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 246, 0.86));
    border-color: rgba(253, 97, 76, 0.28);
    box-shadow:
        inset 5px 0 0 var(--coral),
        0 20px 52px rgba(253, 97, 76, 0.13),
        0 14px 34px rgba(1, 9, 75, 0.07);
}

.home-command-card h3,
.home-card-head h3 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.06;
}

.home-command-card .home-section-kicker {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid rgba(253, 97, 76, 0.22);
    border-radius: 999px;
    padding: 3px 9px;
    background: rgba(255, 241, 239, 0.88);
}

.home-command-card p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #626c86;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}

.home-readiness-rail {
    grid-area: readiness;
    display: grid;
    gap: 1px;
    overflow: hidden;
    background: rgba(1, 9, 75, 0.08);
}

.home-readiness-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 13px;
    background: rgba(255, 255, 255, 0.82);
}

.home-readiness-item strong,
.home-care-grid strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.15;
}

.home-readiness-item span:not(.home-health-icon),
.home-care-grid p {
    display: block;
    margin-top: 4px;
    color: #626c86;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.35;
}

.home-ops-activity {
    grid-area: activity;
    padding: 13px;
}

.home-care-grid {
    grid-area: metrics;
    display: grid;
    gap: 1px;
    overflow: hidden;
    background: rgba(1, 9, 75, 0.08);
}

.home-care-grid article {
    display: grid;
    min-height: 92px;
    align-content: center;
    padding: 13px;
    background: rgba(255, 255, 255, 0.82);
}

.home-care-grid span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-care-grid strong {
    margin-top: 5px;
    font-size: 25px;
}

.home-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
    gap: 14px;
    align-items: start;
}

.home-start-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.9fr);
    gap: 14px;
    align-items: stretch;
}

.home-start-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.1), transparent 26%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 255, 0.86));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
    backdrop-filter: blur(20px);
}

.home-start-card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(240px, 0.44fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.home-start-card h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.08;
}

.home-launch-path {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.home-launch-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 8px;
    padding: 11px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.035);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.home-launch-item:hover {
    border-color: rgba(1, 9, 75, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.06);
}

.home-launch-item strong,
.home-next-grid strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.15;
}

.home-launch-item span:not(.home-health-icon),
.home-next-grid span {
    display: block;
    margin-top: 4px;
    color: #626c86;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.35;
}

.home-start-snapshot {
    display: grid;
    align-content: start;
}

.home-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-top: 13px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.08);
}

.home-snapshot-grid div {
    display: grid;
    gap: 6px;
    min-height: 92px;
    align-content: center;
    padding: 13px;
    background: rgba(255, 255, 255, 0.78);
}

.home-snapshot-grid span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-snapshot-grid strong {
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
}

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

.home-next-grid div {
    min-height: 104px;
    border: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 8px;
    padding: 13px;
    background: rgba(255, 255, 255, 0.72);
}

.home-activity-card,
.home-health-card,
.home-product-strip {
    padding: 14px;
}

.home-activity-list,
.home-health-list,
.home-product-grid {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.home-activity-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.075);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.035);
}

.home-activity-row,
.home-health-item,
.home-product-card {
    display: grid;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.035);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.home-activity-row:hover,
.home-health-item:hover,
.home-product-card:hover {
    border-color: rgba(1, 9, 75, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.06);
}

.home-activity-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.home-activity-list .home-activity-row {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.home-activity-list .home-activity-row + .home-activity-row {
    border-top: 1px solid rgba(1, 9, 75, 0.075);
}

.home-activity-list .home-activity-row:first-child {
    border-radius: 8px 8px 0 0;
}

.home-activity-list .home-activity-row:last-child {
    border-radius: 0 0 8px 8px;
}

.home-activity-list .home-activity-row:only-child {
    border-radius: 8px;
}

.home-product-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.home-activity-row img,
.home-product-card img,
.home-row-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    color: #ffffff;
    background:
        radial-gradient(circle at 22% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    object-fit: cover;
    box-shadow: 0 9px 20px rgba(1, 9, 75, 0.08);
    font-size: 16px;
    font-weight: 950;
}

.home-activity-row strong,
.home-product-card strong,
.home-health-item strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.15;
}

.home-activity-row span,
.home-product-card span,
.home-health-item span:not(.home-health-icon) {
    display: block;
    margin-top: 4px;
    color: #626c86;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.35;
}

.home-activity-row em,
.home-product-card em {
    color: var(--navy);
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.home-side-stack {
    display: grid;
    gap: 14px;
}

.home-health-item {
    grid-template-columns: 18px minmax(0, 1fr);
}

.home-health-icon {
    position: relative;
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: #d0d5dd;
}

.home-health-icon.is-ok {
    background: #1f9d5a;
}

.home-health-icon.is-ok::before {
    content: "";
    width: 8px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.home-health-icon.is-alert {
    background: #d92d20;
}

.home-health-icon.is-alert::before {
    content: "!";
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
}

.home-health-icon.is-attention {
    background: var(--coral);
}

.home-health-icon.is-attention::before {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}

.home-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.home-mini-metrics div {
    display: grid;
    gap: 5px;
    min-height: 92px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.035);
}

.home-mini-metrics strong {
    color: var(--navy);
    font-size: 25px;
    line-height: 1;
}

.home-mini-metrics em {
    color: #626c86;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.3;
}

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

.home-empty-state {
    display: grid;
    gap: 4px;
    border: 1px dashed rgba(1, 9, 75, 0.16);
    border-radius: 8px;
    padding: 16px;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.58);
}

.home-empty-state strong {
    color: var(--navy);
    font-size: 15px;
}

.home-empty-state span {
    font-size: 13px;
    font-weight: 750;
}

.products-shell {
    display: grid;
    gap: 22px;
}

.products-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
}

.products-hero h1 {
    margin: 10px 0 0;
    color: var(--navy);
    font-size: 46px;
    line-height: 1;
}

.products-hero p {
    max-width: 660px;
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
}

.products-panel {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 8% 0%, rgba(253, 97, 76, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(241, 247, 255, 0.8));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.11);
    backdrop-filter: blur(20px);
}

.product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.18fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.product-row:hover {
    border-color: rgba(253, 97, 76, 0.2);
    box-shadow: 0 20px 46px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

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

.product-row-image,
.product-row-art {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}

.product-row-image {
    object-fit: cover;
}

.product-row-art {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    background:
        radial-gradient(circle at 22% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    font-size: 22px;
    font-weight: 950;
}

.product-row h2,
.products-empty h2 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.05;
}

.product-row p,
.products-empty p {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.product-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.product-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--navy-soft);
    background: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 850;
}

.product-status-price {
    color: var(--coral-strong);
    background: var(--coral-soft);
}

.product-status-done {
    border-color: rgba(36, 85, 58, 0.14);
    color: #24553a;
    background: rgba(217, 251, 229, 0.8);
}

.product-status-alert {
    border-color: rgba(180, 35, 24, 0.18);
    color: #b42318;
    background: #fff1ef;
}

.product-status-refund {
    border-color: rgba(100, 116, 139, 0.18);
    color: #475569;
    background: rgba(241, 245, 249, 0.9);
}

.product-status-icon {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #34a853;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
}

.product-license-metric {
    display: grid;
    min-width: 126px;
    justify-items: end;
    gap: 2px;
    color: var(--ink-muted);
    text-align: right;
}

.product-license-metric:empty {
    min-width: 126px;
}

.product-license-metric span {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.product-license-metric strong {
    color: var(--navy);
    font-size: 26px;
    line-height: 1;
}

.product-row.has-license-metrics .product-license-metric strong {
    color: #24553a;
}

.product-license-metric.is-out strong {
    color: #b42318;
}

.product-license-metric em {
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.product-row-action {
    min-width: 86px;
}

.products-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    border: 1px dashed rgba(1, 9, 75, 0.18);
    border-radius: 8px;
    padding: 42px 18px;
    background: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.products-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination-button,
.pagination-status {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 9px 14px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 30px rgba(1, 9, 75, 0.06);
    font-size: 13px;
    font-weight: 850;
}

a.pagination-button {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

a.pagination-button:hover {
    border-color: rgba(253, 97, 76, 0.22);
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

.pagination-status {
    color: var(--ink-muted);
    background: rgba(241, 247, 255, 0.82);
}

.pagination-button.is-disabled {
    color: rgba(94, 106, 134, 0.56);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: none;
}

.records-shell {
    gap: 24px;
}

.records-panel {
    padding: 16px;
}

.record-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.3fr) minmax(148px, 0.18fr);
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 255, 0.82)),
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.15), transparent 30%);
    box-shadow: 0 16px 38px rgba(1, 9, 75, 0.065);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.record-row:hover {
    border-color: rgba(253, 97, 76, 0.18);
    box-shadow: 0 22px 50px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

.record-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.record-avatar {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.94);
    background:
        radial-gradient(circle at 22% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.13);
    font-size: 22px;
    font-weight: 950;
}

.record-avatar-image {
    object-fit: cover;
}

.record-row h2 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.record-row p {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

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

.record-metrics div,
.record-date {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.record-metrics span,
.record-date span {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.record-metrics strong,
.record-date strong {
    color: var(--navy);
    font-size: 20px;
    line-height: 1.05;
}

.record-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 15px !important;
    letter-spacing: 0;
}

.record-date {
    min-width: 0;
    text-align: right;
}

.records-empty {
    min-height: 260px;
}

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

.resource-page {
    display: grid;
    gap: 22px;
}

.resource-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    padding-bottom: 2px;
}

.resource-hero h1 {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--navy);
    font-size: 50px;
    line-height: 0.98;
}

.resource-hero p {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 1.55;
}

.resource-hero-detail {
    grid-template-columns: 1fr;
}

.resource-backline a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 7px 11px;
    color: var(--navy-soft);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.05);
    font-size: 13px;
    font-weight: 850;
}

.resource-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.resource-stat {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 16px;
    background:
        radial-gradient(circle at 92% 8%, rgba(141, 224, 180, 0.18), transparent 26%),
        rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.06);
}

.resource-stat span,
.resource-table-head,
.resource-cell span,
.resource-definition-list dt,
.resource-status-grid span {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.resource-stat strong {
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
}

.resource-panel {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 4% 0%, rgba(253, 97, 76, 0.09), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.86));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.11);
    backdrop-filter: blur(20px);
}

.resource-table-head,
.resource-row {
    display: grid;
    align-items: center;
    gap: 16px;
}

.resource-table-head {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    background: rgba(255, 255, 255, 0.56);
}

.resource-table-head-products,
.resource-row-products {
    grid-template-columns: minmax(0, 1fr) 150px 150px 108px;
}

.resource-table-head-customers,
.resource-row-customers {
    grid-template-columns: minmax(0, 1fr) 120px 150px 180px;
}

.resource-table-head-orders,
.resource-row-orders {
    grid-template-columns: minmax(0, 1fr) 140px 130px 180px;
}

.resource-table-head-discounts,
.resource-row-discounts {
    grid-template-columns: minmax(0, 1fr) 140px 150px 64px;
}

.resource-row {
    min-height: 92px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    background: rgba(255, 255, 255, 0.68);
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.resource-row:last-child {
    border-bottom: 0;
}

a.resource-row:hover,
.resource-row:hover {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 3px 0 0 rgba(253, 97, 76, 0.72);
}

a.resource-row:hover {
    transform: translateX(2px);
}

.resource-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.resource-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    background:
        radial-gradient(circle at 22% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.13);
    font-size: 20px;
    font-weight: 950;
}

.resource-avatar-image {
    object-fit: cover;
}

img.secure-record-avatar {
    display: block;
    object-fit: cover;
}

.customer-avatar {
    border: 0;
    box-shadow: none;
}

.resource-copy {
    min-width: 0;
}

.resource-copy h2 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.08;
}

.resource-copy p {
    max-width: 680px;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.42;
}

.resource-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.resource-cell {
    display: grid;
    min-width: 0;
    gap: 4px;
    align-content: center;
}

.resource-row-products > .resource-cell-delivery {
    justify-items: center;
    text-align: center;
}

.resource-row-products > .resource-cell-delivery .resource-state-icon {
    justify-self: center;
}

.resource-cell strong {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.resource-cell .product-status {
    justify-self: start;
}

.resource-danger {
    color: #b42318 !important;
}

.resource-check,
.resource-alert-dot {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #34a853;
    font-size: 12px;
    font-weight: 950;
}

.resource-alert-dot {
    background: #f04438;
}

.resource-action-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.resource-indicator-discount {
    border-color: rgba(124, 58, 237, 0.16);
    color: #4c1d95;
    background: rgba(124, 58, 237, 0.08);
}

.resource-cell-with-arrow {
    position: relative;
    padding-right: 28px;
}

.resource-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--coral);
    font-size: 18px;
    font-weight: 900;
    transform: translateY(-50%);
}

.resource-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
}

.resource-detail-card {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.13), transparent 28%),
        rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 48px rgba(1, 9, 75, 0.08);
}

.resource-detail-card-wide {
    grid-column: span 1;
}

.resource-detail-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.resource-detail-card-header h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.08;
}

.resource-detail-card-header p {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.resource-definition-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.resource-definition-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.resource-definition-list div {
    display: grid;
    gap: 5px;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding: 13px 0;
}

.resource-definition-list div:first-child {
    border-top: 0;
}

.resource-definition-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 15px;
    font-weight: 850;
}

.resource-code-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0;
}

.resource-inline-link {
    color: var(--coral-strong);
    font-weight: 900;
}

.stripe-dashboard-link {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 5px 9px;
    color: var(--navy);
    background: rgba(248, 250, 255, 0.86);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.stripe-dashboard-link:hover {
    border-color: rgba(1, 9, 75, 0.2);
    background: #ffffff;
    transform: translateY(-1px);
}

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

.resource-status-grid div {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 14px;
    background: rgba(246, 249, 255, 0.76);
}

.resource-status-grid strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 15px;
}

.resource-mini-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.resource-mini-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 14px;
    transition: background 160ms ease;
}

.resource-mini-row:last-child {
    border-bottom: 0;
}

.resource-mini-row:hover {
    background: rgba(255, 255, 255, 0.92);
}

.resource-mini-row strong {
    color: var(--navy);
    font-size: 15px;
}

.resource-mini-row span,
.resource-mini-empty {
    display: block;
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 750;
}

.resource-mini-empty {
    padding: 18px;
    margin: 0;
}

.resource-page {
    gap: 18px;
}

.resource-hero {
    gap: 18px;
}

.resource-hero h1 {
    max-width: 820px;
    font-size: 42px;
    letter-spacing: -0.01em;
}

.resource-hero p {
    max-width: 760px;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
}

.resource-summary {
    gap: 10px;
}

.resource-stat {
    min-height: 82px;
    gap: 6px;
    border-color: rgba(1, 9, 75, 0.09);
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 251, 255, 0.82));
    box-shadow: 0 12px 32px rgba(1, 9, 75, 0.055);
}

.resource-stat span,
.resource-table-head,
.resource-cell span,
.resource-definition-list dt,
.resource-status-grid span {
    color: #69738d;
    font-size: 10px;
}

.resource-stat strong {
    font-size: 24px;
    letter-spacing: -0.01em;
}

.resource-panel {
    border-color: rgba(1, 9, 75, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
    box-shadow: 0 20px 54px rgba(1, 9, 75, 0.095);
}

.resource-table-head {
    padding: 10px 16px;
    background: rgba(248, 250, 255, 0.82);
}

.resource-table-head-products,
.resource-row-products {
    grid-template-columns: minmax(0, 1fr) 132px 136px 108px;
}

.resource-table-head-customers,
.resource-row-customers {
    grid-template-columns: minmax(0, 1fr) 96px 132px 160px;
}

.resource-table-head-orders,
.resource-row-orders {
    grid-template-columns: minmax(0, 1fr) 124px 116px 154px;
}

.resource-row {
    min-height: 76px;
    gap: 14px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.76);
}

a.resource-row:hover,
.resource-row:hover {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 2px 0 0 rgba(1, 9, 75, 0.24);
}

a.resource-row:hover {
    transform: none;
}

.resource-main {
    gap: 12px;
}

.resource-avatar {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(1, 9, 75, 0.09);
    font-size: 17px;
}

.resource-copy h2 {
    font-size: 17px;
    letter-spacing: -0.005em;
}

.resource-copy p {
    margin-top: 4px;
    color: #626c86;
    font-size: 13px;
    line-height: 1.35;
}

.resource-badges {
    gap: 7px;
    margin-top: 8px;
}

.resource-cell {
    gap: 3px;
}

.resource-cell strong {
    font-size: 14px;
}

.resource-action-cell .button,
.product-row-action {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
}

.product-row-icon-action {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 8px 18px rgba(1, 9, 75, 0.055);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.product-row-icon-action:hover {
    transform: translateY(-1px);
    border-color: rgba(253, 97, 76, 0.24);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(1, 9, 75, 0.08);
}

.product-row-icon-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resource-state-icon {
    position: relative;
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.resource-state-icon.is-ok {
    background: #1f9d5a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 4px 10px rgba(31, 157, 90, 0.18);
}

.resource-state-icon.is-ok::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 9px;
    height: 5px;
    border: 0 solid #ffffff;
    border-bottom-width: 2px;
    border-left-width: 2px;
    transform: translateY(-1px) rotate(-45deg);
    transform-origin: center;
}

.resource-state-icon.is-alert {
    background: #d92d20;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 4px 10px rgba(217, 45, 32, 0.14);
}

.resource-state-icon.is-file,
.resource-state-icon.is-key {
    width: 8px;
    height: 8px;
    align-self: center;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.86);
}

.resource-state-icon.is-file {
    background: #2563eb;
}

.resource-state-icon.is-key {
    background: #7c3aed;
}

.resource-state-icon.is-refund {
    background: #64748b;
}

.resource-state-icon.is-refund::before {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}

.resource-state-icon.is-discount {
    background: #6d28d9;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 4px 10px rgba(109, 40, 217, 0.16);
}

.resource-indicator,
.resource-status-pill {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--navy-soft);
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
}

.resource-indicator-ok {
    border-color: rgba(31, 157, 90, 0.16);
    color: #24553a;
    background: rgba(240, 253, 244, 0.72);
}

.resource-indicator-alert {
    border-color: rgba(217, 45, 32, 0.18);
    color: #b42318;
    background: rgba(255, 246, 244, 0.82);
}

.resource-indicator-discount {
    border-color: rgba(109, 40, 217, 0.14);
    color: #452079;
    background: rgba(245, 243, 255, 0.78);
}

.resource-status-pill {
    min-height: 26px;
    padding: 4px 9px 4px 5px;
    color: #24553a;
    background: rgba(240, 253, 244, 0.76);
}

.resource-status-pill.product-status-alert {
    color: #b42318;
    background: rgba(255, 246, 244, 0.88);
}

.resource-status-pill.product-status-refund {
    color: #475569;
    background: rgba(241, 245, 249, 0.92);
}

.product-status-icon {
    color: #ffffff !important;
}

.resource-badges .product-status {
    min-height: 24px;
    border-color: rgba(1, 9, 75, 0.08);
    padding: 3px 8px;
    font-size: 11px;
}

.resource-badges .product-status-price {
    color: var(--navy-soft);
    background: rgba(1, 9, 75, 0.035);
}

.product-status-icon::selection,
.resource-state-icon::selection {
    color: #ffffff;
    background: transparent;
}

.resource-detail-page {
    max-width: 1040px;
    margin: 0 auto;
}

.secure-record-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
    gap: 18px;
    align-items: stretch;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.1);
}

.secure-record-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-width: 0;
}

.secure-record-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    color: #ffffff;
    background:
        radial-gradient(circle at 24% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 14px 32px rgba(1, 9, 75, 0.12);
    font-size: 21px;
    font-weight: 950;
}

.secure-record-avatar-order {
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.82), transparent 24%),
        linear-gradient(135deg, #18b37f, var(--navy));
}

.secure-record-avatar-order .resource-state-icon {
    width: 24px;
    height: 24px;
}

.secure-record-kicker,
.secure-section-head span:first-child,
.secure-mini-label {
    color: #667085;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.secure-record-main h1 {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.01em;
}

.secure-record-main p {
    max-width: 620px;
    margin: 7px 0 0;
    color: #626c86;
    font-size: 14px;
    line-height: 1.45;
}

.secure-record-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.08);
}

.secure-record-meta div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.secure-record-meta span {
    color: #69738d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.secure-record-meta strong {
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.05;
}

.secure-record-meta-activity strong {
    font-size: 17px;
    line-height: 1.12;
}

.secure-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.secure-detail-column {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}

.customer-detail-stack {
    display: grid;
    gap: 14px;
}

.secure-detail-card {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(1, 9, 75, 0.075);
}

.secure-detail-card-main {
    min-width: 0;
}

.secure-detail-card-full {
    grid-column: 1 / -1;
}

.order-record-sheet {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.92));
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.1);
}

.order-record-rail {
    display: grid;
    align-content: start;
    gap: 18px;
    border-right: 1px solid rgba(1, 9, 75, 0.08);
    padding: 20px 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.08), transparent 28%),
        rgba(248, 251, 255, 0.72);
}

.order-record-rail strong {
    display: block;
    margin-top: 7px;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.12;
}

.order-record-rail p {
    margin: 5px 0 0;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
}

.order-record-rail dl,
.order-detail-metrics {
    display: grid;
    gap: 0;
    margin: 0;
}

.order-record-rail dl div,
.order-detail-metrics div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    border-top: 1px solid rgba(1, 9, 75, 0.07);
    padding: 12px 0;
}

.order-record-rail dt,
.order-detail-metrics dt,
.order-sheet-section-title span,
.order-record-section-head span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.order-record-rail dd,
.order-detail-metrics dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.28;
}

.order-record-body {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 22px;
}

.order-record-section-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 16px;
}

.order-record-section-head h2 {
    margin: 5px 0 0;
    color: var(--navy);
    font-size: 26px;
    line-height: 1.08;
}

.order-record-section-head > strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.order-line-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 18px;
}

.order-line-item img,
.order-line-item > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 8px;
    object-fit: cover;
    color: #ffffff;
    background:
        radial-gradient(circle at 24% 18%, #ffe87a, transparent 23%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.1);
    font-size: 18px;
    font-weight: 950;
}

.order-line-item strong {
    color: var(--navy);
    font-size: 17px;
    line-height: 1.1;
}

.order-line-item > strong {
    font-size: 16px;
    white-space: nowrap;
}

.order-line-item p {
    margin: 5px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.35;
}

.order-line-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.order-line-badges > span,
.order-inline-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(31, 157, 90, 0.16);
    border-radius: 999px;
    padding: 4px 8px;
    color: #24553a;
    background: rgba(240, 253, 244, 0.78);
    font-size: 11px;
    font-weight: 900;
}

.order-sheet-section {
    display: grid;
    gap: 12px;
}

.order-sheet-section-title h3 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.1;
}

.order-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
}

.order-detail-metrics div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.order-detail-metrics-compact {
    grid-template-columns: 1fr;
}

.order-detail-metrics-compact div:last-child {
    border-bottom: 0;
}

.order-sheet-two-up {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 22px;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 18px;
}

.order-record-sheet-refined {
    grid-template-columns: minmax(240px, 0.24fr) minmax(0, 1fr);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.94));
}

.order-record-rail-refined {
    gap: 14px;
    padding: 18px;
}

.order-rail-top {
    display: grid;
    gap: 4px;
    padding-bottom: 8px;
}

.order-rail-status-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.16), transparent 38%),
        rgba(255, 255, 255, 0.76);
}

.order-rail-status-card > strong {
    margin: 0;
    color: var(--navy);
    font-size: 26px;
    line-height: 1;
}

.order-rail-status-card > p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.order-record-rail .order-rail-list div {
    padding: 11px 0;
}

.order-record-body-refined {
    gap: 16px;
    padding: 24px;
}

.order-brief-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.order-brief-header span,
.order-panel-heading span,
.order-info-panel summary > span,
.order-money-grid dt,
.order-info-list dt,
.order-charge-strip span,
.order-brief-total span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.order-brief-header h2 {
    margin: 5px 0 0;
    color: var(--navy);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.02;
}

.order-brief-header p {
    margin: 9px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.45;
}

.order-brief-total {
    display: grid;
    min-width: 154px;
    justify-items: end;
    gap: 4px;
}

.order-brief-total strong {
    color: var(--navy);
    font-size: 30px;
    line-height: 1;
}

.order-brief-total em {
    color: var(--ink-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.order-product-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 100% 0, rgba(253, 97, 76, 0.06), transparent 34%),
        rgba(255, 255, 255, 0.82);
}

.order-product-summary img,
.order-product-summary > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 8px;
    object-fit: cover;
    background:
        radial-gradient(circle at 24% 18%, #ffe87a, transparent 23%),
        linear-gradient(135deg, var(--coral), var(--navy));
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.1);
}

.order-product-summary strong {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.12;
}

.order-product-summary > strong {
    font-size: 20px;
    white-space: nowrap;
}

.order-product-summary p {
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.4;
}

.order-payment-panel,
.order-info-panel {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.order-payment-panel {
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.11), transparent 32%),
        rgba(255, 255, 255, 0.82);
}

.order-panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.order-panel-heading h3 {
    margin: 5px 0 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.08;
}

.order-panel-heading p {
    max-width: 280px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

.order-money-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.08);
}

.order-money-grid > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 13px;
    background: rgba(255, 255, 255, 0.86);
}

.order-money-grid dd,
.order-info-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
}

.order-discount-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.order-discount-value > span:last-child {
    color: var(--navy);
    font-weight: 950;
}

.order-money-cell-primary dd {
    font-size: 19px;
}

.order-money-cell-wide {
    grid-column: span 2;
}

.order-money-cell-fees {
    grid-column: 1 / -1;
}

.order-money-grid .fee-breakdown summary {
    padding: 0;
    border: 0;
    background: transparent;
}

.order-money-grid .fee-breakdown-panel {
    margin-top: 8px;
    padding: 10px;
}

.order-charge-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 14px;
}

.order-charge-strip > div:first-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.order-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
}

.order-info-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.order-info-list > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-top: 1px solid rgba(1, 9, 75, 0.07);
    padding: 11px 0;
}

.order-info-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.order-info-list > div:last-child {
    padding-bottom: 0;
}

.order-context-panel {
    align-content: start;
}

.order-context-panel summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.order-context-panel summary::-webkit-details-marker {
    display: none;
}

.order-context-panel summary strong {
    grid-column: 1;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.12;
}

.order-context-panel summary em {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--ink-muted);
    background: rgba(248, 250, 255, 0.82);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.order-context-panel[open] summary {
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
}

.secure-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 13px;
}

.secure-section-head h2 {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.1;
}

.secure-section-note {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--ink-muted) !important;
    background: rgba(248, 250, 255, 0.82);
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.secure-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(31, 157, 90, 0.18);
    border-radius: 999px;
    padding: 5px 9px 5px 5px;
    color: #24553a;
    background: rgba(240, 253, 244, 0.78);
    font-size: 12px;
    font-weight: 900;
}

.secure-status-refund {
    border-color: rgba(100, 116, 139, 0.18);
    color: #475569;
    background: rgba(241, 245, 249, 0.88);
}

.refund-order-trigger {
    display: inline-flex;
    min-height: 34px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(180, 35, 24, 0.16);
    border-radius: 8px;
    padding: 8px 12px;
    color: #b42318;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 244, 0.86));
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(180, 35, 24, 0.08);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.refund-order-trigger:hover {
    border-color: rgba(180, 35, 24, 0.28);
    background: #ffffff;
    transform: translateY(-1px);
}

.refund-order-note {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(100, 116, 139, 0.14);
    border-radius: 8px;
    padding: 10px;
    background: rgba(248, 250, 252, 0.86);
}

.refund-order-note strong {
    margin: 0;
    color: #475569;
    font-size: 12px;
}

.refund-order-note span {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 780;
}

.refund-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(1, 9, 75, 0.44);
    backdrop-filter: blur(14px);
}

.refund-modal-backdrop[hidden] {
    display: none;
}

.refund-modal-panel {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(520px, 100%);
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.12), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 30%),
        #ffffff;
    box-shadow: 0 28px 80px rgba(1, 9, 75, 0.28);
}

.refund-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}

.refund-modal-close span {
    grid-area: 1 / 1;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: var(--navy);
}

.refund-modal-close span:first-child {
    transform: rotate(45deg);
}

.refund-modal-close span:last-child {
    transform: rotate(-45deg);
}

.refund-modal-head {
    max-width: 390px;
}

.refund-modal-head span,
.refund-result p {
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.refund-modal-head h2,
.refund-result h2 {
    margin: 5px 0 0;
    color: var(--navy);
    font-size: 28px;
    line-height: 1.05;
}

.refund-modal-head p,
.refund-result > span {
    margin: 9px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.refund-form {
    display: grid;
    gap: 10px;
}

.refund-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 12px;
    background: rgba(248, 250, 255, 0.76);
    cursor: pointer;
}

.refund-choice input {
    accent-color: var(--coral);
}

.refund-choice span {
    display: grid;
    gap: 3px;
}

.refund-choice strong,
.refund-amount-field span {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
}

.refund-choice em {
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
}

.refund-amount-field {
    display: grid;
    gap: 7px;
}

.refund-amount-field[hidden] {
    display: none;
}

.refund-amount-field input {
    width: 100%;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.86);
    font: 850 15px var(--font-body);
}

.refund-submit-button {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto;
    place-items: center;
}

.refund-submit-button:disabled {
    cursor: wait;
    opacity: 0.9;
}

.refund-submit-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.36);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: refund-spin 720ms linear infinite;
}

.refund-submit-button.is-processing .refund-submit-label {
    display: none;
}

.refund-submit-button.is-processing .refund-submit-spinner {
    display: block;
}

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

.refund-result {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 12px 8px 4px;
    text-align: center;
}

.refund-result-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 18px 42px rgba(34, 197, 94, 0.22);
}

.refund-result-icon::before {
    content: "";
    width: 24px;
    height: 13px;
    border: 0 solid #ffffff;
    border-bottom-width: 4px;
    border-left-width: 4px;
    transform: translateY(-2px) rotate(-45deg);
}

.secure-data-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.secure-data-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.secure-data-list div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 12px 0;
}

.secure-data-list div:last-child,
.secure-data-list-grid div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.secure-data-list dt {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.secure-data-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 14px;
    font-weight: 850;
}

.fee-breakdown {
    display: grid;
    gap: 7px;
    align-items: start;
    justify-items: stretch;
    width: 100%;
}

.fee-breakdown summary {
    display: inline-flex;
    width: fit-content;
    cursor: pointer;
    list-style: none;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(248, 250, 255, 0.82);
    transition: border-color 160ms ease, background 160ms ease;
}

.fee-breakdown summary::-webkit-details-marker {
    display: none;
}

.fee-breakdown summary:hover {
    border-color: rgba(1, 9, 75, 0.18);
    background: #ffffff;
}

.fee-breakdown summary strong {
    color: var(--navy);
    font-size: 13px;
}

.fee-breakdown summary span {
    color: #69738d;
    font-size: 11px;
    font-weight: 900;
}

.fee-breakdown summary span::after {
    content: "↓";
    margin-left: 5px;
    color: var(--coral);
    font-size: 10px;
}

.fee-breakdown[open] summary span::after {
    content: "↑";
}

.fee-breakdown-panel {
    display: grid;
    gap: 4px;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    padding: 16px 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.76));
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.04);
}

.order-detail-metrics .fee-breakdown-panel {
    display: grid;
    gap: 4px;
    border: 0;
    padding: 16px 24px;
}

.order-detail-metrics .fee-breakdown-panel div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    padding: 4px 0;
}

.fee-breakdown-panel span {
    color: #69738d;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.fee-breakdown-panel strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
}

.secure-charge-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.secure-ledger {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    background: rgba(248, 250, 255, 0.72);
}

.secure-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 12px;
    background: rgba(255, 255, 255, 0.76);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.secure-ledger-row:last-child {
    border-bottom: 0;
}

.secure-ledger-row:hover {
    background: #ffffff;
    box-shadow: inset 2px 0 0 rgba(1, 9, 75, 0.24);
}

.secure-ledger-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
}

.secure-ledger-main img,
.secure-ledger-main > span,
.secure-product-strip img,
.secure-product-strip > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background:
        radial-gradient(circle at 24% 18%, #ffe87a, transparent 22%),
        linear-gradient(135deg, var(--coral), var(--navy));
    object-fit: cover;
    font-weight: 950;
}

.secure-ledger-main strong,
.secure-ledger-end strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.2;
}

.secure-ledger-main em,
.secure-ledger-end span {
    display: block;
    margin-top: 3px;
    color: #69738d;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.secure-ledger-end {
    text-align: right;
}

.secure-empty-state {
    padding: 16px;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 750;
}

.secure-product-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(248, 250, 255, 0.72);
}

.secure-product-strip p {
    margin: 0;
    color: #626c86;
    font-size: 14px;
    line-height: 1.4;
}

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

.secure-fulfillment-grid div {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.secure-fulfillment-grid strong {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 14px;
}

.resource-page:not(.resource-detail-page) {
    width: min(100%, 980px);
    margin: 0 auto;
    gap: 16px;
}

.resource-page:not(.resource-detail-page) .resource-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    padding-top: 6px;
    text-align: center;
}

.resource-page:not(.resource-detail-page) .resource-hero h1 {
    max-width: 760px;
    margin-top: 12px;
    font-size: 42px;
    line-height: 1.02;
    letter-spacing: 0;
}

.resource-page:not(.resource-detail-page) .resource-hero p {
    max-width: 610px;
    margin: 9px auto 0;
    font-size: 16px;
    line-height: 1.45;
}

.resource-page:not(.resource-detail-page) .resource-hero .button {
    justify-self: center;
}

.resource-page:not(.resource-detail-page) .resource-summary {
    width: min(100%, 740px);
    margin: 0 auto;
    gap: 8px;
}

.resource-page:not(.resource-detail-page) .resource-stat {
    min-height: 62px;
    gap: 5px;
    border-color: rgba(1, 9, 75, 0.08);
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 26px rgba(1, 9, 75, 0.045);
}

.resource-page:not(.resource-detail-page) .resource-stat span {
    font-size: 9.5px;
}

.resource-page:not(.resource-detail-page) .resource-stat strong {
    font-size: 21px;
    line-height: 1.05;
}

.resource-page:not(.resource-detail-page) .resource-panel {
    display: grid;
    gap: 0;
    overflow: visible;
    padding: 10px;
    border-color: rgba(1, 9, 75, 0.1);
    background:
        radial-gradient(circle at 0% 4%, rgba(253, 97, 76, 0.1), transparent 26%),
        radial-gradient(circle at 100% 96%, rgba(141, 224, 180, 0.16), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 255, 0.86));
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.1);
}

.resource-page:not(.resource-detail-page) .resource-table-head {
    display: none;
}

.resource-page:not(.resource-detail-page) .resource-row {
    min-height: 0;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: none;
}

.resource-page:not(.resource-detail-page) .resource-row:first-of-type {
    border-radius: 8px 8px 0 0;
}

.resource-page:not(.resource-detail-page) .resource-row:last-of-type {
    border-bottom: 0;
    border-radius: 0 0 8px 8px;
}

.resource-page:not(.resource-detail-page) .resource-row:only-of-type {
    border-radius: 8px;
}

.resource-page:not(.resource-detail-page) a.resource-row:hover,
.resource-page:not(.resource-detail-page) .resource-row:hover {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 2px 0 0 rgba(253, 97, 76, 0.38);
}

.resource-page:not(.resource-detail-page) .resource-row-products {
    grid-template-columns: minmax(0, 1fr) 106px 114px 108px;
}

.resource-page:not(.resource-detail-page) .resource-row-customers {
    grid-template-columns: minmax(0, 1fr) 76px 116px 136px;
}

.resource-page:not(.resource-detail-page) .resource-row-orders {
    grid-template-columns: minmax(0, 1fr) 106px 96px 128px;
}

.resource-page:not(.resource-detail-page) .resource-main {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
}

.resource-page:not(.resource-detail-page) .resource-avatar {
    width: 42px;
    height: 42px;
    box-shadow: 0 9px 20px rgba(1, 9, 75, 0.08);
    font-size: 16px;
}

.resource-page:not(.resource-detail-page) .resource-avatar.customer-avatar,
.resource-detail-page .secure-record-avatar.customer-avatar {
    border: 0;
    box-shadow: none;
}

.resource-page:not(.resource-detail-page) .resource-copy h2 {
    font-size: 16px;
    line-height: 1.08;
}

.resource-page:not(.resource-detail-page) .resource-copy p {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.35;
}

.resource-page:not(.resource-detail-page) .resource-badges {
    gap: 6px;
    margin-top: 7px;
}

.resource-page:not(.resource-detail-page) .resource-cell {
    gap: 2px;
}

.resource-page:not(.resource-detail-page) .resource-cell strong {
    font-size: 13px;
    line-height: 1.18;
}

.resource-page:not(.resource-detail-page) .resource-cell span {
    font-size: 9.5px;
}

.resource-page:not(.resource-detail-page) .resource-indicator,
.resource-page:not(.resource-detail-page) .resource-status-pill,
.resource-page:not(.resource-detail-page) .resource-badges .product-status {
    min-height: 22px;
    gap: 5px;
    padding: 3px 7px;
    font-size: 10.5px;
}

.resource-page:not(.resource-detail-page) .resource-status-pill {
    padding-left: 4px;
}

.resource-page:not(.resource-detail-page) .resource-state-icon {
    width: 16px;
    height: 16px;
}

.resource-page:not(.resource-detail-page) .resource-state-icon.is-ok::before {
    width: 8px;
    height: 4px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}

.resource-page:not(.resource-detail-page) .resource-state-icon.is-file,
.resource-page:not(.resource-detail-page) .resource-state-icon.is-key {
    width: 7px;
    height: 7px;
}

.resource-page:not(.resource-detail-page) .resource-action-cell .button,
.resource-page:not(.resource-detail-page) .product-row-action {
    min-height: 31px;
    padding: 6px 11px;
    font-size: 12px;
}

.resource-page:not(.resource-detail-page) .resource-cell-with-arrow {
    padding-right: 22px;
}

.resource-page:not(.resource-detail-page) .resource-arrow {
    color: rgba(1, 9, 75, 0.42);
    font-size: 16px;
}

.account-page {
    width: min(100%, 1020px);
    margin: 0 auto;
}

.account-hero {
    justify-items: center;
    grid-template-columns: 1fr;
    text-align: center;
}

.account-hero h1 {
    max-width: 680px;
}

.account-hero p {
    max-width: 560px;
}

.account-shell {
    display: grid;
    gap: 14px;
}

.account-card {
    display: grid;
    gap: 22px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(253, 97, 76, 0.055), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 31%),
        rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 70px rgba(1, 9, 75, 0.08);
}

.account-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 18px;
}

.account-card-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 30px;
    line-height: 1;
}

.account-settings-grid {
    display: grid;
    gap: 14px;
}

.account-section {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.045);
}

.account-section-password {
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.12), transparent 32%),
        rgba(248, 251, 255, 0.78);
}

.account-section-defaults {
    background:
        linear-gradient(135deg, rgba(253, 97, 76, 0.052), transparent 36%),
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.18), transparent 34%),
        rgba(255, 255, 255, 0.86);
}

.account-section-notifications {
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.13), transparent 30%),
        rgba(255, 255, 255, 0.86);
}

.account-section-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
}

.account-section-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(253, 97, 76, 0.18);
    border-radius: 8px;
    color: var(--coral);
    background: rgba(253, 97, 76, 0.075);
}

.account-section-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.account-section h3 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.05;
}

.account-section p {
    max-width: 620px;
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.4;
}

.account-notification-toggle {
    padding: 16px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

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

.field-group {
    display: grid;
    gap: 8px;
    color: var(--navy);
    font-weight: 850;
}

.field-group span {
    font-size: 13px;
}

.field-group input,
.field-group select {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 8px;
    padding: 13px 15px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field-group select {
    appearance: none;
}

.field-group input:focus,
.field-group select:focus {
    border-color: rgba(253, 97, 76, 0.72);
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.13);
}

.account-color-control {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.account-color-control input[type="color"] {
    width: 58px;
    min-height: 52px;
    padding: 6px;
    cursor: pointer;
}

.account-color-control input[readonly] {
    font-family: "SFMono-Regular", Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.account-default-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(33, 166, 103, 0.16);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--navy);
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.18), transparent 34%),
        rgba(255, 255, 255, 0.78);
}

.account-default-note strong {
    color: #1b6944;
    font-size: 13px;
    line-height: 1.25;
}

.account-default-note span {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.35;
}

.account-actions,
.export-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-actions {
    justify-content: flex-end;
}

.account-success {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(33, 166, 103, 0.22);
    border-radius: 8px;
    padding: 13px 16px;
    color: #1b6944;
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.32), transparent 34%),
        rgba(232, 255, 241, 0.92);
    box-shadow: 0 14px 34px rgba(33, 166, 103, 0.08);
    font-weight: 850;
}

.account-success span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #21a667;
}

.api-keys-page {
    width: min(100%, 1160px);
}

.api-keys-shell {
    gap: 16px;
}

.api-vault-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 22px;
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 30px;
    color: #ffffff;
    background:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, #050a27 0%, #070d2d 48%, #111947 100%);
    background-size: 42px 42px, 42px 42px, auto;
    box-shadow: 0 30px 80px rgba(1, 9, 75, 0.24);
}

.api-vault-hero::after {
    content: "";
    position: absolute;
    inset: auto -18% -34% 42%;
    height: 260px;
    border: 1px solid rgba(253, 97, 76, 0.18);
    background: linear-gradient(120deg, rgba(253, 97, 76, 0.11), rgba(141, 224, 180, 0.1));
    transform: rotate(-8deg);
}

.api-vault-copy,
.api-vault-status {
    position: relative;
    z-index: 1;
}

.api-vault-copy {
    display: grid;
    align-content: center;
    gap: 16px;
}

.api-vault-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: #8de0b4;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.api-vault-eyebrow span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #8de0b4;
    box-shadow: 0 0 0 5px rgba(141, 224, 180, 0.12);
}

.api-vault-copy h1 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 6vw, 68px);
    line-height: 0.94;
}

.api-vault-copy p {
    max-width: 650px;
    margin: 0;
    color: #cbd5ff;
    font-size: 17px;
    font-weight: 720;
    line-height: 1.5;
}

.api-vault-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
}

.api-vault-actions .button {
    min-height: 48px;
}

.api-vault-actions span {
    color: #eaf0ff;
    font-size: 13px;
    font-weight: 850;
}

.api-vault-status {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.api-vault-status-head {
    display: grid;
    gap: 8px;
}

.api-vault-lock,
.api-vault-status-head strong,
.api-vault-status-copy {
    display: inline-flex;
    width: fit-content;
}

.api-vault-lock {
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(141, 224, 180, 0.22);
    border-radius: 999px;
    padding: 7px 10px;
    color: #8de0b4;
    background: rgba(141, 224, 180, 0.08);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-vault-lock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #8de0b4;
    box-shadow: 0 0 0 5px rgba(141, 224, 180, 0.1);
}

.api-vault-status-head strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.1;
}

.api-vault-status-copy {
    margin-top: 4px;
    color: #cbd5ff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.api-vault-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.api-vault-metrics div {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.065);
}

.api-vault-metrics dt,
.api-vault-metrics dd {
    margin: 0;
}

.api-vault-metrics dt {
    color: #cbd5ff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.api-vault-metrics dd {
    margin-top: 6px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 950;
    line-height: 0.95;
}

.api-vault-assurances {
    display: grid;
    gap: 8px;
}

.api-vault-assurances span {
    border-left: 3px solid rgba(141, 224, 180, 0.62);
    padding: 8px 0 8px 10px;
    color: #eaf0ff;
    background: linear-gradient(90deg, rgba(141, 224, 180, 0.08), transparent);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.api-token-reveal {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(33, 166, 103, 0.28);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(232, 255, 241, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 22px 52px rgba(33, 166, 103, 0.12);
}

.api-token-reveal h2 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
}

.api-token-reveal .api-vault-eyebrow {
    color: #1b6944;
}

.api-token-reveal .api-vault-eyebrow span {
    background: #21a667;
    box-shadow: 0 0 0 5px rgba(33, 166, 103, 0.12);
}

.api-token-reveal p,
.api-key-card .api-key-card-head p,
.api-key-empty span {
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.4;
}

.api-token-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.api-token-copy-row input {
    min-width: 0;
    border: 1px solid rgba(1, 9, 75, 0.16);
    border-radius: 8px;
    padding: 14px;
    color: #eaf0ff;
    background: #070d2d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.api-keys-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.api-key-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border-color: rgba(1, 9, 75, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.91)),
        linear-gradient(135deg, rgba(253, 97, 76, 0.055), transparent 42%);
}

.api-key-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--coral-strong), #8de0b4);
}

.api-key-card-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding-bottom: 18px;
}

.api-key-card-head h2 {
    margin: 10px 0 0;
    color: var(--navy);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 0.98;
}

.api-key-prefix {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 950;
}

.api-key-scope-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    max-width: 190px;
}

.api-key-scope-list span {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 7px 9px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-key-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
    gap: 12px;
    align-items: end;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.api-key-create-form-wide {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr) auto;
}

.api-key-create-form-wide .button {
    grid-column: auto;
    width: fit-content;
}

.api-webhook-create-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.api-key-card .field-group span {
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-key-card .field-group input,
.api-key-card .field-group select {
    font-size: 15px;
    font-weight: 850;
}

.api-key-create-form .button {
    min-height: 52px;
    justify-content: center;
}

.api-key-list {
    display: grid;
    gap: 10px;
}

.api-key-row,
.api-key-empty {
    display: grid;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.045);
}

.api-key-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.api-key-row.is-revoked {
    opacity: 0.74;
    background: rgba(255, 255, 255, 0.62);
}

.api-key-fingerprint,
.api-empty-mark {
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 950;
}

.api-key-fingerprint {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    color: var(--navy);
    background:
        linear-gradient(135deg, rgba(1, 9, 75, 0.06), rgba(141, 224, 180, 0.1)),
        #ffffff;
}

.api-empty-mark {
    width: fit-content;
    border: 1px solid rgba(1, 9, 75, 0.1);
    padding: 8px 10px;
    color: var(--navy);
    background: rgba(1, 9, 75, 0.045);
}

.api-key-row-main,
.api-key-empty {
    min-width: 0;
}

.api-key-row strong,
.api-key-empty strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.25;
}

.api-key-row-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.api-key-row code {
    display: block;
    margin-top: 5px;
    color: var(--navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.api-key-row em {
    display: block;
    margin-top: 5px;
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.api-key-row form {
    flex: 0 0 auto;
}

.api-key-state {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 8px;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1;
    text-transform: uppercase;
}

.api-key-state.is-active {
    border: 1px solid rgba(33, 166, 103, 0.18);
    color: #1b6944 !important;
    background: rgba(232, 255, 241, 0.94);
}

.api-key-state.is-revoked {
    border: 1px solid rgba(180, 35, 24, 0.16);
    color: #b42318 !important;
    background: rgba(255, 241, 240, 0.92);
}

.api-key-state.is-warning {
    border: 1px solid rgba(201, 105, 0, 0.18);
    color: #8a4b00 !important;
    background: rgba(255, 247, 230, 0.98);
}

.api-key-empty {
    align-items: flex-start;
    gap: 8px;
}

.api-hub-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr);
    gap: 16px;
    align-items: end;
    margin-bottom: 14px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)),
        #ffffff;
    box-shadow: 0 18px 48px rgba(1, 9, 75, 0.06);
}

.api-hub-title {
    display: grid;
    gap: 8px;
}

.api-hub-kicker {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-hub-title h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(38px, 5vw, 56px);
    line-height: 0.95;
}

.api-hub-title p {
    max-width: 680px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
}

.api-hub-reference {
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 14px;
    background: #070d2d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.api-hub-reference span {
    color: #8de0b4;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-hub-reference code {
    color: #eaf0ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.api-hub-reference .button {
    width: fit-content;
    min-height: 40px;
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.api-hub-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(1, 9, 75, 0.1);
}

.api-hub-summary div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.94);
}

.api-hub-summary span,
.api-hub-summary em {
    color: var(--ink-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.api-hub-summary strong {
    color: var(--navy);
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
}

.api-hub-summary em {
    font-size: 12px;
    font-weight: 750;
    text-transform: none;
}

.api-hub-security {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-left: 4px solid var(--coral);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
}

.api-hub-security strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-hub-security span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.api-keys-page .api-key-card {
    overflow: hidden;
    border-color: rgba(1, 9, 75, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(1, 9, 75, 0.055);
}

.api-keys-page .api-key-card::before {
    display: none;
}

.api-keys-page .api-key-card-head {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 16px;
    background: rgba(248, 251, 255, 0.88);
}

.api-key-title-block {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.api-keys-page .api-key-card-head h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.05;
}

.api-keys-page .api-key-card .api-key-card-head p {
    margin-top: 5px;
}

.api-key-usage-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.74);
}

.api-key-usage-note strong {
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-key-usage-note span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.api-keys-page .api-key-create-form {
    background: rgba(248, 251, 255, 0.78);
    box-shadow: none;
}

.api-keys-page .api-key-list {
    gap: 8px;
}

.api-keys-page .api-key-row,
.api-keys-page .api-key-empty {
    box-shadow: none;
}

.api-docs-page {
    width: min(1240px, 100%);
    margin: 0 auto;
}

.api-docs-hero {
    display: grid;
    gap: 14px;
    justify-items: center;
    margin-bottom: 28px;
    text-align: center;
}

.api-docs-hero h1 {
    max-width: 860px;
    margin: 0;
    color: var(--navy);
    font-size: clamp(42px, 6.6vw, 70px);
    line-height: 0.96;
}

.api-docs-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 18px;
    font-weight: 720;
    line-height: 1.48;
}

.api-reference-toolbar-row,
.api-reference-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.88fr);
    column-gap: 30px;
}

.api-reference-toolbar-row {
    align-items: end;
    margin-bottom: 0;
}

.api-reference-toolbar-copy {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 0 0 18px;
}

.api-reference-toolbar-copy p {
    max-width: 620px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.45;
}

.api-reference-toolbar-copy code,
.api-reference-intro code,
.api-object-intro code {
    color: var(--navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
    font-weight: 850;
}

.api-language-toolbar-shell {
    align-self: end;
}

.api-language-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    z-index: 6;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 8px;
    background: #070d2d;
}

.api-language-toolbar button {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #cbd5ff;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.api-language-toolbar button.is-active {
    border-color: rgba(253, 97, 76, 0.36);
    color: #ffffff;
    background: rgba(253, 97, 76, 0.16);
}

@media (min-width: 981px) {
    .api-language-toolbar.is-fixed {
        position: fixed;
        top: 10px;
        z-index: 30;
        box-shadow: 0 16px 34px rgba(1, 9, 75, 0.18);
    }
}

.api-reference-grid {
    align-items: stretch;
    row-gap: 0;
}

.api-reference-intro,
.api-object-intro,
.api-endpoint-copy {
    border-bottom: 1px solid rgba(1, 9, 75, 0.1);
    padding: 28px 0;
}

.api-reference-code-note,
.api-code-section-marker,
.api-endpoint-code {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    padding: 28px;
    background: #070d2d;
}

.api-reference-code-note {
    border-radius: 0;
    color: #eaf0ff;
}

.api-reference-code-note span,
.api-code-section-marker span,
.api-code-heading span {
    color: #8de0b4;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-reference-code-note pre {
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.api-reference-code-note pre,
.api-code-sample,
.api-response-example pre {
    scrollbar-color: rgba(141, 224, 180, 0.46) rgba(255, 255, 255, 0.055);
    scrollbar-width: thin;
}

.api-reference-code-note pre::-webkit-scrollbar,
.api-code-sample::-webkit-scrollbar,
.api-response-example pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.api-reference-code-note pre::-webkit-scrollbar-track,
.api-code-sample::-webkit-scrollbar-track,
.api-response-example pre::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

.api-reference-code-note pre::-webkit-scrollbar-thumb,
.api-code-sample::-webkit-scrollbar-thumb,
.api-response-example pre::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(141, 224, 180, 0.48);
    background-clip: padding-box;
}

.api-reference-code-note pre::-webkit-scrollbar-thumb:hover,
.api-code-sample::-webkit-scrollbar-thumb:hover,
.api-response-example pre::-webkit-scrollbar-thumb:hover {
    background: rgba(141, 224, 180, 0.68);
    background-clip: padding-box;
}

.api-reference-code-note pre::-webkit-scrollbar-corner,
.api-code-sample::-webkit-scrollbar-corner,
.api-response-example pre::-webkit-scrollbar-corner {
    background: transparent;
}

.api-reference-code-note code,
.api-code-heading code,
.api-code-sample code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.api-reference-code-note p {
    margin: 0;
    color: #cbd5ff;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.5;
}

.api-reference-code-note p code {
    color: #ffffff;
}

.api-reference-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.api-reference-intro h2,
.api-object-intro h2 {
    max-width: 680px;
    margin: 0 0 12px;
    color: var(--navy);
    font-size: clamp(34px, 4.5vw, 50px);
    line-height: 0.98;
}

.api-reference-intro p,
.api-object-intro p,
.api-object-intro li,
.api-endpoint-copy p,
.api-endpoint-copy dd {
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.58;
}

.api-reference-intro p,
.api-object-intro p,
.api-endpoint-copy p {
    max-width: 690px;
    margin: 0 0 12px;
}

.api-object-intro ul {
    display: grid;
    gap: 8px;
    max-width: 680px;
    margin: 16px 0 0;
    padding-left: 18px;
}

.api-rate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 680px;
    margin: 18px 0;
}

.api-rate-grid div {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.api-rate-grid dt,
.api-rate-grid dd {
    margin: 0;
}

.api-rate-grid dt {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.api-rate-grid dd {
    margin-top: 4px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 950;
}

.api-code-section-marker {
    display: grid;
    align-content: center;
    min-height: 176px;
}

.api-code-section-marker p {
    margin: 8px 0 0;
    color: #cbd5ff;
    font-size: 13px;
    font-weight: 800;
}

.api-endpoint-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.api-endpoint-route {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.api-method {
    display: inline-flex;
    min-width: 58px;
    justify-content: center;
    border-radius: 7px;
    padding: 7px 9px;
    color: #ffffff;
    background: var(--navy);
    font-size: 12px;
    font-weight: 950;
}

.api-method-post,
.api-method-patch {
    background: var(--coral-strong);
}

.api-endpoint-route code {
    color: var(--navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.api-endpoint-copy h3 {
    margin: 0;
    color: var(--navy);
    font-size: 27px;
    line-height: 1.04;
}

.api-inputs {
    display: grid;
    gap: 10px;
    margin-top: 2px;
}

.api-inputs > span {
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-input-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.api-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 12px;
}

.api-input-row:last-child {
    border-bottom: 0;
}

.api-input-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.api-input-row code {
    color: var(--navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.api-input-row em,
.api-input-row span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-input-row em {
    color: var(--ink-muted);
    background: rgba(1, 9, 75, 0.06);
}

.api-input-row span {
    justify-self: end;
}

.api-input-row span.is-required {
    color: #b42318;
    background: rgba(255, 241, 240, 0.94);
}

.api-input-row span.is-conditional {
    color: #8a4b00;
    background: rgba(255, 247, 230, 0.98);
}

.api-input-row span.is-optional {
    color: #1b6944;
    background: rgba(232, 255, 241, 0.94);
}

.api-input-row p {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.48;
}

.api-response-fields {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.api-response-fields > span {
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-response-field-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.74);
}

.api-response-field-row {
    display: grid;
    gap: 6px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 12px;
}

.api-response-field-row:last-child {
    border-bottom: 0;
}

.api-response-field-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.api-response-field-row code {
    color: var(--navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.api-response-field-row em {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 7px;
    color: #1b6944;
    background: rgba(232, 255, 241, 0.94);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-response-field-row p {
    max-width: none;
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.48;
}

.api-endpoint-copy dl {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
}

.api-endpoint-copy dl div {
    border-left: 3px solid rgba(253, 97, 76, 0.34);
    padding-left: 12px;
}

.api-endpoint-copy dt,
.api-endpoint-copy dd {
    margin: 0;
}

.api-endpoint-copy dt {
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.api-code-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.api-code-heading code {
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.api-code-sample {
    display: none;
    overflow-x: auto;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
    color: #f8fbff;
    background:
        radial-gradient(circle at 100% 0, rgba(253, 97, 76, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.05);
    font-size: 12.5px;
    line-height: 1.58;
}

.api-code-sample.is-active {
    display: block;
}

.api-response-example {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.api-response-example-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.api-response-example-head span {
    color: #8de0b4;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.api-response-example-head code {
    border-radius: 999px;
    padding: 6px 8px;
    color: #ffffff;
    background: rgba(141, 224, 180, 0.13);
    font-size: 11px;
    font-weight: 900;
}

.api-response-example pre {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    margin: 0;
    border: 1px solid rgba(141, 224, 180, 0.13);
    border-radius: 8px;
    padding: 14px 14px calc(14px + 1.58em);
    color: #f8fbff;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.045);
    font-size: 12.5px;
    line-height: 1.58;
}

.api-response-example code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.syntax-highlighted {
    tab-size: 2;
}

.syntax-token {
    font-weight: inherit;
}

.syntax-key,
.syntax-tag,
.syntax-name {
    color: #8de0b4;
}

.syntax-string {
    color: #ffe39b;
}

.syntax-number {
    color: #ffad9f;
}

.syntax-boolean,
.syntax-keyword {
    color: #a8c7ff;
}

.syntax-variable,
.syntax-flag {
    color: #ffd166;
}

.syntax-comment {
    color: #7f8bb5;
}

.syntax-punctuation {
    color: #c9d2f4;
}

.embed-code-block .syntax-key,
.embed-code-block .syntax-tag,
.embed-code-block .syntax-name {
    color: #157a53;
}

.embed-code-block .syntax-string {
    color: #9b4b00;
}

.embed-code-block .syntax-number {
    color: #b42318;
}

.embed-code-block .syntax-boolean,
.embed-code-block .syntax-keyword {
    color: #3156b7;
}

.embed-code-block .syntax-variable,
.embed-code-block .syntax-flag {
    color: #9a5a00;
}

.embed-code-block .syntax-comment {
    color: #7a849c;
}

.embed-code-block .syntax-punctuation {
    color: #64708c;
}

.page-main:has(.docs-page) {
    width: min(1240px, calc(100% - 40px));
}

.docs-page {
    display: grid;
    gap: 24px;
    width: 100%;
    margin: 0 auto;
}

.docs-hero {
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 58px 20px 24px;
    text-align: center;
}

.docs-hero h1 {
    max-width: 850px;
    margin: 0;
    color: var(--navy);
    font-size: clamp(44px, 6.6vw, 72px);
    line-height: 0.96;
}

.docs-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 18px;
    font-weight: 720;
    line-height: 1.56;
}

.docs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
}

.docs-path-card,
.docs-api-callout,
.docs-section-card,
.docs-article,
.docs-side-nav,
.docs-quick-links,
.docs-builder-guides,
.docs-inline-callout,
.docs-notes,
.docs-related a,
.docs-prev-next a {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.075);
}

.docs-path-card {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 26px;
    align-items: start;
    padding: 30px;
    background:
        linear-gradient(135deg, rgba(253, 97, 76, 0.07), transparent 38%),
        radial-gradient(circle at 94% 8%, rgba(141, 224, 180, 0.16), transparent 32%),
        rgba(255, 255, 255, 0.94);
}

.docs-path-card h2,
.docs-api-callout h2,
.docs-article h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
    letter-spacing: 0;
}

.docs-path-card h2 {
    max-width: 380px;
    font-size: 34px;
    line-height: 1;
}

.docs-path-card p,
.docs-api-callout p,
.docs-section-card p,
.docs-article p,
.docs-before li,
.docs-notes li {
    color: var(--ink-muted);
    font-weight: 720;
    line-height: 1.55;
}

.docs-path-card p {
    max-width: 430px;
    margin: 12px 0 0;
}

.docs-path-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-path-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.docs-path-list span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--coral-strong);
    background: rgba(255, 240, 237, 0.95);
    font-size: 12px;
    font-weight: 950;
}

.docs-path-list a {
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.22;
}

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

.docs-section-card {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(234, 243, 255, 0.76), rgba(255, 255, 255, 0.92) 42%),
        rgba(255, 255, 255, 0.92);
}

.docs-section-card > span {
    color: var(--coral-strong);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-section-card p {
    max-width: 560px;
    margin: 0;
    font-size: 15px;
}

.docs-section-links {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.docs-section-links a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 13px 14px;
}

.docs-section-links a:last-child {
    border-bottom: 0;
}

.docs-section-links a:hover {
    background: rgba(1, 9, 75, 0.035);
}

.docs-section-links strong {
    color: var(--navy);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.docs-section-links em {
    border-radius: 999px;
    padding: 5px 7px;
    color: #1b6944;
    background: rgba(232, 255, 241, 0.94);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
    text-transform: uppercase;
}

.docs-api-callout {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 0, rgba(253, 97, 76, 0.26), transparent 35%),
        linear-gradient(135deg, #07104f, #0b165f);
}

.docs-api-callout h2 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.docs-api-callout p {
    max-width: 740px;
    margin: 10px 0 0;
    color: #cbd5ff;
}

.docs-api-callout .section-kicker {
    color: #8de0b4;
}

.docs-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 850;
}

.docs-breadcrumb a {
    color: var(--navy);
}

.docs-article-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.28fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.docs-side-nav {
    position: relative;
    top: auto;
    display: grid;
    gap: 12px;
    max-height: none;
    overflow: visible;
    padding: 16px;
    box-shadow: 0 16px 42px rgba(1, 9, 75, 0.06);
}

.docs-side-nav div {
    display: grid;
    gap: 4px;
}

.docs-side-nav strong {
    margin-bottom: 3px;
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-side-nav a {
    border-radius: 7px;
    padding: 5px 7px;
    color: var(--ink-muted);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.2;
}

.docs-side-nav a:hover,
.docs-side-nav a.is-active {
    color: var(--navy);
    background: rgba(1, 9, 75, 0.055);
}

.docs-side-nav .docs-side-home,
.docs-side-nav .docs-side-api {
    display: inline-flex;
    justify-content: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    color: var(--navy);
    background: #ffffff;
}

.docs-article {
    display: grid;
    gap: 28px;
    padding: clamp(24px, 4vw, 44px);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 54px rgba(1, 9, 75, 0.055);
}

.docs-article-hero {
    display: grid;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    padding-bottom: 22px;
}

.docs-article-hero span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-article-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--navy);
    font-size: clamp(38px, 5vw, 60px);
    line-height: 0.98;
}

.docs-article-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 18px;
}

.docs-intro,
.docs-explainers,
.docs-quick-links,
.docs-builder-guides {
    display: grid;
    gap: 14px;
}

.docs-intro {
    max-width: 760px;
}

.docs-intro p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.68;
}

.docs-quick-links {
    padding: 20px;
    background:
        linear-gradient(135deg, rgba(234, 243, 255, 0.76), rgba(255, 255, 255, 0.96) 42%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 42px rgba(1, 9, 75, 0.055);
}

.docs-quick-links h2,
.docs-builder-guides h2 {
    margin: 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.08;
}

.docs-quick-links p,
.docs-builder-guides-heading p {
    max-width: 700px;
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.55;
}

.docs-quick-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.docs-quick-link-grid a {
    display: grid;
    gap: 6px;
    min-height: 96px;
    align-content: start;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 14px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.86);
    text-decoration: none;
}

.docs-quick-link-grid a:hover,
.docs-quick-link-grid a:focus-visible {
    border-color: rgba(253, 97, 76, 0.34);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(1, 9, 75, 0.07);
    transform: translateY(-1px);
}

.docs-quick-link-grid strong {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.2;
}

.docs-quick-link-grid span {
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1.4;
}

.docs-before,
.docs-notes {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    box-shadow: none;
}

.docs-before {
    border-left: 3px solid var(--coral);
    background: linear-gradient(90deg, rgba(255, 240, 237, 0.62), transparent 72%);
}

.docs-before h2,
.docs-notes h2,
.docs-related h2,
.docs-steps h2,
.docs-explainers h2 {
    font-size: 24px;
    line-height: 1.08;
}

.docs-before ul,
.docs-notes ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 19px;
}

.docs-before li::marker,
.docs-notes li::marker {
    color: var(--coral-strong);
}

.docs-steps {
    display: grid;
    gap: 12px;
}

.docs-section-intro {
    max-width: 720px;
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.62;
}

.docs-steps ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
    border: 0;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 0;
    padding: 22px 0;
    background: transparent;
}

.docs-steps li:has(.docs-step-screenshot) {
    grid-template-columns: 40px minmax(0, 1fr) minmax(260px, 44%);
    align-items: start;
}

.docs-steps li:last-child {
    border-bottom: 0;
}

.docs-steps li > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: var(--coral-strong);
    background: rgba(255, 240, 237, 0.95);
    font-size: 12px;
    font-weight: 950;
}

.docs-steps h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
}

.docs-steps p {
    margin: 0;
    font-size: 15px;
}

.docs-step-screenshot {
    grid-column: 3;
    grid-row: 1 / span 2;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.055);
}

.docs-step-screenshot img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    object-position: center;
}

.docs-step-screenshot figcaption {
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding: 10px 13px;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 760;
}

.docs-builder-guides {
    padding: 22px;
    background:
        radial-gradient(circle at 98% 0, rgba(141, 224, 180, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(255, 240, 237, 0.55), rgba(255, 255, 255, 0.96) 34%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.06);
}

.docs-builder-guides-heading {
    display: grid;
    gap: 5px;
}

.docs-builder-guides-heading > span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-builder-jump-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.docs-builder-jump-list a {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
}

.docs-builder-jump-list a:hover,
.docs-builder-jump-list a:focus-visible {
    border-color: rgba(253, 97, 76, 0.35);
    color: var(--coral-strong);
    background: #ffffff;
}

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

.docs-builder-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
}

.docs-builder-grid article > span {
    width: fit-content;
    border: 1px solid rgba(141, 224, 180, 0.42);
    border-radius: 999px;
    padding: 5px 8px;
    color: #1b6944;
    background: rgba(232, 255, 241, 0.92);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-builder-grid h3 {
    margin: 0;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.1;
}

.docs-builder-grid ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.docs-builder-grid li,
.docs-builder-grid p {
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 720;
    line-height: 1.48;
}

.docs-builder-grid li::marker {
    color: var(--coral-strong);
    font-weight: 950;
}

.docs-builder-grid p {
    margin: 0;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 10px;
}

.docs-builder-grid strong {
    color: var(--navy);
}

.docs-explainers > div {
    display: grid;
    gap: 16px;
}

.docs-explainers article {
    display: grid;
    gap: 8px;
    max-width: 780px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    padding-bottom: 16px;
}

.docs-builder-guides h2,
.docs-explainers article,
.docs-builder-grid article {
    scroll-margin-top: 92px;
}

.docs-explainers article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.docs-explainers h3 {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.2;
}

.docs-explainers p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.65;
}

.docs-inline-callout {
    display: grid;
    gap: 8px;
    padding: 18px;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.18), transparent 34%),
        linear-gradient(135deg, #07104f, #0b165f);
}

.docs-inline-callout strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
}

.docs-inline-callout p {
    margin: 0;
    color: #cbd5ff;
    font-size: 14px;
}

.docs-inline-callout a {
    width: fit-content;
    color: #8de0b4;
    font-size: 14px;
    font-weight: 900;
}

.docs-related {
    display: grid;
    gap: 14px;
}

.docs-related > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.docs-related a {
    display: grid;
    gap: 7px;
    padding: 16px;
    box-shadow: none;
}

.docs-related strong {
    color: var(--navy);
    font-size: 15px;
    font-weight: 950;
}

.docs-related span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.45;
}

.docs-prev-next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 4px;
}

.docs-prev-next a {
    display: grid;
    gap: 5px;
    padding: 16px;
    box-shadow: none;
}

.docs-prev-next a:last-child {
    text-align: right;
}

.docs-prev-next span {
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.docs-prev-next strong {
    color: var(--navy);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.25;
}

@media (max-width: 980px) {
    .docs-path-card,
    .docs-article-layout {
        grid-template-columns: 1fr;
    }

    .docs-path-list,
    .docs-section-grid,
    .docs-quick-link-grid,
    .docs-builder-grid,
    .docs-related > div {
        grid-template-columns: 1fr;
    }

    .docs-side-nav {
        position: relative;
        top: auto;
        max-height: none;
    }

    .docs-side-nav div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .docs-side-nav strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .docs-steps li:has(.docs-step-screenshot) {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .docs-step-screenshot {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        margin-top: 4px;
    }

    .docs-step-screenshot img {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .page-main:has(.docs-page) {
        width: min(100% - 28px, 1240px);
    }

    .docs-hero {
        padding: 38px 0 12px;
    }

    .docs-hero h1,
    .docs-article-hero h1 {
        font-size: 38px;
    }

    .docs-hero p,
    .docs-article-hero p {
        font-size: 16px;
    }

    .docs-path-card,
    .docs-api-callout,
    .docs-section-card,
    .docs-quick-links,
    .docs-builder-guides,
    .docs-article {
        padding: 20px;
    }

    .docs-path-list,
    .docs-prev-next {
        grid-template-columns: 1fr;
    }

    .docs-api-callout {
        align-items: start;
        flex-direction: column;
    }

    .docs-side-nav div {
        grid-template-columns: 1fr;
    }

    .docs-steps li {
        grid-template-columns: 1fr;
    }

    .docs-step-screenshot {
        grid-column: 1;
    }

    .docs-prev-next a:last-child {
        text-align: left;
    }
}

.billing-page {
    width: min(100%, 1120px);
    margin-top: 4px;
}

.billing-shell {
    gap: 16px;
}

.billing-command-hero {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

.billing-command-copy,
.billing-plan-panel {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.075);
}

.billing-command-copy {
    display: grid;
    gap: 14px;
    align-content: center;
    min-height: 260px;
    padding: 32px;
    background:
        linear-gradient(135deg, rgba(253, 97, 76, 0.075), transparent 38%),
        radial-gradient(circle at 96% 0, rgba(141, 224, 180, 0.18), transparent 34%),
        rgba(255, 255, 255, 0.94);
}

.billing-command-copy h1 {
    max-width: 760px;
    margin: 0;
    color: var(--navy);
    font-size: 48px;
    line-height: 0.98;
}

.billing-command-copy p,
.billing-plan-head p,
.billing-payment-head p,
.billing-payment-note {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.45;
}

.billing-command-copy p {
    max-width: 740px;
    font-size: 16px;
}

.billing-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.billing-hero-cta {
    min-height: 56px;
    min-width: 210px;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 20px 44px rgba(253, 97, 76, 0.26);
}

.billing-hero-cta:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    box-shadow: none;
}

.billing-command-actions span {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 850;
}

.billing-plan-rows {
    display: grid;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.76);
}

.billing-plan-rows div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 11px 12px;
}

.billing-plan-rows div:last-child {
    border-bottom: 0;
}

.billing-plan-rows dt {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 850;
}

.billing-plan-rows dd {
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
    text-align: right;
}

.billing-plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 16px;
}

.billing-plan-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 24px;
}

.billing-plan-current {
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.14), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.billing-plan-paid {
    background:
        linear-gradient(135deg, rgba(253, 97, 76, 0.055), transparent 34%),
        rgba(255, 255, 255, 0.94);
}

.billing-plan-head {
    display: grid;
    gap: 9px;
}

.billing-plan-head h2,
.billing-plan-paid-top h2,
.billing-payment-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
    line-height: 1.04;
}

.billing-plan-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--navy);
    background: #ffffff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.billing-plan-badge.is-paid {
    border-color: rgba(33, 166, 103, 0.24);
    color: #1b6944;
    background: rgba(232, 255, 241, 0.92);
}

.billing-plan-badge.is-free {
    border-color: rgba(253, 97, 76, 0.22);
    color: var(--coral-strong);
    background: rgba(255, 244, 241, 0.9);
}

.billing-renewal-note {
    border: 1px solid rgba(33, 166, 103, 0.16);
    border-radius: 8px;
    padding: 12px;
    color: #24553a;
    background: rgba(232, 255, 241, 0.86);
    font-size: 14px;
    font-weight: 850;
}

.billing-plan-paid-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.billing-price-lockup {
    display: flex;
    align-items: baseline;
    min-width: 138px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(1, 9, 75, 0.07);
}

.billing-price-lockup span {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 800;
    line-height: 0.95;
}

.billing-price-lockup strong {
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 900;
}

.billing-benefit-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-benefit-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 11px 13px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.billing-benefit-list span {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: #21a667;
    font-size: 13px;
    font-weight: 950;
}

.billing-downgrade-form {
    display: flex;
    justify-content: flex-start;
}

.billing-modal-card.billing-confirm-card {
    width: min(100%, 560px);
}

.billing-confirm-panel {
    display: grid;
    gap: 16px;
    padding-right: 48px;
}

.billing-confirm-panel h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(30px, 5vw, 44px);
    line-height: 0.98;
}

.billing-confirm-panel p {
    margin: 0;
    color: var(--navy-soft);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.billing-confirm-warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(253, 97, 76, 0.24);
    border-radius: 8px;
    padding: 14px;
    color: var(--navy);
    background: rgba(255, 247, 245, 0.92);
}

.billing-confirm-warning span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: var(--coral);
    font-size: 16px;
    font-weight: 950;
}

.billing-confirm-warning strong {
    font-size: 14px;
    line-height: 1.35;
}

.billing-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.billing-downgrade-confirm-form {
    margin: 0;
}

.billing-confirm-submit {
    border: 1px solid rgba(180, 35, 24, 0.28);
    color: #ffffff;
    background: linear-gradient(180deg, #f04438, #b42318);
    box-shadow: 0 14px 34px rgba(180, 35, 24, 0.22);
}

.billing-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 9, 75, 0.42);
    backdrop-filter: blur(10px);
}

.billing-modal-backdrop[hidden] {
    display: none;
}

body.is-billing-modal-open {
    overflow: hidden;
}

.billing-modal-card {
    position: relative;
    width: min(100%, 820px);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 28px;
    background:
        radial-gradient(circle at 0 0, rgba(253, 97, 76, 0.08), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.16), transparent 34%),
        #ffffff;
    box-shadow: 0 34px 90px rgba(1, 9, 75, 0.24);
}

.billing-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}

.billing-modal-close span {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: var(--navy);
}

.billing-modal-close span:first-child {
    transform: rotate(45deg);
}

.billing-modal-close span:last-child {
    transform: rotate(-45deg);
}

.billing-payment-panel {
    display: grid;
    gap: 18px;
    padding: 0;
}

.billing-payment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 62px;
}

.billing-payment-head > div {
    display: grid;
    gap: 8px;
}

.billing-secure-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 999px;
    padding: 8px 11px;
    color: var(--navy);
    background: rgba(248, 251, 255, 0.92);
    font-size: 12px;
    font-weight: 950;
}

.billing-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    gap: 18px;
    align-items: start;
}

.billing-card-entry {
    display: grid;
    gap: 14px;
}

.billing-card-mini-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.billing-card-field {
    display: grid;
    gap: 8px;
}

.billing-card-field label {
    color: var(--navy-soft);
    font-size: 14px;
    font-weight: 850;
}

.billing-card-element {
    min-height: 52px;
    border: 1px solid rgba(1, 9, 75, 0.14);
    border-radius: 8px;
    padding: 16px 14px;
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 12px 30px rgba(1, 9, 75, 0.055);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.billing-card-element.StripeElement--focus {
    border-color: rgba(253, 97, 76, 0.72);
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.13);
}

.billing-card-element.StripeElement--invalid {
    border-color: rgba(180, 35, 24, 0.42);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1);
}

.billing-order-summary {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.16), transparent 38%),
        rgba(248, 251, 255, 0.86);
}

.billing-order-summary > span {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-order-summary > strong {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    line-height: 0.95;
}

.billing-order-summary dl {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
}

.billing-order-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 11px 0;
}

.billing-order-summary div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.billing-order-summary dt,
.billing-order-summary dd {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.25;
}

.billing-order-summary dt {
    color: var(--ink-muted);
    font-weight: 850;
}

.billing-order-summary dd {
    color: var(--navy);
    font-weight: 950;
    text-align: right;
}

.billing-form-error[hidden] {
    display: none;
}

.billing-payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.billing-payment-note {
    max-width: 420px;
    font-weight: 760;
}

.billing-upgrade-button {
    gap: 9px;
    min-width: 166px;
}

.billing-upgrade-button.is-processing .button-spinner {
    display: inline-block;
}

.billing-upgrade-button.is-processing {
    pointer-events: none;
    opacity: 0.84;
}

.export-shell {
    gap: 18px;
}

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

.export-dataset-card {
    display: grid;
    gap: 6px;
    min-height: 124px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.055);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.export-dataset-card:hover,
.export-dataset-card.is-active {
    border-color: rgba(253, 97, 76, 0.34);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.09);
    transform: translateY(-1px);
}

.export-dataset-card span {
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.export-dataset-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.export-dataset-card em {
    align-self: end;
    color: var(--coral-strong);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

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

.export-column-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 72px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 14px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.76);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.export-column-option:hover {
    border-color: rgba(253, 97, 76, 0.3);
    background: rgba(255, 255, 255, 0.94);
}

.export-column-option input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--coral);
}

.export-column-option span {
    display: grid;
    gap: 3px;
}

.export-column-option strong {
    font-size: 15px;
    line-height: 1.15;
}

.export-column-option em {
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.export-download-button {
    gap: 9px;
    min-width: 150px;
}

.button-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.48);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: zwely-spin 720ms linear infinite;
}

.export-download-button.is-processing .button-spinner {
    display: inline-block;
}

.export-download-button.is-processing {
    pointer-events: none;
    opacity: 0.82;
}

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

.page-shell h1,
.page-shell h2,
.page-shell h3 {
    font-family: var(--font-heading);
    font-weight: 800;
}

.discount-avatar {
    color: #ffffff;
    background:
        radial-gradient(circle at 24% 22%, rgba(255, 231, 124, 0.95), rgba(255, 231, 124, 0) 24%),
        linear-gradient(135deg, #fd614c 0%, #6d28d9 58%, #01094b 100%);
}

.discount-form-shell {
    max-width: 940px;
}

.discount-form-card {
    padding: 34px;
}

.discount-code-form {
    gap: 22px;
}

.discount-form-section {
    display: grid;
    gap: 14px;
}

.discount-code-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
    gap: 16px;
    align-items: stretch;
}

.discount-code-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
}

.discount-refresh-button {
    display: inline-grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 24px rgba(1, 9, 75, 0.07);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.discount-refresh-button:hover {
    transform: translateY(-1px);
    border-color: rgba(253, 97, 76, 0.34);
    box-shadow: 0 16px 32px rgba(1, 9, 75, 0.1);
}

.discount-refresh-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discount-active-card {
    margin: 0;
    min-height: 100%;
}

.discount-active-card .license-primary-toggle {
    height: 100%;
    align-items: center;
    padding: 14px 16px;
}

.compact-check-row {
    min-height: 56px;
    margin: 0;
}

.discount-section-label {
    color: var(--coral);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.discount-type-card {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 94px;
    align-content: center;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 18px 56px 18px 18px;
    color: var(--navy);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.82)),
        radial-gradient(circle at 12% 0%, rgba(253, 97, 76, 0.12), transparent 28%);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.06);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.discount-type-card:hover,
.discount-type-card.is-selected {
    border-color: rgba(253, 97, 76, 0.38);
    box-shadow: 0 20px 46px rgba(1, 9, 75, 0.09);
}

.discount-type-card:hover {
    transform: translateY(-1px);
}

.discount-type-card input[type="radio"] {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    accent-color: var(--coral);
}

.discount-type-card > span {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.discount-type-card em {
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
}

.discount-amount-card {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.7)),
        radial-gradient(circle at 92% 0%, rgba(127, 224, 194, 0.16), transparent 34%);
}

.discount-value-panel[hidden] {
    display: none;
}

.discount-suffix-input,
.discount-prefix-input {
    display: grid;
    align-items: center;
    min-height: 54px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.discount-suffix-input {
    grid-template-columns: minmax(0, 1fr) auto;
}

.discount-prefix-input {
    grid-template-columns: auto minmax(0, 1fr);
}

.discount-suffix-input input,
.discount-prefix-input input {
    width: 100%;
    min-height: 54px;
    border: 0;
    padding: 0 16px;
    color: var(--navy);
    background: transparent;
    font-size: 20px;
    font-weight: 850;
}

.discount-suffix-input span,
.discount-prefix-input span {
    display: inline-grid;
    min-width: 52px;
    height: 54px;
    place-items: center;
    color: var(--ink-muted);
    font-size: 16px;
    font-weight: 900;
    background: rgba(1, 9, 75, 0.035);
}

.discount-advanced-section {
    padding-top: 2px;
}

.discount-advanced-toggle {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0;
    color: var(--navy);
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.discount-advanced-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.discount-advanced-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.discount-options-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 14px;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 16px;
    background:
        radial-gradient(circle at 96% 0%, rgba(127, 224, 194, 0.13), transparent 28%),
        rgba(246, 251, 255, 0.72);
}

.discount-options-grid[hidden] {
    display: none;
}

.discount-options-grid > .field {
    grid-column: span 4;
    min-width: 0;
}

.discount-product-limit-field,
.discount-email-limit-field {
    grid-column: span 6 !important;
}

.discount-options-grid input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 800;
}

.discount-options-grid input[type="datetime-local"] {
    font-size: 14px;
}

.discount-options-grid .field label {
    gap: 5px;
    font-size: 13px;
    line-height: 1.2;
}

.discount-options-grid .field label span {
    font-size: 11px;
}

.discount-product-picker {
    position: relative;
}

.discount-product-picker summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 46px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    cursor: pointer;
    list-style: none;
}

.discount-product-picker summary::-webkit-details-marker {
    display: none;
}

.discount-product-picker summary svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.discount-product-picker[open] summary svg {
    transform: rotate(180deg);
}

.discount-product-selected,
.discount-product-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
}

.discount-product-selected img,
.discount-product-option img,
.discount-product-picker-art {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.discount-product-selected img,
.discount-product-option img {
    object-fit: cover;
}

.discount-product-picker-art {
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 231, 124, 0.95), transparent 25%),
        linear-gradient(135deg, var(--coral), #01094b);
    font-size: 11px;
    font-weight: 950;
}

.discount-product-selected strong,
.discount-product-option strong {
    display: block;
    overflow: hidden;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discount-product-selected em,
.discount-product-option em {
    display: block;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discount-product-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: grid;
    gap: 4px;
    max-height: 244px;
    overflow: auto;
    border: 1px solid rgba(1, 9, 75, 0.11);
    border-radius: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 46px rgba(1, 9, 75, 0.14);
}

.discount-product-option {
    border-radius: 7px;
    padding: 7px;
    cursor: pointer;
}

.discount-product-option:hover,
.discount-product-option:has(input:checked) {
    background: rgba(239, 246, 255, 0.9);
}

.discount-product-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.email-settings-shell {
    width: min(100%, 1220px);
}

.email-designer-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.34fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.email-settings-panel {
    display: grid;
    align-content: start;
    gap: 20px;
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.15), transparent 34%),
        radial-gradient(circle at 0% 72%, rgba(253, 97, 76, 0.08), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.92));
}

.email-control-hero {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    padding: 18px 22px 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 252, 0.94));
}

.email-control-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.08);
}

.email-control-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--coral-strong);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.email-control-hero span:not(.email-control-icon) {
    display: block;
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.email-control-hero strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.15;
}

.email-control-hero em {
    display: block;
    margin-top: 5px;
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    line-height: 1.42;
}

.email-settings-form {
    display: grid;
    gap: 13px;
    padding: 0 22px 24px;
}

.email-inline-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    cursor: pointer;
}

.email-inline-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.email-toggle-switch {
    position: relative;
    display: block;
    width: 44px;
    height: 26px;
    border: 1px solid rgba(1, 9, 75, 0.13);
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.1);
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.email-toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(1, 9, 75, 0.18);
    transition: transform 160ms ease;
}

.email-inline-toggle input[type="checkbox"]:checked + .email-toggle-switch {
    border-color: rgba(35, 178, 109, 0.32);
    background: #23b26d;
    box-shadow: 0 10px 24px rgba(35, 178, 109, 0.18);
}

.email-inline-toggle input[type="checkbox"]:checked + .email-toggle-switch::after {
    transform: translateX(18px);
}

.email-inline-toggle input[type="checkbox"]:focus-visible + .email-toggle-switch {
    box-shadow: 0 0 0 4px rgba(253, 97, 76, 0.12);
}

.email-inline-toggle strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.email-inline-toggle em {
    display: block;
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

.email-settings-form.is-saving .email-inline-toggle,
.email-settings-form.is-saving .email-reply-fields,
.email-settings-form.is-saving .email-delivery-fields {
    opacity: 0.76;
}

.email-reply-fields,
.email-delivery-fields {
    display: grid;
    gap: 10px;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 13px;
}

.email-reply-fields .field,
.email-delivery-fields .field {
    gap: 5px;
}

.email-reply-fields .field label,
.email-delivery-fields .field label {
    color: var(--navy);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.email-reply-fields input,
.email-delivery-fields input,
.email-delivery-fields select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 800;
}

.email-delivery-fields select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--navy) 50%),
        linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 18px,
        calc(100% - 11px) 18px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 32px;
}

.email-settings-status {
    min-height: 20px;
    margin: 0;
    color: #2f855a;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.email-settings-status[data-state="saving"] {
    color: var(--ink-muted);
}

.email-settings-status[data-state="error"] {
    color: #b42318;
}

.email-panel-divider {
    height: 1px;
    margin: 0 22px;
    background: rgba(1, 9, 75, 0.1);
}

.email-logo-form {
    display: grid;
    gap: 12px;
    padding: 0 22px;
}

.email-section-heading strong {
    font-size: 17px;
}

.email-logo-dropzone {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    border: 1px dashed rgba(1, 9, 75, 0.2);
    border-radius: 8px;
    padding: 14px;
    background:
        linear-gradient(rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        rgba(255, 255, 255, 0.88);
    background-size: 18px 18px, 18px 18px, auto;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.email-logo-dropzone:hover,
.email-logo-dropzone.is-dragging,
.email-logo-dropzone.is-uploading {
    border-color: rgba(253, 97, 76, 0.56);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

.email-logo-dropzone.is-uploading {
    cursor: progress;
}

.email-logo-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.email-logo-preview {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    color: var(--coral-strong);
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 230, 109, 0.6), transparent 28%),
        linear-gradient(135deg, #ffffff, #f4f8ff);
    font-size: 28px;
    font-weight: 900;
}

.email-logo-preview img {
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
}

.email-logo-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.email-logo-copy strong {
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.email-logo-copy em,
.email-logo-status {
    color: var(--ink-muted);
    font-size: 13px;
    font-style: normal;
    line-height: 1.42;
}

.email-logo-remove {
    justify-self: start;
    min-height: 26px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 999px;
    padding: 4px 10px;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.email-logo-remove:hover,
.email-logo-remove:focus-visible {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.24);
    background: rgba(254, 243, 242, 0.9);
}

.email-logo-remove:disabled {
    opacity: 0.56;
    cursor: progress;
}

.email-logo-status {
    min-height: 18px;
    margin: 0;
}

.email-preview-stage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    min-height: 790px;
    overflow: visible;
    border-color: rgba(1, 9, 75, 0.16);
    padding: 16px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        radial-gradient(circle at 72% 18%, rgba(253, 97, 76, 0.18), transparent 30%),
        radial-gradient(circle at 14% 92%, rgba(141, 224, 180, 0.15), transparent 28%),
        linear-gradient(145deg, #dfe5ee, #c8d1df 54%, #e7e2e1);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 28px 78px rgba(1, 9, 75, 0.15);
}

.email-preview-toolbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.09);
    backdrop-filter: blur(18px);
}

.email-toolbar-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.email-toolbar-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--coral-strong);
    background: rgba(253, 97, 76, 0.08);
    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.email-product-picker {
    width: 100%;
}

.email-product-picker summary {
    min-height: 42px;
    padding: 5px 9px;
}

.email-product-picker .discount-product-selected,
.email-product-picker .discount-product-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.email-product-picker .discount-product-selected img,
.email-product-picker .discount-product-option img,
.email-product-picker .discount-product-picker-art {
    width: 34px;
    height: 34px;
}

.email-product-picker .discount-product-selected > span:last-child,
.email-product-picker .discount-product-option > span:last-child {
    min-width: 0;
}

.email-toolbar-empty {
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 800;
}

.email-test-button {
    min-height: 42px;
    border-color: rgba(253, 97, 76, 0.2);
    justify-content: center;
    padding: 0 16px;
    color: var(--navy);
    background:
        radial-gradient(circle at 12% 0%, rgba(253, 97, 76, 0.18), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.24), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.88));
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.09), 0 10px 24px rgba(253, 97, 76, 0.1);
    font-weight: 950;
    white-space: nowrap;
}

.email-test-button:hover,
.email-test-button:focus-visible {
    border-color: rgba(253, 97, 76, 0.36);
    box-shadow: 0 18px 42px rgba(1, 9, 75, 0.12), 0 12px 28px rgba(253, 97, 76, 0.14);
}

.email-test-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.email-test-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 9, 75, 0.42);
    backdrop-filter: blur(10px);
}

.email-test-modal-backdrop[hidden] {
    display: none;
}

body.is-email-test-modal-open {
    overflow: hidden;
}

.email-test-modal-card {
    position: relative;
    display: grid;
    width: min(100%, 520px);
    gap: 18px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 28px;
    background:
        radial-gradient(circle at 0 0, rgba(253, 97, 76, 0.08), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.16), transparent 34%),
        #ffffff;
    box-shadow: 0 34px 90px rgba(1, 9, 75, 0.24);
}

.email-test-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    cursor: pointer;
}

.email-test-modal-close span {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: var(--navy);
}

.email-test-modal-close span:first-child {
    transform: rotate(45deg);
}

.email-test-modal-close span:last-child {
    transform: rotate(-45deg);
}

.email-test-modal-head {
    display: grid;
    gap: 8px;
    padding-right: 54px;
}

.email-test-modal-head > span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--coral-strong);
    background: rgba(253, 97, 76, 0.09);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.email-test-modal-head h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 34px;
    line-height: 1;
}

.email-test-modal-head p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.email-test-modal-head strong {
    color: var(--navy);
}

.email-test-form {
    display: grid;
    gap: 14px;
}

.email-test-recipient {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 14px 15px;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.14), transparent 40%),
        rgba(255, 255, 255, 0.92);
}

.email-test-recipient span {
    color: var(--coral-strong);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.email-test-recipient strong {
    color: var(--navy);
    font-size: 15px;
    font-weight: 950;
    word-break: break-word;
}

.email-test-recipient p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}

.email-test-status {
    min-height: 20px;
    margin: 0;
    color: #2f855a;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.email-test-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.email-test-submit.is-processing {
    cursor: progress;
    opacity: 0.78;
}

.email-blueprint-frame {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    justify-items: center;
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 34px 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.18);
}

.email-blueprint-frame::-webkit-scrollbar {
    width: 10px;
}

.email-blueprint-frame::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.34);
    border-radius: 999px;
}

.email-blueprint-frame::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.24);
}

.email-free-product-note {
    display: flex;
    width: min(100%, 640px);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(25, 145, 90, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
    color: #11663f;
    background:
        radial-gradient(circle at 0 0, rgba(141, 224, 180, 0.22), transparent 36%),
        rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.08);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
}

.email-free-product-note[hidden] {
    display: none;
}

.email-free-product-note strong {
    flex: 0 0 auto;
    color: #0b7a49;
    font-weight: 950;
}

.email-free-product-note span {
    min-width: 0;
    color: rgba(1, 9, 75, 0.68);
}

.email-preview-floating {
    width: min(100%, 640px);
    min-height: 420px;
    border-radius: 18px;
    filter: drop-shadow(0 36px 74px rgba(1, 9, 75, 0.22));
    transform-origin: top center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.email-preview-floating.is-loading {
    opacity: 0.58;
    transform: translateY(4px);
}

.email-preview-floating table {
    max-width: 100%;
}

.email-empty-preview {
    display: grid;
    width: min(100%, 520px);
    min-height: 360px;
    place-items: center;
    gap: 10px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 60px rgba(1, 9, 75, 0.12);
}

.email-empty-preview strong {
    color: var(--navy);
    font-size: 22px;
    line-height: 1.15;
}

.email-empty-preview p {
    max-width: 320px;
    margin: 0;
    color: var(--ink-muted);
}

@media (max-width: 920px) {
    .site-header,
    .page-main {
        width: min(100% - 28px, 720px);
    }

    .email-designer-grid {
        grid-template-columns: 1fr;
    }

    .email-preview-stage {
        min-height: 680px;
        padding: 16px;
    }

    .email-preview-toolbar {
        grid-template-columns: 1fr;
    }

    .email-test-button {
        width: 100%;
    }

    .email-blueprint-frame {
        padding: 18px;
    }

    .home-dashboard-hero,
    .home-overview-grid {
        grid-template-columns: 1fr;
    }

    .home-dashboard-hero {
        align-items: start;
    }

    .home-quick-actions {
        justify-content: flex-start;
    }

    .home-chart-head {
        display: grid;
    }

    .home-chart-stats {
        min-width: 0;
    }

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

    .hero-grid,
    .brand-story-section,
    .delivery-confidence-section,
    .stripe-intro,
    .features-hero,
    .legal-hero,
    .legal-shell,
    .feature-focus,
    .feature-split-dark,
    .bundle-section,
    .delivery-section,
    .operations-section,
    .onboarding-shell,
    .onboarding-shell-wide,
    .onboarding-checkout-grid,
    .pricing-hero,
    .auth-shell,
    .dashboard-hero,
    .products-hero,
    .product-map,
    .ops-section,
    .pricing-content-section,
    .pricing-content-section-flip,
    .pricing-story,
    .demo-slab-inner,
    .demo-cta-inner,
    .catalog-section,
    .growth-section,
    .license-section,
    .marketing-detail-hero,
    .marketing-guide,
    .marketing-detail-sections,
    .marketing-compare-links,
    .calm-proof-grid,
    .feature-depth-grid,
    .feature-ops-strip,
    .onboarding-intro-panel,
    .onboarding-intro-shell,
    .onboarding-intro-path,
    .onboarding-intro-path ol,
    .landing-footer {
        grid-template-columns: 1fr;
    }

    .demo-slab:nth-child(even) .demo-slab-inner {
        grid-template-columns: 1fr;
    }

    .demo-slab:nth-child(even) .demo-slab-copy,
    .demo-slab:nth-child(even) .demo-button-stage {
        grid-column: auto;
        grid-row: auto;
    }

    .onboarding-intro-shell {
        padding-top: 42px;
    }

    .onboarding-intro-panel,
    .onboarding-intro-path {
        padding: 22px;
    }

    .onboarding-intro-art {
        min-height: 0;
    }

    .onboarding-intro-art img {
        width: min(100%, 310px);
    }

    .onboarding-intro-path li {
        padding: 14px;
    }

    .onboarding-defaults-modal-backdrop {
        align-items: start;
        padding: 16px;
    }

    .onboarding-defaults-modal {
        padding: 22px;
    }

    .onboarding-defaults-form {
        grid-template-columns: 1fr;
    }

    .onboarding-defaults-form .button {
        justify-self: stretch;
    }

    .marketing-guide-toc {
        position: relative;
        top: auto;
    }

    .marketing-flow-strip {
        clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
        padding: 34px 22px 38px;
    }

    .marketing-flow-strip article + article {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        border-left: 0;
    }

    .marketing-guide-chapter,
    .marketing-guide-chapter-alt {
        grid-template-columns: 1fr;
    }

    .marketing-guide-chapter-alt .marketing-guide-chapter-copy,
    .marketing-guide-chapter-alt .marketing-chapter-notes {
        grid-column: auto;
        grid-row: auto;
    }

    .marketing-guide-checklist > div,
    .marketing-guide-faq > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legal-hero {
        padding-top: 58px;
    }

    .legal-hero p {
        font-size: 19px;
    }

    .legal-meta-card,
    .legal-document,
    .legal-toc {
        border-radius: 8px;
    }

    .legal-toc {
        position: relative;
        top: auto;
    }

    .legal-document {
        padding: 30px 24px 34px;
    }

    .hero-title {
        font-size: 46px;
    }

    .brand-story-section,
    .delivery-confidence-section,
    .feature-depth-section,
    .calm-proof-section {
        padding: 48px 0;
    }

    .brand-story-copy h2,
    .calm-proof-section h2,
    .delivery-confidence-section h2,
    .feature-depth-head h2 {
        font-size: 34px;
    }

    .brand-story-art,
    .delivery-confidence-art,
    .features-hero-art {
        min-height: 0;
    }

    .brand-story-art img,
    .delivery-confidence-art img,
    .features-hero-art img {
        width: min(100%, 440px);
    }

    .feature-depth-grid article,
    .feature-ops-strip article,
    .calm-proof-grid article {
        min-height: 0;
    }

    .resource-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .resource-hero h1 {
        font-size: 40px;
    }

    .resource-detail-grid,
    .resource-status-grid,
    .resource-definition-list-grid {
        grid-template-columns: 1fr;
    }

    .resource-page:not(.resource-detail-page) .resource-summary {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .resource-page:not(.resource-detail-page) .resource-stat {
        min-height: 0;
        gap: 4px;
        padding: 10px 8px;
    }

    .resource-page:not(.resource-detail-page) .resource-stat span {
        font-size: clamp(7px, 2.35vw, 9.5px);
        letter-spacing: 0.035em;
    }

    .resource-page:not(.resource-detail-page) .resource-stat strong {
        overflow-wrap: anywhere;
        font-size: clamp(17px, 6vw, 21px);
    }

    .resource-table-head {
        display: none;
    }

    .resource-row,
    .resource-row-products,
    .resource-row-customers,
    .resource-row-orders,
    .resource-row-discounts {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .resource-page:not(.resource-detail-page) .resource-panel {
        gap: 8px;
        padding: 8px;
        border-radius: 8px;
    }

    .resource-page:not(.resource-detail-page) .resource-row,
    .resource-page:not(.resource-detail-page) .resource-row-products,
    .resource-page:not(.resource-detail-page) .resource-row-customers,
    .resource-page:not(.resource-detail-page) .resource-row-orders,
    .resource-page:not(.resource-detail-page) .resource-row-discounts {
        min-height: 0;
        gap: 8px;
        border: 1px solid rgba(1, 9, 75, 0.08);
        border-radius: 8px !important;
        padding: 10px;
        background:
            radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.08), transparent 28%),
            rgba(255, 255, 255, 0.88);
        box-shadow: 0 12px 30px rgba(1, 9, 75, 0.055);
    }

    .resource-page:not(.resource-detail-page) .resource-row-products {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
    }

    .resource-page:not(.resource-detail-page) .resource-row-customers,
    .resource-page:not(.resource-detail-page) .resource-row-orders,
    .resource-page:not(.resource-detail-page) .resource-row-discounts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resource-page:not(.resource-detail-page) .resource-main {
        grid-column: 1 / -1;
    }

    .resource-page:not(.resource-detail-page) .resource-row-products .resource-main {
        grid-column: 1;
    }

    .resource-page:not(.resource-detail-page) .resource-main {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        align-items: start;
    }

    .resource-page:not(.resource-detail-page) .resource-avatar {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        font-size: 15px;
    }

    .resource-page:not(.resource-detail-page) .resource-copy h2 {
        font-size: 16px;
        line-height: 1.05;
    }

    .resource-page:not(.resource-detail-page) .resource-copy p {
        margin-top: 3px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
        line-height: 1.28;
    }

    .resource-page:not(.resource-detail-page) .resource-badges {
        gap: 5px;
        margin-top: 6px;
    }

    .resource-page:not(.resource-detail-page) .resource-indicator,
    .resource-page:not(.resource-detail-page) .resource-status-pill,
    .resource-page:not(.resource-detail-page) .resource-badges .product-status {
        min-height: 21px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .resource-page:not(.resource-detail-page) .resource-cell {
        display: inline-flex;
        min-height: 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(1, 9, 75, 0.065);
        border-radius: 8px;
        padding: 5px 7px;
        text-align: left;
        background: rgba(255, 255, 255, 0.68);
    }

    .resource-page:not(.resource-detail-page) .resource-cell strong {
        min-width: 0;
        font-size: 12.5px;
        line-height: 1.05;
    }

    .resource-page:not(.resource-detail-page) .resource-cell span {
        max-width: none;
        font-size: 8.5px;
        line-height: 1.05;
        text-align: left;
    }

    .resource-page:not(.resource-detail-page) .resource-row-products > .resource-cell:nth-of-type(2) {
        display: inline-flex;
        justify-self: start;
        justify-content: center;
        text-align: center;
    }

    .resource-page:not(.resource-detail-page) .resource-row-products > .resource-cell:nth-of-type(2) span {
        max-width: none;
        text-align: center;
    }

    .resource-page:not(.resource-detail-page) .resource-cell-empty {
        display: none;
    }

    .resource-page:not(.resource-detail-page) .resource-cell .resource-status-pill,
    .resource-page:not(.resource-detail-page) .resource-cell .product-status {
        margin-left: 0;
    }

    .resource-page:not(.resource-detail-page) .resource-cell-with-arrow {
        padding-right: 0;
    }

    .resource-page:not(.resource-detail-page) .resource-arrow {
        display: none;
    }

    a.resource-row:hover {
        transform: none;
    }

    .resource-page:not(.resource-detail-page) .resource-action-cell {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-top: 0;
        padding-top: 0;
    }

    .resource-page:not(.resource-detail-page) .resource-row-products .resource-action-cell {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        gap: 6px;
    }

    .resource-action-cell .product-row-icon-action {
        flex: 0 0 auto;
    }

    .resource-page:not(.resource-detail-page) .product-row-icon-action {
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .resource-page:not(.resource-detail-page) .product-row-icon-action svg {
        width: 16px;
        height: 16px;
    }

    .discount-form-shell {
        max-width: none;
    }

    .discount-form-card {
        padding: 22px;
    }

    .discount-code-layout,
    .discount-type-grid,
    .discount-options-grid {
        grid-template-columns: 1fr;
    }

    .discount-options-grid > .field,
    .discount-product-limit-field,
    .discount-email-limit-field {
        grid-column: auto !important;
    }

    .resource-action-cell .button {
        width: 100%;
    }

    .product-analytics-hero,
    .analytics-date-filter,
    .analytics-stat-grid,
    .analytics-story-grid,
    .account-analytics-grid,
    .account-analytics-signal-grid {
        grid-template-columns: 1fr;
    }

    .analytics-date-filter {
        min-width: 0;
    }

    .product-analytics-hero h1 {
        font-size: 32px;
    }

    .product-performance-chart {
        height: 250px;
    }

    .account-sales-chart {
        height: 260px;
    }

    .account-compact-chart,
    .account-horizontal-chart {
        height: 230px;
    }

    .analytics-card-head {
        display: grid;
    }

    .secure-record-hero,
    .secure-detail-grid,
    .order-record-sheet,
    .order-sheet-two-up,
    .order-brief-header,
    .order-support-grid,
    .secure-data-list-grid,
    .secure-fulfillment-grid {
        grid-template-columns: 1fr;
    }

    .order-record-rail {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    }

    .order-record-rail dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .order-detail-metrics {
        grid-template-columns: 1fr;
    }

    .order-brief-total {
        justify-items: start;
    }

    .order-product-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .order-product-summary > strong {
        grid-column: 2;
    }

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

    .order-charge-strip {
        grid-template-columns: 1fr;
    }

    .order-info-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .order-panel-heading {
        display: grid;
    }

    .order-panel-heading p {
        max-width: none;
        text-align: left;
    }

    .order-line-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .order-line-item > strong {
        grid-column: 2;
    }

    .secure-detail-card-full {
        grid-column: auto;
    }

    .secure-data-list-grid div:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    }

    .secure-data-list-grid div:last-child {
        border-bottom: 0;
    }

    .product-preview {
        min-height: auto;
    }

    .checkout-preview-grid {
        grid-template-columns: 1fr;
    }

    .checkout-showcase {
        display: grid;
        min-height: auto;
        gap: 14px;
        padding: 18px;
    }

    .checkout-showcase::before,
    .checkout-showcase::after {
        opacity: 0.72;
    }

    .showcase-site-card,
    .checkout-window,
    .checkout-float-chip,
    .hero-cursor {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
        animation: none;
    }

    .hero-cursor {
        display: none;
    }

    .showcase-site-card {
        min-height: auto;
    }

    .checkout-showcase.is-active .checkout-window {
        transform: none;
    }

    .checkout-demo-modal {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 14px;
    }

    .checkout-preview .workflow-list {
        grid-template-columns: 1fr;
    }

    .checkout-placeholder {
        transform: none;
    }

    .embed-delivery-strip {
        grid-template-columns: 1fr;
    }

    .payments-connect-card {
        grid-template-columns: 1fr;
    }

    .feature-band,
    .flow-board,
    .proof-strip,
    .benefit-strip,
    .trust-row,
    .metric-row {
        grid-template-columns: 1fr;
    }

    .proof-strip div {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    }

    .proof-strip div:last-child {
        border-bottom: 0;
    }

    .section-heading h2,
    .stripe-intro-copy h2,
    .features-hero h1,
    .onboarding-copy h1,
    .feature-focus h2,
    .feature-split-copy h2,
    .bundle-section h2,
    .delivery-section h2,
    .operations-section h2,
    .feature-cta-band h2,
    .pricing-hero h1,
    .pricing-open-hero h1,
    .product-map-head h2,
    .ops-copy h2,
    .launch-band h2,
    .pricing-content-section h2,
    .pricing-story h2,
    .catalog-copy h2,
    .growth-copy h2,
    .license-copy h2,
    .landing-cta h2 {
        font-size: 34px;
    }

    .stripe-intro {
        gap: 30px;
        padding: 68px 0 58px;
    }

    .features-hero {
        gap: 30px;
        padding: 58px 0;
    }

    .features-hero-stack {
        display: grid;
        min-height: auto;
        gap: 14px;
    }

    .flow-card {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

    .benefit-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.09);
        padding: 20px 0;
    }

    .benefit-strip article:last-child {
        border-bottom: 0;
    }

    .feature-focus,
    .bundle-section,
    .delivery-section,
    .operations-section {
        gap: 34px;
        padding: 58px 0;
    }

    .feature-split-dark {
        gap: 36px;
        padding-top: 72px;
        padding-bottom: 74px;
    }

    .feature-cta-band {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .onboarding-shell,
    .onboarding-shell-wide {
        gap: 28px;
        padding: 44px 0 58px;
    }

    .onboarding-copy h1 {
        font-size: 38px;
    }

    .checkout-preview-card {
        min-height: 480px;
    }

    .pricing-hero {
        gap: 30px;
        padding: 50px 0 58px;
    }

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

    .pricing-plans,
    .pricing-faq {
        grid-template-columns: 1fr;
    }

    .pricing-story {
        gap: 30px;
        padding: 58px 0;
    }

    .pricing-open-hero {
        padding: 52px 0 16px;
    }

    .pricing-card-stage {
        align-items: stretch;
        flex-direction: column;
        margin-top: 34px;
        min-height: auto;
        padding: 26px 0 56px;
    }

    .tilt-plan,
    .tilt-plan-free,
    .tilt-plan-creator {
        width: 100%;
        min-height: auto;
        transform: none;
    }

    .pricing-content-section,
    .pricing-content-section-flip {
        gap: 32px;
        padding: 58px 0;
    }

    .product-map {
        gap: 34px;
        padding: 54px 0;
    }

    .ops-section {
        gap: 36px;
        padding-top: 72px;
        padding-bottom: 74px;
    }

    .ops-console {
        grid-template-columns: 1fr;
    }

    .ops-panel-freebie {
        transform: none;
    }

    .launch-band {
        align-items: flex-start;
        flex-direction: column;
        padding: 58px 0;
    }

    .flow-section {
        padding: 58px 0 48px;
    }

    .flow-board::before {
        top: 24px;
        bottom: 24px;
        left: 26px;
        right: auto;
        width: 3px;
        height: auto;
        transform: none;
    }

    .flow-step,
    .flow-step:nth-child(2),
    .flow-step:nth-child(3) {
        min-height: auto;
        transform: none;
    }

    .catalog-copy {
        position: relative;
        top: auto;
    }

    .growth-section {
        gap: 26px;
        padding: 58px 0;
    }

    .license-section {
        gap: 36px;
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .key-row:nth-child(3),
    .key-row:nth-child(4) {
        transform: none;
    }

    .landing-cta {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .panel-wide,
    .panel-side {
        grid-column: 1 / -1;
    }

    .api-vault-hero,
    .api-hub-header,
    .api-keys-grid,
    .api-reference-toolbar-row,
    .api-reference-grid {
        grid-template-columns: 1fr;
    }

    .api-hub-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .api-vault-status {
        max-width: none;
    }

    .api-key-card-head {
        grid-template-columns: 1fr;
    }

    .api-key-scope-list {
        justify-content: flex-start;
        max-width: none;
    }

    .api-reference-toolbar-copy {
        border-bottom: 0;
    }

    .billing-command-hero,
    .billing-plan-grid,
    .billing-plan-paid-top,
    .billing-checkout-layout {
        grid-template-columns: 1fr;
    }

    .billing-price-lockup {
        justify-self: start;
    }

    .billing-payment-actions,
    .billing-payment-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-payment-head {
        padding-right: 52px;
    }
}

@media (max-width: 640px) {
    .api-input-row {
        grid-template-columns: 1fr;
    }

    .api-input-row span {
        justify-self: start;
    }

    .brand-story-section,
    .delivery-confidence-section,
    .feature-depth-section,
    .calm-proof-section {
        padding: 34px 0;
    }

    .brand-story-copy h2,
    .calm-proof-section h2,
    .delivery-confidence-section h2,
    .feature-depth-head h2,
    .feature-focus h2,
    .bundle-section h2,
    .delivery-section h2,
    .operations-section h2,
    .feature-cta-band h2 {
        font-size: clamp(29px, 9vw, 34px);
    }

    .brand-story-copy p,
    .calm-proof-section p,
    .delivery-confidence-section p,
    .feature-depth-head p,
    .feature-focus p,
    .bundle-section p,
    .delivery-section p,
    .operations-section p,
    .feature-cta-band p {
        font-size: 15px;
    }

    .brand-story-points div,
    .delivery-confidence-list span,
    .calm-proof-grid article,
    .feature-depth-grid article,
    .feature-ops-strip article {
        padding: 15px;
    }

    .brand-story-art img,
    .delivery-confidence-art img,
    .features-hero-art img {
        width: min(100%, 340px);
    }

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

    .features-hero-actions .button {
        justify-content: center;
    }

    .benefit-strip {
        grid-template-columns: 1fr;
        margin-bottom: 42px;
    }

    .benefit-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.09);
        padding: 18px 0;
    }

    .benefit-strip article:last-child {
        border-bottom: 0;
    }

    .site-header {
        align-items: center;
        padding-top: 18px;
    }

    .nav-toggle {
        position: relative;
        display: inline-flex;
        z-index: 7;
        margin-left: auto;
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        grid-auto-rows: min-content;
        align-content: start;
        justify-content: stretch;
        justify-items: center;
        gap: 8px;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        padding: 24px;
        background:
            linear-gradient(rgba(1, 9, 75, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(1, 9, 75, 0.035) 1px, transparent 1px),
            radial-gradient(circle at 8% 8%, rgba(253, 97, 76, 0.11), transparent 32%),
            radial-gradient(circle at 92% 84%, rgba(141, 224, 180, 0.16), transparent 36%),
            #ffffff;
        background-size: 54px 54px, 54px 54px, auto, auto, auto;
        box-shadow: none;
        transform: translateX(100%);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    }

    .site-header.is-nav-open .site-nav {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .site-nav form {
        display: flex;
        width: min(100%, 280px);
        justify-content: center;
    }

    body.is-nav-open {
        overflow: hidden;
    }

    .nav-drawer-head {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        margin-bottom: 42px;
    }

    .nav-drawer-logo {
        display: block;
        width: auto;
        height: 36px;
        object-fit: contain;
    }

    .nav-drawer-close {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border: 1px solid rgba(1, 9, 75, 0.1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 14px 34px rgba(1, 9, 75, 0.08);
        cursor: pointer;
    }

    .nav-drawer-close span {
        position: absolute;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: var(--navy);
    }

    .nav-drawer-close span:first-child {
        transform: rotate(45deg);
    }

    .nav-drawer-close span:last-child {
        transform: rotate(-45deg);
    }

    .home-dashboard {
        gap: 14px;
    }

    .home-dashboard-hero h1 {
        font-size: 34px;
    }

    .home-dashboard-hero p {
        font-size: 15px;
    }

    .home-quick-actions,
    .home-quick-actions .button {
        width: 100%;
    }

    .home-revenue-card,
    .home-activity-card,
    .home-health-card,
    .home-product-strip {
        padding: 12px;
    }

    .home-chart-stats {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-chart-stats div {
        padding: 9px 8px;
    }

    .home-chart-stats span {
        font-size: clamp(7px, 2.35vw, 10px);
        letter-spacing: 0.035em;
    }

    .home-chart-stats strong {
        font-size: clamp(16px, 5.4vw, 20px);
    }

    .home-mini-metrics {
        grid-template-columns: 1fr;
    }

    .home-start-grid,
    .home-start-card-wide,
    .home-next-grid,
    .home-snapshot-grid,
    .home-ops-grid,
    .home-command-card {
        grid-template-columns: 1fr;
    }

    .home-ops-grid {
        grid-template-areas:
            "command"
            "readiness"
            "activity"
            "metrics";
    }

    .home-ops-panel.is-launch-ready .home-ops-grid {
        grid-template-areas:
            "activity"
            "metrics";
    }

    .home-ops-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-sales-chart {
        height: 190px;
    }

    .home-chart-note {
        text-align: left;
    }

    .home-activity-row,
    .home-product-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .home-activity-row em,
    .home-product-card em {
        grid-column: 2;
        justify-self: start;
    }

    .home-activity-row img,
    .home-product-card img,
    .home-row-avatar {
        width: 38px;
        height: 38px;
    }

    .brand {
        font-size: 16px;
    }

    .brand-logo {
        height: 32px;
    }

    .nav-link,
    .nav-button {
        width: min(100%, 280px);
        justify-content: center;
        min-height: 48px;
        border-color: transparent;
        padding: 10px 16px;
        color: var(--navy);
        background: transparent;
        box-shadow: none;
        font-size: 18px;
        font-weight: 900;
    }

    .nav-link:hover,
    .nav-button:hover {
        border-color: transparent;
        color: var(--coral-strong);
        background: transparent;
    }

    .nav-account-menu {
        display: grid;
        width: min(100%, 280px);
        justify-items: center;
        padding: 0;
        margin: 0;
    }

    .nav-account-trigger {
        display: none;
    }

    .nav-account-dropdown {
        position: static;
        display: grid;
        width: 100%;
        min-width: 0;
        justify-items: center;
        visibility: visible;
        gap: 8px;
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transform: none;
    }

    .nav-account-dropdown::before {
        display: none;
    }

    .nav-account-dropdown a {
        width: min(100%, 280px);
        min-height: 48px;
        justify-content: center;
        padding: 10px 16px;
        color: var(--navy);
        background: transparent;
        font-size: 18px;
        font-weight: 900;
    }

    .nav-account-dropdown a:hover {
        color: var(--coral-strong);
        background: transparent;
    }

    .header-cta,
    .button {
        min-height: 38px;
        padding: 8px 11px;
        font-size: 13px;
    }

    .site-nav .header-cta {
        width: 100%;
        justify-content: center;
        min-height: 58px;
        margin-top: 8px;
        padding: 14px 16px;
        font-size: 20px;
        box-shadow: 0 14px 34px rgba(253, 97, 76, 0.22);
    }

    .account-page {
        width: 100%;
    }

    .account-card {
        gap: 16px;
        padding: 20px;
    }

    .account-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-card-head h2 {
        font-size: 27px;
    }

    .account-section {
        padding: 16px;
    }

    .account-section h3 {
        font-size: 20px;
    }

    .account-section-head {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .account-section-icon {
        width: 38px;
        height: 38px;
    }

    .account-form-grid,
    .export-column-grid,
    .export-dataset-grid {
        grid-template-columns: 1fr;
    }

    .api-token-reveal,
    .api-key-create-form,
    .api-key-create-form-wide,
    .api-token-copy-row,
    .api-rate-grid {
        grid-template-columns: 1fr;
    }

    .api-vault-hero,
    .api-hub-header,
    .api-token-reveal,
    .api-key-card {
        padding: 18px;
    }

    .api-hub-title h1 {
        font-size: 36px;
    }

    .api-hub-summary,
    .api-hub-security,
    .api-key-title-block,
    .api-key-usage-note {
        grid-template-columns: 1fr;
    }

    .api-hub-reference .button {
        width: 100%;
        justify-content: center;
    }

    .api-vault-copy h1 {
        font-size: 38px;
    }

    .api-vault-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .api-vault-actions .button {
        width: 100%;
        justify-content: center;
    }

    .api-vault-metrics {
        grid-template-columns: 1fr;
    }

    .api-key-create-form-wide .button {
        width: 100%;
    }

    .api-key-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .api-key-fingerprint {
        width: fit-content;
        height: auto;
        padding: 8px 10px;
    }

    .api-key-row form,
    .api-key-row .button,
    .api-token-copy-row .button {
        width: 100%;
        justify-content: center;
    }

    .api-language-toolbar {
        border-radius: 8px;
    }

    .api-reference-intro,
    .api-object-intro,
    .api-endpoint-copy {
        padding: 22px 0;
    }

    .api-reference-code-note,
    .api-code-section-marker,
    .api-endpoint-code {
        border-radius: 8px;
        padding: 18px;
    }

    .account-actions,
    .export-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .account-actions .button,
    .export-actions .button {
        width: 100%;
        justify-content: center;
    }

    .billing-command-copy,
    .billing-plan-panel {
        padding: 18px;
    }

    .billing-command-copy h1 {
        font-size: 34px;
    }

    .billing-plan-head h2,
    .billing-plan-paid-top h2,
    .billing-payment-head h2 {
        font-size: 26px;
    }

    .billing-plan-rows div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .billing-price-lockup {
        width: 100%;
    }

    .billing-price-lockup span {
        font-size: 48px;
    }

    .billing-card-mini-grid {
        grid-template-columns: 1fr;
    }

    .billing-order-summary > strong {
        font-size: 30px;
    }

    .billing-modal-backdrop {
        align-items: end;
        padding: 10px;
    }

    .billing-modal-card {
        width: 100%;
        max-height: calc(100vh - 20px);
        padding: 22px;
    }

    .billing-modal-close {
        top: 12px;
        right: 12px;
    }

    .billing-confirm-panel {
        padding-right: 0;
    }

    .billing-confirm-actions,
    .billing-downgrade-confirm-form {
        width: 100%;
    }

    .billing-confirm-actions .button,
    .billing-downgrade-confirm-form .button {
        width: 100%;
        justify-content: center;
    }

    .billing-payment-head {
        padding-right: 42px;
    }

    .billing-payment-actions .button,
    .billing-hero-cta {
        width: 100%;
        justify-content: center;
    }

    .export-dataset-card {
        min-height: 0;
    }

    .record-identity {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .record-avatar {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }

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

    .secure-record-hero,
    .secure-detail-card {
        padding: 14px;
    }

    .secure-record-main {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
    }

    .secure-record-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .secure-record-main h1 {
        font-size: 28px;
    }

    .secure-record-meta {
        grid-template-columns: 1fr;
    }

    .secure-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .secure-ledger-end {
        text-align: left;
    }

    .secure-product-strip {
        grid-template-columns: 1fr;
    }

    .page-main {
        padding-top: 22px;
    }

    .hero-grid {
        gap: 28px;
        padding-top: 12px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-copy {
        font-size: 16px;
    }

    .proof-strip {
        margin-top: 20px;
    }

    .proof-strip div {
        min-height: auto;
        padding: 15px 0;
    }

    .section-heading {
        text-align: left;
    }

    .section-heading h2,
    .stripe-intro-copy h2,
    .features-hero h1,
    .feature-focus h2,
    .feature-split-copy h2,
    .bundle-section h2,
    .delivery-section h2,
    .operations-section h2,
    .feature-cta-band h2,
    .pricing-hero h1,
    .pricing-open-hero h1,
    .product-map-head h2,
    .ops-copy h2,
    .launch-band h2,
    .pricing-content-section h2,
    .pricing-story h2,
    .catalog-copy h2,
    .growth-copy h2,
    .license-copy h2,
    .landing-cta h2 {
        font-size: 30px;
    }

    .stripe-intro {
        margin-top: 12px;
        padding: 48px 0 44px;
    }

    .stripe-intro::before {
        inset: 18px calc(50% - 50vw);
    }

    .pricing-hero {
        padding: 34px 0 44px;
    }

    .pricing-hero::before {
        inset: 14px calc(50% - 50vw) 30px;
    }

    .pricing-hero-copy > p {
        font-size: 16px;
    }

    .pricing-open-hero {
        padding: 34px 0 10px;
        text-align: left;
    }

    .pricing-open-hero .section-kicker {
        justify-content: flex-start;
    }

    .pricing-open-hero p,
    .pricing-content-section p {
        font-size: 16px;
    }

    .features-hero {
        padding: 34px 0 42px;
    }

    .features-hero-copy > p,
    .feature-focus p,
    .bundle-section p,
    .delivery-section p,
    .operations-section p,
    .feature-split-copy p,
    .feature-cta-band p {
        font-size: 16px;
    }

    .benefit-strip {
        margin: 18px 0 42px;
    }

    .benefit-strip article {
        padding: 16px 0;
    }

    .onboarding-shell,
    .onboarding-shell-wide {
        padding: 28px 0 44px;
    }

    .wizard-shell {
        padding: 28px 0 44px;
    }

    .onboarding-copy h1 {
        font-size: 32px;
    }

    .wizard-top h1 {
        font-size: 34px;
    }

    .onboarding-copy p {
        font-size: 16px;
    }

    .wizard-top p {
        font-size: 16px;
    }

    .wizard-timeline {
        margin-bottom: 18px;
    }

    .wizard-timeline ol {
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    }

    .wizard-timeline-step {
        min-width: 0;
        font-size: 11px;
    }

    .wizard-step-marker {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .wizard-timeline li + li::before {
        top: 15px;
    }

    .onboarding-card {
        padding: 18px;
    }

    .product-type-options,
    .bundle-product-option {
        grid-template-columns: 1fr;
    }

    .bundle-product-badges {
        justify-content: flex-start;
    }

    .checkout-builder-stage {
        display: grid;
        gap: 18px;
        min-height: auto;
        padding: 0;
        backdrop-filter: none;
    }

    .checkout-button-design-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
    }

    .checkout-settings-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.12);
        padding: 18px;
    }

    .checkout-preview-column {
        padding: 18px;
    }

    .checkout-settings-card .onboarding-field-row,
    .checkout-settings-card .onboarding-final-actions {
        grid-template-columns: 1fr;
    }

    .checkout-preview-browser {
        width: 100%;
        margin: 0;
        min-height: 420px;
    }

    .checkout-theme-strip-head {
        display: grid;
        gap: 4px;
    }

    .checkout-theme-strip-head strong {
        text-align: left;
    }

    .checkout-theme-picker {
        grid-auto-columns: minmax(210px, 68vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-right: -18px;
        padding-right: 18px;
    }

    .checkout-theme-panel {
        min-height: auto;
    }

    .checkout-theme-stage {
        min-height: 420px;
        padding: 18px;
    }

    .checkout-theme-modal {
        padding: 18px;
    }

    .checkout-theme-modal[data-theme="gallery"] .checkout-theme-product img,
    .checkout-theme-modal[data-theme="gallery"] .checkout-theme-product-art {
        height: 188px;
        min-height: 188px;
    }

    .checkout-theme-picker {
        grid-auto-columns: minmax(210px, 64vw);
    }

    .checkout-theme-actions {
        justify-content: stretch;
    }

    .checkout-theme-actions .button {
        width: 100%;
    }

    .checkout-preview-browser::before {
        content: "";
        position: absolute;
        top: 26px;
        left: 26px;
        z-index: 2;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: #ff7868;
        box-shadow: 22px 0 #ffd96a, 44px 0 #8de0b4;
    }

    .checkout-browser-native-dot,
    .checkout-browser-native-address,
    .checkout-browser-native-url {
        display: none;
    }

    .checkout-preview-site {
        width: calc(100% - 42px);
        max-width: none;
        margin: 104px auto 24px;
        gap: 18px;
    }

    .checkout-placeholder-hero {
        grid-template-columns: 1fr;
    }

    .checkout-click-note {
        position: relative;
        top: auto;
        left: auto;
        width: max-content;
        max-width: 100%;
        height: auto;
        margin: 10px auto 0;
        text-align: center;
        filter: none;
        transform: none;
    }

    .checkout-click-note svg {
        display: none;
    }

    .checkout-click-note span {
        position: static;
        display: block;
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12px;
    }

    .placeholder-media {
        height: 74px;
    }

    .checkout-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .checkout-placeholder-grid span {
        height: 42px;
    }

    .product-quick-layout {
        grid-template-columns: 1fr;
    }

    .product-details-panel {
        padding: 14px;
    }

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

    .compact-price-field {
        max-width: none;
    }

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

    .product-image-field {
        max-width: 260px;
        justify-self: center;
        width: 100%;
    }

    .onboarding-field-row,
    .onboarding-final-actions,
    .embed-final-form,
    .compact-upload-grid {
        grid-template-columns: 1fr;
    }

    .embed-step-card-locked {
        padding: 18px;
    }

    .payments-connect-main {
        padding: 16px;
    }

    .payments-connect-main h2 {
        font-size: 24px;
    }

    .image-dropzone {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .checkout-preview-card {
        min-height: 430px;
    }

    .onboarding-modal-preview {
        position: fixed;
        z-index: 30;
        padding: 14px;
        overflow: auto;
    }

    .feature-focus,
    .bundle-section,
    .delivery-section,
    .operations-section {
        padding: 46px 0;
    }

    .delivery-grid {
        grid-template-columns: 1fr;
    }

    .delivery-grid article {
        min-height: auto;
    }

    .feature-split-dark {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .feature-cta-band {
        padding-top: 54px;
        padding-bottom: 58px;
    }

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

    .operations-row em {
        grid-column: 2;
    }

    .pricing-card-stage {
        gap: 14px;
        margin-top: 24px;
        padding: 20px 0 42px;
    }

    .tilt-plan {
        padding: 22px;
    }

    .tilt-price {
        font-size: 46px;
    }

    .pricing-content-section,
    .pricing-content-section-flip {
        padding: 46px 0;
    }

    .pricing-capability-list article {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
    }

    .pricing-capability-list strong {
        font-size: 18px;
    }

    .pricing-visual {
        display: grid;
        min-height: auto;
        gap: 14px;
    }

    .pricing-checkout-card,
    .pricing-margin-card,
    .pricing-visual-note {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

    .pricing-margin-card strong {
        font-size: 24px;
    }

    .pricing-product-line {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .pricing-product-art {
        width: 48px;
        height: 48px;
    }

    .pricing-product-line b {
        grid-column: 2;
    }

    .pricing-plan {
        padding: 22px;
    }

    .pricing-price {
        font-size: 46px;
    }

    .pricing-story {
        padding: 46px 0;
    }

    .pricing-faq {
        padding: 48px 0 14px;
    }

    .stripe-surface {
        display: grid;
        min-height: auto;
        gap: 14px;
    }

    .surface-browser,
    .surface-checkout,
    .surface-events {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

    .surface-product {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .surface-art {
        width: 58px;
        height: 58px;
    }

    .surface-button {
        grid-column: 1 / -1;
    }

    .commerce-rail {
        grid-template-columns: 1fr;
    }

    .commerce-rail div {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.09);
        padding: 18px 0;
    }

    .commerce-rail div:last-child {
        border-bottom: 0;
    }

    .product-loop-art {
        min-height: 0;
    }

    .product-loop-art img {
        width: min(720px, 100%);
        max-width: 100%;
        transform: none;
    }

    .product-map {
        padding: 44px 0;
    }

    .product-lanes article {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0;
    }

    .product-lanes strong {
        font-size: 18px;
    }

    .ops-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .ops-key {
        align-items: flex-start;
        flex-direction: column;
    }

    .launch-band {
        padding: 46px 0;
    }

    .demo-page {
        padding-top: 40px;
    }

    .demo-slab-inner {
        gap: 24px;
        grid-template-columns: 1fr;
        padding: 26px;
    }

    .demo-slab:nth-child(even) .demo-slab-inner {
        grid-template-columns: 1fr;
    }

    .demo-slab:nth-child(even) .demo-slab-copy,
    .demo-slab:nth-child(even) .demo-button-stage {
        grid-column: auto;
        grid-row: auto;
    }

    .demo-slab::after {
        inset: auto -24% -34% 22%;
        height: 60%;
        transform: skewX(-16deg);
    }

    .demo-button-stage {
        min-height: 112px;
        justify-items: center;
    }

    .demo-cta-inner {
        gap: 24px;
        padding: 30px 26px;
    }

    .demo-cta::before {
        inset: auto -22% -30% 24%;
        height: 70%;
    }

    .demo-cta .button {
        justify-self: start;
        white-space: normal;
    }

    .landing-footer {
        gap: 34px;
        padding-top: 40px;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom nav {
        justify-content: flex-start;
    }

    .marketing-detail-hero {
        min-height: auto;
        padding-top: 58px;
    }

    .marketing-detail-hero::before {
        inset: 12px -16px 18px;
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    }

    .marketing-detail-hero::after,
    .marketing-geometry {
        display: none;
    }

    .marketing-detail-art,
    .marketing-detail-visual {
        order: -1;
    }

    .marketing-detail-art {
        min-height: auto;
        padding: 0 0 6px;
    }

    .marketing-detail-art img {
        width: min(88vw, 420px);
        max-height: 340px;
    }

    .marketing-detail-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .marketing-flow-strip {
        margin-bottom: 48px;
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    }

    .marketing-flow-strip article {
        padding: 24px 16px;
    }

    .marketing-compare-links {
        gap: 18px;
        padding-bottom: 44px;
    }

    .marketing-compare-links > div:first-child {
        position: relative;
        top: auto;
    }

    .marketing-compare-links h2 {
        font-size: 34px;
    }

    .marketing-compare-link-grid a {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .marketing-compare-link-grid span {
        grid-row: auto;
    }

    .marketing-flow-strip span {
        font-size: 38px;
    }

    .marketing-guide {
        gap: 18px;
        padding-bottom: 44px;
    }

    .marketing-guide::before {
        display: none;
    }

    .marketing-guide-positioning,
    .marketing-guide-checklist {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        padding: 28px 20px;
    }

    .marketing-guide-toc {
        padding: 16px;
    }

    .marketing-guide-chapter {
        gap: 18px;
        padding: 24px;
    }

    .marketing-guide-chapter::before,
    .marketing-guide-chapter-alt::before {
        inset: 0;
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    }

    .marketing-chapter-number {
        right: 18px;
        font-size: 88px;
    }

    .marketing-chapter-notes,
    .marketing-guide-chapter-alt .marketing-chapter-notes {
        transform: none;
    }

    .marketing-guide-checklist > div,
    .marketing-guide-faq > div {
        grid-template-columns: 1fr;
    }

    .marketing-guide-positioning-grid {
        grid-template-columns: 1fr;
    }

    .metric-strip {
        grid-template-columns: 1fr;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-card-accent {
        grid-column: auto;
    }

    .growth-visual {
        display: grid;
        min-height: auto;
        gap: 14px;
    }

    .download-card,
    .growth-feed,
    .growth-score {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
        animation: none;
    }

    .growth-feed div {
        grid-template-columns: 12px minmax(0, 1fr);
    }

    .growth-feed em {
        grid-column: 2;
    }

    .license-console {
        padding: 14px;
    }

    .key-row,
    .license-receipt {
        align-items: flex-start;
        flex-direction: column;
    }

    .license-receipt strong {
        max-width: none;
        text-align: left;
    }

    .checkout-preview-shell {
        padding: 14px;
    }

    .merchant-card h2 {
        font-size: 24px;
    }

    .embed-code-card pre {
        font-size: 11px;
    }

    .workflow-item,
    .timeline-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

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

    .product-row-main {
        align-items: start;
    }

    .product-license-metric,
    .product-license-metric:empty {
        min-width: 0;
        justify-items: start;
        text-align: left;
    }

    .product-row-action {
        width: 100%;
    }

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

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

    .record-date {
        text-align: left;
    }

    .resource-page {
        gap: 18px;
    }

    .resource-panel {
        border-radius: 8px;
    }

    .resource-row {
        padding: 15px;
    }

    .resource-main {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .resource-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .resource-page:not(.resource-detail-page) .resource-panel {
        padding: 7px;
    }

    .resource-page:not(.resource-detail-page) .resource-row {
        padding: 11px;
    }

    .resource-page:not(.resource-detail-page) .resource-main {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .resource-page:not(.resource-detail-page) .resource-avatar {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .resource-cell-with-arrow {
        padding-right: 0;
    }

    .resource-arrow {
        display: none;
    }

    .status-chip,
    .timeline-time {
        grid-column: 2;
        justify-self: start;
    }

    .auth-panel,
    .auth-aside,
    .dashboard-panel {
        padding: 20px;
    }

    .auth-panel h1,
    .dashboard-hero h1 {
        font-size: 32px;
    }

    .legal-hero {
        gap: 22px;
        padding: 44px 0 30px;
    }

    .legal-hero h1 {
        font-size: 48px;
    }

    .legal-hero p {
        margin-top: 18px;
        font-size: 17px;
    }

    .legal-meta-card {
        padding: 18px;
    }

    .legal-shell {
        gap: 18px;
        padding-bottom: 54px;
    }

    .legal-toc {
        padding: 14px;
    }

    .legal-document {
        padding: 24px 18px 28px;
    }

    .legal-section {
        padding: 24px 0;
    }

    .legal-section h2 {
        font-size: 26px;
    }

    .legal-section p,
    .legal-section ul {
        font-size: 15px;
        line-height: 1.68;
    }

    .form-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.94;
        width: 529px;
        height: 470px;
    }

    .growth-lab {
        --growth-scene-scale: 0.94;
        width: 470px;
        height: 367px;
    }
}

@media (max-width: 560px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.84;
        width: 473px;
        height: 420px;
    }

    .growth-lab {
        --growth-scene-scale: 0.84;
        width: 420px;
        height: 328px;
    }
}

@media (max-width: 500px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.74;
        width: 417px;
        height: 370px;
    }

    .growth-lab {
        --growth-scene-scale: 0.74;
        width: 370px;
        height: 289px;
    }
}

@media (max-width: 440px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.64;
        width: 360px;
        height: 320px;
    }

    .growth-lab {
        --growth-scene-scale: 0.64;
        width: 320px;
        height: 250px;
    }
}

@media (max-width: 400px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.6;
        width: 338px;
        height: 300px;
    }
}

@media (max-width: 380px) {
    .checkout-benefit-visual {
        --checkout-scene-scale: 0.56;
        width: 315px;
        height: 280px;
    }

    .growth-lab {
        --growth-scene-scale: 0.56;
        width: 280px;
        height: 218px;
    }
}

.resource-list-page:not(.resource-detail-page) {
    width: min(100%, 1180px);
    gap: 14px;
}

.resource-list-page:not(.resource-detail-page) .resource-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    align-items: end;
    gap: 18px;
    padding-top: 0;
    text-align: left;
}

.resource-list-page:not(.resource-detail-page) .resource-hero .eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
}

.resource-list-page:not(.resource-detail-page) .resource-hero h1 {
    max-width: none;
    margin-top: 0;
    font-size: 34px;
    line-height: 1.02;
}

.resource-list-page:not(.resource-detail-page) .resource-hero p {
    max-width: 760px;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.42;
}

.resource-list-page:not(.resource-detail-page) .resource-hero .button {
    justify-self: end;
}

.resource-list-page:not(.resource-detail-page) .resource-summary {
    width: 100%;
    margin: 0;
    overflow: hidden;
    gap: 0;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 26px rgba(1, 9, 75, 0.055);
}

.resource-list-page:not(.resource-detail-page) .resource-stat {
    min-height: 0;
    border: 0;
    border-right: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 0;
    padding: 12px 16px;
    background: transparent;
    box-shadow: none;
}

.resource-list-page:not(.resource-detail-page) .resource-stat:last-child {
    border-right: 0;
}

.resource-list-page:not(.resource-detail-page) .resource-stat span {
    color: #69738d;
    font-size: 10px;
}

.resource-list-page:not(.resource-detail-page) .resource-stat strong {
    font-size: 22px;
    line-height: 1;
}

.resource-list-page:not(.resource-detail-page) .resource-panel {
    overflow: hidden;
    padding: 0;
    border-color: rgba(1, 9, 75, 0.12);
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(1, 9, 75, 0.08);
}

.resource-list-page:not(.resource-detail-page) .resource-table-head {
    display: grid;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    background: #f8faff;
}

.resource-list-page:not(.resource-detail-page) .resource-table-head-products,
.resource-list-page:not(.resource-detail-page) .resource-row-products {
    grid-template-columns: 34px minmax(300px, 1fr) 116px 124px 88px;
}

.resource-list-page:not(.resource-detail-page) .resource-table-head-customers,
.resource-list-page:not(.resource-detail-page) .resource-row-customers {
    grid-template-columns: minmax(300px, 1fr) 84px 120px 142px;
}

.resource-list-page:not(.resource-detail-page) .resource-table-head-orders,
.resource-list-page:not(.resource-detail-page) .resource-row-orders {
    grid-template-columns: minmax(320px, 1fr) 112px 96px 132px;
}

.resource-list-page:not(.resource-detail-page) .resource-table-head-discounts,
.resource-list-page:not(.resource-detail-page) .resource-row-discounts {
    grid-template-columns: 34px minmax(300px, 1fr) 108px 124px 52px;
}

.resource-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.09);
    background:
        linear-gradient(90deg, rgba(255, 240, 237, 0.92), rgba(248, 250, 255, 0.96)),
        #ffffff;
}

.resource-bulk-toolbar[hidden] {
    display: none;
}

.resource-bulk-toolbar strong {
    color: #01094b;
    font-size: 13px;
    font-weight: 900;
}

.resource-bulk-delete-button {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(190, 42, 37, 0.18);
    border-radius: 8px;
    color: #be2a25;
    background: rgba(255, 240, 237, 0.86);
    box-shadow: 0 8px 18px rgba(190, 42, 37, 0.08);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.resource-bulk-delete-button:hover,
.resource-bulk-delete-button:focus-visible {
    background: #fff0ed;
    box-shadow: 0 12px 26px rgba(190, 42, 37, 0.13);
    transform: translateY(-1px);
}

.resource-bulk-delete-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.resource-row-selector {
    display: grid;
    align-items: center;
    justify-items: start;
}

.resource-row-selector label {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    cursor: pointer;
}

.resource-row-selector input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--coral);
    cursor: pointer;
}

.resource-row.is-selected {
    background: #fffafa !important;
    box-shadow: inset 2px 0 0 var(--coral) !important;
}

.resource-bulk-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 9, 75, 0.38);
    backdrop-filter: blur(18px);
}

.resource-bulk-modal-backdrop[hidden] {
    display: none;
}

body.is-resource-bulk-modal-open {
    overflow: hidden;
}

.resource-bulk-modal-card {
    position: relative;
    width: min(100%, 460px);
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 8px;
    padding: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(253, 97, 76, 0.11), transparent 36%),
        #ffffff;
    box-shadow: 0 34px 90px rgba(1, 9, 75, 0.24);
}

.resource-bulk-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    cursor: pointer;
}

.resource-bulk-modal-close span {
    position: absolute;
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: #01094b;
}

.resource-bulk-modal-close span:first-child {
    transform: rotate(45deg);
}

.resource-bulk-modal-close span:last-child {
    transform: rotate(-45deg);
}

.resource-bulk-modal-card h2 {
    max-width: 340px;
    margin: 12px 0 0;
    color: #01094b;
    font-size: 30px;
    line-height: 1.05;
}

.resource-bulk-modal-card p {
    margin: 12px 0 0;
    color: #657089;
    font-size: 15px;
    font-weight: 680;
    line-height: 1.48;
}

.resource-bulk-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.resource-bulk-confirm-button {
    border-color: rgba(190, 42, 37, 0.22);
    color: #ffffff;
    background: linear-gradient(180deg, #fd614c, #be2a25);
    box-shadow: 0 16px 34px rgba(190, 42, 37, 0.2);
}

.resource-list-page:not(.resource-detail-page) .resource-row {
    min-height: 66px;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid rgba(1, 9, 75, 0.075);
    border-radius: 0;
    padding: 10px 14px;
    background: #ffffff;
    box-shadow: none;
}

.resource-list-page:not(.resource-detail-page) .resource-row:first-of-type,
.resource-list-page:not(.resource-detail-page) .resource-row:last-of-type,
.resource-list-page:not(.resource-detail-page) .resource-row:only-of-type {
    border-radius: 0;
}

.resource-list-page:not(.resource-detail-page) .resource-row:last-child {
    border-bottom: 0;
}

.resource-list-page:not(.resource-detail-page) a.resource-row:hover,
.resource-list-page:not(.resource-detail-page) .resource-row:hover {
    background: #fbfcff;
    box-shadow: inset 2px 0 0 rgba(253, 97, 76, 0.46);
}

.resource-list-page:not(.resource-detail-page) .resource-main {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
}

.resource-list-page:not(.resource-detail-page) .resource-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    box-shadow: 0 7px 16px rgba(1, 9, 75, 0.075);
    font-size: 14px;
}

.resource-list-page:not(.resource-detail-page) .resource-copy h2 {
    font-size: 15px;
    line-height: 1.08;
}

.resource-list-page:not(.resource-detail-page) .resource-copy p {
    display: block;
    max-width: 720px;
    margin-top: 2px;
    overflow: hidden;
    color: #626c86;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-list-page:not(.resource-detail-page) .resource-badges,
.resource-list-page:not(.resource-detail-page) .resource-tags {
    gap: 5px;
    margin-top: 6px;
}

.resource-list-page:not(.resource-detail-page) .resource-indicator,
.resource-list-page:not(.resource-detail-page) .resource-status-pill,
.resource-list-page:not(.resource-detail-page) .resource-badges .product-status,
.resource-list-page:not(.resource-detail-page) .resource-tag-pill {
    min-height: 20px;
    gap: 5px;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.1;
}

.resource-list-page:not(.resource-detail-page) .resource-cell {
    display: grid;
    min-height: 0;
    border: 0;
    padding: 0;
    text-align: left;
    background: transparent;
}

.resource-list-page:not(.resource-detail-page) .resource-row-products > .resource-cell,
.resource-list-page:not(.resource-detail-page) .resource-row-discounts > .resource-cell {
    justify-items: start;
    text-align: left;
}

.resource-list-page:not(.resource-detail-page) .resource-row-products > .resource-cell-delivery {
    justify-items: center;
    text-align: center;
}

.resource-list-page:not(.resource-detail-page) .resource-cell strong {
    font-size: 12.5px;
    line-height: 1.15;
}

.resource-list-page:not(.resource-detail-page) .resource-cell span {
    color: #69738d;
    font-size: 9px;
    line-height: 1.1;
}

.resource-list-page:not(.resource-detail-page) .resource-cell-with-arrow {
    padding-right: 18px;
}

.resource-list-page:not(.resource-detail-page) .resource-arrow {
    color: rgba(1, 9, 75, 0.32);
    font-size: 15px;
}

.resource-list-page:not(.resource-detail-page) .resource-action-cell {
    gap: 6px;
}

.resource-list-page:not(.resource-detail-page) .product-row-icon-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-color: rgba(1, 9, 75, 0.1);
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(1, 9, 75, 0.05);
}

.resource-list-page:not(.resource-detail-page) .product-row-icon-action svg {
    width: 16px;
    height: 16px;
}

.resource-list-page:not(.resource-detail-page) .products-empty {
    min-height: 220px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 920px) {
    .resource-list-page:not(.resource-detail-page) {
        width: min(100%, 980px);
    }

    .resource-list-page:not(.resource-detail-page) .resource-table-head {
        display: none;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 8px 10px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-customers,
    .resource-list-page:not(.resource-detail-page) .resource-row-orders {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-main {
        grid-column: 1 / -1;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products .resource-main,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts .resource-main {
        grid-column: 2;
        grid-row: 1;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-selector {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .resource-list-page:not(.resource-detail-page) .resource-cell {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        width: fit-content;
        max-width: 100%;
        border: 1px solid rgba(1, 9, 75, 0.07);
        border-radius: 8px;
        padding: 5px 7px;
        background: rgba(248, 250, 255, 0.72);
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products > .resource-cell,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts > .resource-cell {
        grid-column: 2 / -1;
    }

    .resource-list-page:not(.resource-detail-page) .resource-cell-empty {
        display: none;
    }

    .resource-list-page:not(.resource-detail-page) .resource-action-cell {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products .resource-action-cell,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts .resource-action-cell {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }
}

@media (max-width: 640px) {
    .resource-list-page:not(.resource-detail-page) {
        gap: 10px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-hero .eyebrow,
    .resource-list-page:not(.resource-detail-page) .resource-hero p {
        display: none;
    }

    .resource-list-page:not(.resource-detail-page) .resource-hero h1 {
        font-size: 26px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-hero .button {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .resource-list-page:not(.resource-detail-page) .resource-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resource-list-page:not(.resource-detail-page) .resource-stat {
        padding: 8px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-stat span {
        font-size: clamp(7px, 2vw, 9px);
        letter-spacing: 0.03em;
    }

    .resource-list-page:not(.resource-detail-page) .resource-stat strong {
        font-size: clamp(17px, 5.4vw, 20px);
    }

    .resource-list-page:not(.resource-detail-page) .resource-panel {
        border-radius: 8px;
        box-shadow: 0 10px 28px rgba(1, 9, 75, 0.065);
    }

    .resource-list-page:not(.resource-detail-page) .resource-row,
    .resource-list-page:not(.resource-detail-page) .resource-row-products,
    .resource-list-page:not(.resource-detail-page) .resource-row-customers,
    .resource-list-page:not(.resource-detail-page) .resource-row-orders,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts {
        min-height: 0;
        border: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.075);
        border-radius: 0 !important;
        padding: 9px 10px;
        background: #ffffff;
        box-shadow: none;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row:last-child {
        border-bottom: 0;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-customers,
    .resource-list-page:not(.resource-detail-page) .resource-row-orders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-list-page:not(.resource-detail-page) .resource-main {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-avatar {
        width: 34px;
        height: 34px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-copy h2 {
        font-size: 14.5px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-copy p {
        font-size: 11.5px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-badges,
    .resource-list-page:not(.resource-detail-page) .resource-tags {
        gap: 4px;
        margin-top: 5px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-cell {
        padding: 4px 6px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-cell strong {
        font-size: 12px;
    }

    .resource-list-page:not(.resource-detail-page) .resource-action-cell {
        grid-column: auto;
        justify-content: flex-end;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products .resource-action-cell,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts .resource-action-cell {
        grid-column: 3;
    }

    .resource-list-page:not(.resource-detail-page) .product-row-icon-action {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
}

@media (max-width: 420px) {
    .resource-list-page:not(.resource-detail-page) .resource-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .resource-list-page:not(.resource-detail-page) .resource-hero .button {
        justify-self: start;
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .resource-list-page:not(.resource-detail-page) .resource-row-products .resource-action-cell,
    .resource-list-page:not(.resource-detail-page) .resource-row-discounts .resource-action-cell {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
    }
}

.billing-page.account-page {
    width: min(100%, 1180px);
}

.billing-page .billing-command-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 14px;
}

.billing-page .billing-command-copy,
.billing-page .billing-value-card,
.billing-page .billing-plan-panel,
.billing-page .billing-trust-strip {
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.075);
}

.billing-page .billing-command-copy {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 30px;
    background:
        linear-gradient(rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 6% 8%, rgba(253, 97, 76, 0.13), transparent 31%),
        radial-gradient(circle at 92% 8%, rgba(141, 224, 180, 0.2), transparent 35%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.9));
    background-size: 46px 46px, 46px 46px, auto, auto, auto;
}

.billing-page .billing-command-copy::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: 22px;
    width: 420px;
    height: 58px;
    border: 1px solid rgba(1, 9, 75, 0.06);
    border-radius: 999px;
    background: rgba(1, 9, 75, 0.035);
    transform: rotate(14deg);
}

.billing-page .billing-command-copy > * {
    position: relative;
    z-index: 1;
}

.billing-page .billing-command-copy h1 {
    max-width: 820px;
    font-size: clamp(44px, 5vw, 66px);
    line-height: 0.96;
}

.billing-page .billing-command-copy p {
    max-width: 780px;
    color: #59657e;
    font-size: 17px;
    line-height: 1.5;
}

.billing-page .billing-command-actions {
    margin-top: 2px;
}

.billing-page .billing-hero-cta {
    min-height: 54px;
    min-width: 218px;
    font-size: 16px;
    box-shadow: 0 18px 38px rgba(253, 97, 76, 0.28);
}

.billing-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
}

.billing-hero-points span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 900;
}

.billing-hero-points span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-right: 7px;
    background: #21a667;
    box-shadow: 0 0 0 4px rgba(33, 166, 103, 0.12);
}

.billing-value-card {
    position: relative;
    display: grid;
    gap: 14px;
    overflow: hidden;
    padding: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.18), transparent 35%),
        linear-gradient(145deg, #ffffff, #f8fbff);
}

.billing-value-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.billing-value-top,
.billing-value-price,
.billing-value-metrics {
    position: relative;
    z-index: 1;
}

.billing-value-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.billing-value-top > span,
.billing-value-primary > span,
.billing-value-metrics span {
    color: #69738d;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-value-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--navy);
}

.billing-value-price strong {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 0.95;
}

.billing-value-price em {
    color: var(--ink-muted);
    font-style: normal;
    font-size: 13px;
    font-weight: 900;
}

.billing-value-primary {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(1, 9, 75, 0.06);
}

.billing-value-primary strong {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 76px;
    line-height: 0.9;
}

.billing-value-primary p {
    margin: 0;
    color: #59657e;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.4;
}

.billing-value-metrics {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.billing-value-metrics div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
    padding: 10px 12px;
}

.billing-value-metrics div:last-child {
    border-bottom: 0;
}

.billing-value-metrics strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
    text-align: right;
}

.billing-math-note {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(253, 97, 76, 0.16);
    border-radius: 8px;
    padding: 11px 12px;
    color: var(--navy);
    background: rgba(255, 247, 244, 0.86);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.billing-page .billing-shell {
    gap: 14px;
}

.billing-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: #ffffff;
}

.billing-trust-strip div {
    border-right: 1px solid rgba(1, 9, 75, 0.08);
    padding: 14px 16px;
}

.billing-trust-strip div:last-child {
    border-right: 0;
}

.billing-trust-strip span {
    display: block;
    color: var(--coral-strong);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-trust-strip strong {
    display: block;
    margin-top: 6px;
    color: var(--navy);
    font-size: 13px;
    line-height: 1.35;
}

.billing-page .billing-plan-grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 14px;
}

.billing-page .billing-plan-panel {
    padding: 22px;
    background: #ffffff;
}

.billing-page .billing-plan-current {
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.12), transparent 32%),
        #ffffff;
}

.billing-page .billing-plan-paid {
    position: relative;
    overflow: hidden;
    border-color: rgba(253, 97, 76, 0.18);
    background:
        radial-gradient(circle at 0 0, rgba(253, 97, 76, 0.08), transparent 36%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.14), transparent 34%),
        #ffffff;
}

.billing-page .billing-plan-paid::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.billing-page .billing-plan-paid > * {
    position: relative;
    z-index: 1;
}

.billing-page .billing-plan-head h2,
.billing-page .billing-plan-paid-top h2 {
    font-size: 34px;
    line-height: 1.02;
}

.billing-page .billing-plan-head p {
    font-size: 14px;
}

.billing-page .billing-price-lockup {
    min-width: 148px;
    padding: 14px 16px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 230, 109, 0.18), transparent 34%),
        #ffffff;
}

.billing-fee-shift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.billing-fee-shift > div {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.billing-fee-shift > div:last-child {
    border-color: rgba(33, 166, 103, 0.18);
    background: rgba(240, 253, 244, 0.78);
}

.billing-fee-shift > span {
    color: var(--coral);
    font-size: 20px;
    font-weight: 950;
}

.billing-fee-shift div span,
.billing-fee-shift div em {
    color: #69738d;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-fee-shift div strong {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 34px;
    line-height: 0.95;
}

.billing-page .billing-benefit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.billing-page .billing-benefit-list li {
    align-content: start;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 118px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.billing-page .billing-benefit-list span {
    width: 24px;
    height: 24px;
}

.billing-paid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 14px;
    background: rgba(248, 251, 255, 0.72);
}

.billing-paid-actions p {
    max-width: 360px;
    margin: 0;
    color: #59657e;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 980px) {
    .billing-page .billing-command-hero,
    .billing-page .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .billing-value-card {
        grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
        align-items: start;
    }

    .billing-value-top,
    .billing-value-primary {
        grid-column: 1;
    }

    .billing-value-metrics,
    .billing-math-note {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    .billing-page .billing-command-copy {
        padding: 22px;
    }

    .billing-page .billing-command-copy h1 {
        font-size: 40px;
    }

    .billing-page .billing-command-copy p {
        font-size: 15px;
    }

    .billing-value-card,
    .billing-trust-strip,
    .billing-page .billing-benefit-list {
        grid-template-columns: 1fr;
    }

    .billing-value-top,
    .billing-value-primary,
    .billing-value-metrics,
    .billing-math-note {
        grid-column: auto;
    }

    .billing-trust-strip div {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    }

    .billing-trust-strip div:last-child {
        border-bottom: 0;
    }

    .billing-page .billing-plan-paid-top,
    .billing-fee-shift {
        grid-template-columns: 1fr;
    }

    .billing-fee-shift > span {
        transform: rotate(90deg);
        justify-self: start;
    }

    .billing-page .billing-price-lockup,
    .billing-paid-actions .billing-hero-cta {
        width: 100%;
    }

    .billing-paid-actions .billing-hero-cta {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .billing-page .billing-command-copy,
    .billing-value-card,
    .billing-page .billing-plan-panel {
        padding: 16px;
    }

    .billing-page .billing-command-copy h1 {
        font-size: 34px;
    }

    .billing-page .billing-command-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-page .billing-hero-cta {
        width: 100%;
    }

    .billing-hero-points {
        display: grid;
    }

    .billing-value-primary strong {
        font-size: 62px;
    }
}

.billing-page.account-page {
    width: min(100%, 1120px);
}

.billing-page .billing-command-hero {
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 0;
    align-items: stretch;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    margin-bottom: 18px;
    background:
        linear-gradient(rgba(1, 9, 75, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 9, 75, 0.028) 1px, transparent 1px),
        radial-gradient(circle at 7% 7%, rgba(253, 97, 76, 0.13), transparent 29%),
        radial-gradient(circle at 95% 4%, rgba(141, 224, 180, 0.18), transparent 32%),
        #ffffff;
    background-size: 48px 48px, 48px 48px, auto, auto, auto;
    box-shadow: 0 22px 58px rgba(1, 9, 75, 0.075);
}

.billing-page .billing-command-copy,
.billing-page .billing-value-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.billing-page .billing-command-copy {
    display: grid;
    min-height: 390px;
    align-content: center;
    gap: 16px;
    padding: 48px;
}

.billing-page .billing-command-copy::after,
.billing-page .billing-value-card::before {
    display: none;
}

.billing-page .billing-command-copy h1 {
    max-width: 720px;
    font-size: clamp(50px, 6vw, 76px);
    line-height: 0.93;
}

.billing-page .billing-command-copy p {
    max-width: 720px;
    color: #59657e;
    font-size: 17px;
    line-height: 1.52;
}

.billing-page .billing-command-actions {
    align-items: center;
    margin-top: 4px;
}

.billing-page .billing-hero-cta {
    min-width: 250px;
    min-height: 60px;
    font-size: 17px;
    box-shadow: 0 18px 40px rgba(253, 97, 76, 0.3);
}

.billing-page .billing-command-actions > span {
    max-width: 320px;
    color: #59657e;
}

.billing-hero-support {
    max-width: 650px !important;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    padding-top: 14px;
    font-size: 13px !important;
    font-weight: 760;
}

.billing-value-card {
    align-content: center;
    gap: 12px;
    margin: 28px 28px 28px 0;
    border-left: 1px solid rgba(1, 9, 75, 0.08) !important;
    padding: 26px 0 26px 28px;
}

.billing-value-top {
    display: grid;
    gap: 8px;
}

.billing-value-price strong {
    font-size: 34px;
}

.billing-value-metrics {
    border-color: rgba(1, 9, 75, 0.09);
    background: rgba(255, 255, 255, 0.78);
}

.billing-value-metrics div {
    padding: 10px 0;
    background: transparent;
}

.billing-value-metrics div:first-child strong {
    color: #1b6944;
}

.billing-math-note {
    border-color: rgba(1, 9, 75, 0.08);
    color: #59657e;
    background: rgba(255, 255, 255, 0.64);
    font-weight: 760;
}

.billing-page .billing-shell {
    gap: 12px;
}

.billing-page .billing-plan-grid {
    grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
    gap: 12px;
}

.billing-page .billing-plan-panel {
    border-color: rgba(1, 9, 75, 0.09);
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 36px rgba(1, 9, 75, 0.055);
}

.billing-page .billing-plan-paid {
    border-color: rgba(1, 9, 75, 0.1);
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.1), transparent 32%),
        #ffffff;
}

.billing-page .billing-plan-paid::before {
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.billing-page .billing-plan-head h2,
.billing-page .billing-plan-paid-top h2 {
    font-size: 30px;
}

.billing-page .billing-plan-paid-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.billing-page .billing-price-lockup {
    min-width: 126px;
    padding: 12px 14px;
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.055);
}

.billing-page .billing-price-lockup span {
    font-size: 38px;
}

.billing-page .billing-benefit-list {
    grid-template-columns: 1fr;
    gap: 8px;
}

.billing-page .billing-benefit-list li {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.billing-page .billing-benefit-list span {
    width: 21px;
    height: 21px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .billing-page .billing-command-hero,
    .billing-page .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .billing-value-card {
        margin: 0 28px 28px;
        border-top: 1px solid rgba(1, 9, 75, 0.08) !important;
        border-left: 0 !important;
        padding: 22px 0 0;
    }
}

@media (max-width: 640px) {
    .billing-page .billing-command-copy {
        min-height: 0;
        padding: 28px 20px;
    }

    .billing-page .billing-command-copy h1 {
        font-size: 42px;
    }

    .billing-page .billing-command-copy p {
        font-size: 15px;
    }

    .billing-page .billing-command-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-page .billing-hero-cta {
        width: 100%;
    }

    .billing-value-card {
        margin: 0 20px 22px;
    }

    .billing-page .billing-plan-paid-top {
        grid-template-columns: 1fr;
    }

    .billing-page .billing-price-lockup {
        justify-self: start;
        width: auto;
    }
}

@media (max-width: 420px) {
    .billing-page .billing-command-copy h1 {
        font-size: 36px;
    }

    .billing-hero-support {
        display: none;
    }
}

/* Account billing: focused upgrade decision layout */
.billing-page.account-page {
    width: min(100%, 1180px);
}

.billing-page .billing-upgrade-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    gap: clamp(34px, 5vw, 70px);
    padding: clamp(22px, 4vw, 44px) 0;
}

.billing-page .billing-upgrade-copy {
    display: grid;
    align-content: center;
    gap: 14px;
    min-width: 0;
}

.billing-page .billing-upgrade-copy h1 {
    max-width: 670px;
    margin: 0;
    color: #01094b;
    font-size: clamp(46px, 5.3vw, 66px);
    line-height: 0.96;
    letter-spacing: 0;
}

.billing-page .billing-upgrade-copy > p {
    max-width: 680px;
    margin: 0;
    color: #5d6880;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.5;
}

.billing-page .billing-upgrade-benefits {
    display: grid;
    gap: 15px;
    max-width: 720px;
    margin-top: 8px;
}

.billing-page .billing-upgrade-benefits article {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-left: 34px;
}

.billing-page .billing-upgrade-benefits article::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 3px, transparent 4px),
        linear-gradient(135deg, #8de0b4, #22b573);
    box-shadow:
        0 0 0 6px rgba(141, 224, 180, 0.18),
        0 8px 18px rgba(34, 181, 115, 0.2);
}

.billing-page .billing-upgrade-benefits strong {
    color: #01094b;
    font-size: 17px;
    font-weight: 860;
    line-height: 1.25;
}

.billing-page .billing-upgrade-benefits span {
    color: #657089;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.48;
}

.billing-page .billing-pricing-table {
    position: relative;
    display: grid;
    gap: 13px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: 26px 30px 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(141, 224, 180, 0.18), transparent 34%),
        radial-gradient(circle at 0 0, rgba(253, 97, 76, 0.09), transparent 30%),
        #ffffff;
    box-shadow:
        0 32px 78px rgba(1, 9, 75, 0.13),
        0 4px 0 rgba(255, 255, 255, 0.78) inset;
}

.billing-page .billing-pricing-table::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.billing-page .billing-pricing-head {
    position: relative;
    display: block;
    min-height: 98px;
    padding-top: 8px;
}

.billing-page .billing-pricing-head > div:first-child {
    min-width: 0;
    padding-top: 0;
}

.billing-page .billing-pricing-head h2 {
    margin-top: 22px;
    color: #01094b;
    font-size: 27px;
    line-height: 1;
    white-space: nowrap;
}

.billing-page .billing-pricing-price {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    white-space: nowrap;
    color: #01094b;
}

.billing-page .billing-pricing-price strong {
    font-size: 46px;
    font-weight: 900;
    line-height: 0.9;
}

.billing-page .billing-pricing-price span {
    color: #657089;
    font-size: 17px;
    font-weight: 850;
}

.billing-page .billing-pricing-fee {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(24, 163, 99, 0.18);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(141, 224, 180, 0.24), rgba(255, 255, 255, 0.88) 58%),
        #f8fffB;
}

.billing-page .billing-pricing-fee span {
    color: #657089;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.billing-page .billing-pricing-fee strong {
    color: #01094b;
    font-size: 74px;
    font-weight: 900;
    line-height: 0.88;
}

.billing-page .billing-pricing-fee p {
    max-width: 280px;
    color: #53617c;
    font-size: 14px;
    font-weight: 740;
    line-height: 1.38;
}

.billing-page .billing-pricing-rows {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.billing-page .billing-pricing-rows div {
    display: grid;
    grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr);
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.07);
}

.billing-page .billing-pricing-rows div:last-child {
    border-bottom: 0;
}

.billing-page .billing-pricing-rows dt {
    color: #66718a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.billing-page .billing-pricing-rows dd {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: #01094b;
    text-align: right;
}

.billing-page .billing-pricing-rows dd strong {
    color: #01094b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.18;
}

.billing-page .billing-pricing-rows dd span {
    color: #69758e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.34;
}

.billing-page .billing-savings-message {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.09);
    border-radius: 8px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.82)),
        #ffffff;
}

.billing-page .billing-savings-message::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--coral), var(--lemon), #8de0b4);
}

.billing-page .billing-savings-message.is-saving {
    border-color: rgba(24, 163, 99, 0.18);
    background:
        linear-gradient(135deg, rgba(141, 224, 180, 0.2), rgba(255, 255, 255, 0.9) 62%),
        #ffffff;
}

.billing-page .billing-savings-message strong {
    display: block;
    color: #01094b;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.14;
}

.billing-page .billing-savings-message p {
    margin: 7px 0 0;
    color: #62708a;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.42;
}

.billing-page .billing-table-cta {
    width: 100%;
    min-height: 58px;
    border-radius: 8px;
    font-size: 17px;
    box-shadow: 0 18px 36px rgba(253, 97, 76, 0.28);
}

.billing-page .billing-table-note {
    margin: -4px 4px 0;
    color: #657089;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.42;
    text-align: center;
}

.billing-page .billing-pricing-table .billing-downgrade-form .button {
    width: 100%;
    min-height: 54px;
}

.billing-page .billing-pricing-table .billing-renewal-note {
    margin: 0;
}

.billing-page .billing-shell {
    margin-top: 0;
}

@media (max-width: 980px) {
    .billing-page .billing-upgrade-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 20px;
    }

    .billing-page .billing-pricing-table {
        width: min(100%, 520px);
    }
}

@media (max-width: 640px) {
    .billing-page .billing-upgrade-layout {
        padding: 14px 0 28px;
    }

    .billing-page .billing-upgrade-copy h1 {
        font-size: 40px;
    }

    .billing-page .billing-upgrade-copy > p {
        font-size: 15px;
    }

    .billing-page .billing-upgrade-benefits {
        gap: 13px;
    }

    .billing-page .billing-pricing-table {
        padding: 20px;
    }

    .billing-page .billing-pricing-head {
        display: grid;
        min-height: 0;
    }

    .billing-page .billing-pricing-head h2 {
        margin-top: 10px;
        white-space: normal;
    }

    .billing-page .billing-pricing-price {
        position: static;
        justify-content: flex-start;
    }

    .billing-page .billing-pricing-rows div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .billing-page .billing-pricing-rows dd {
        text-align: left;
    }
}

/* Authenticated product polish pass. Keep public marketing/docs pages on their own visual system. */
.is-authenticated-app {
    --app-surface: rgba(255, 255, 255, 0.94);
    --app-surface-soft: rgba(248, 251, 255, 0.84);
    --app-surface-muted: #f8faff;
    --app-border: rgba(1, 9, 75, 0.105);
    --app-border-soft: rgba(1, 9, 75, 0.072);
    --app-shadow-panel: 0 18px 48px rgba(1, 9, 75, 0.075), 0 2px 8px rgba(1, 9, 75, 0.035);
    --app-shadow-card: 0 10px 28px rgba(1, 9, 75, 0.055);
    --app-focus-ring: 0 0 0 4px rgba(253, 97, 76, 0.14);
    background:
        linear-gradient(180deg, #ffffff 0%, #f7faff 52%, #fff8f6 100%);
    color: #01094b;
    text-rendering: geometricPrecision;
}

.is-authenticated-app::before {
    background-size: 46px 46px;
    opacity: 0.74;
}

.is-authenticated-app *,
.is-authenticated-app *::before,
.is-authenticated-app *::after {
    letter-spacing: 0;
}

.is-authenticated-app .shape-ribbon {
    opacity: 0.72;
}

.is-authenticated-app .shape-slab,
.is-authenticated-app .shape-card {
    opacity: 0.68;
}

.is-authenticated-app .site-header {
    width: min(1180px, calc(100% - 40px));
    padding: 22px 0 18px;
}

.is-authenticated-app .brand-logo {
    height: 34px;
}

.is-authenticated-app .site-nav {
    gap: 6px;
    color: #11195d;
    font-size: 13px;
    font-weight: 820;
}

.is-authenticated-app .nav-link,
.is-authenticated-app .nav-button {
    min-height: 38px;
    border-radius: 8px;
    padding: 8px 12px;
    color: #0b1457;
}

.is-authenticated-app .nav-link:hover,
.is-authenticated-app .nav-link:focus-visible,
.is-authenticated-app .nav-button:hover,
.is-authenticated-app .nav-button:focus-visible {
    background: rgba(1, 9, 75, 0.055);
    outline: 0;
}

.is-authenticated-app .nav-account-dropdown {
    min-width: 220px;
    border-color: var(--app-border);
    padding: 7px;
    background:
        radial-gradient(circle at 16% 0%, rgba(253, 97, 76, 0.07), transparent 34%),
        rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 54px rgba(1, 9, 75, 0.13), 0 2px 8px rgba(1, 9, 75, 0.04);
}

.is-authenticated-app .nav-account-dropdown a {
    min-height: 36px;
    padding: 8px 10px;
    color: #071056;
    font-size: 12.5px;
    font-weight: 850;
}

.is-authenticated-app .nav-account-dropdown a:hover,
.is-authenticated-app .nav-account-dropdown a:focus-visible {
    background: #f6f8ff;
    outline: 0;
}

.is-authenticated-app .page-main {
    width: min(1180px, calc(100% - 40px));
    padding: 54px 0 78px;
}

.is-authenticated-app .page-main:has(.admin-portal) {
    width: 100%;
    padding-top: 20px;
}

.is-authenticated-app :is(.home-dashboard, .product-analytics-page, .resource-list-page:not(.resource-detail-page), .account-page) {
    width: min(100%, 1180px);
}

.is-authenticated-app :is(.home-dashboard, .product-analytics-page, .resource-page, .account-shell) {
    gap: 16px;
}

.is-authenticated-app :is(.eyebrow, .home-section-kicker) {
    color: #eb4b38;
    font-weight: 920;
    letter-spacing: 0;
}

.is-authenticated-app .eyebrow {
    gap: 9px;
    margin-bottom: 12px;
    font-size: 12px;
}

.is-authenticated-app .eyebrow::before {
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, var(--coral), #ff7d67);
}

.is-authenticated-app :is(.home-dashboard-hero h1, .resource-hero h1, .product-analytics-hero h1, .account-hero h1, .dashboard-hero h1) {
    color: #01094b;
    font-size: 40px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.02;
    text-wrap: balance;
}

.is-authenticated-app :is(.home-dashboard-hero p, .resource-hero p, .product-analytics-hero p, .account-hero p, .dashboard-hero p) {
    color: #606b86;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.5;
}

.is-authenticated-app .home-dashboard-hero {
    padding-top: 2px;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-hero {
    align-items: center;
    gap: 20px;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-hero h1 {
    margin-top: 0;
    font-size: 36px;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-hero p {
    margin-top: 6px;
}

.is-authenticated-app :is(
    .home-revenue-card,
    .home-ops-panel,
    .home-command-card,
    .home-readiness-rail,
    .home-ops-activity,
    .home-care-grid,
    .analytics-stat-grid article,
    .analytics-chart-card,
    .analytics-signal-card,
    .resource-panel,
    .resource-summary,
    .resource-detail-card,
    .account-card,
    .account-section,
    .billing-pricing-table,
    .billing-upgrade-copy,
    .api-card,
    .api-vault-hero,
    .export-card
) {
    border-color: var(--app-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 252, 255, 0.9));
    box-shadow: var(--app-shadow-panel);
}

.is-authenticated-app :is(.home-revenue-card, .analytics-chart-card, .product-analytics-hero, .resource-panel, .account-card) {
    backdrop-filter: blur(18px);
}

.is-authenticated-app :is(.product-analytics-hero, .home-revenue-card, .home-ops-panel, .analytics-chart-card, .account-card) {
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.075), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(141, 224, 180, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.88));
}

.is-authenticated-app :is(.home-revenue-card, .analytics-chart-card, .product-analytics-hero, .home-ops-panel) {
    padding: 18px;
}

.is-authenticated-app :is(.home-chart-head h2, .analytics-card-head h2, .analytics-signal-card h2, .home-card-head h3, .account-section h3, .resource-detail-card-header h2) {
    color: #01094b;
    font-weight: 850;
    letter-spacing: 0;
}

.is-authenticated-app :is(.home-chart-head h2, .analytics-card-head h2, .analytics-signal-card h2) {
    font-size: 22px;
    line-height: 1.08;
}

.is-authenticated-app :is(.home-card-head a, .home-ops-head a, .analytics-inline-action, .resource-inline-link) {
    color: #101a61;
    text-decoration: underline;
    text-decoration-color: rgba(253, 97, 76, 0.32);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.is-authenticated-app :is(.home-card-head a, .home-ops-head a, .analytics-inline-action, .resource-inline-link):hover {
    color: var(--coral-strong);
}

.is-authenticated-app :is(.home-chart-stats, .analytics-signal-list, .home-care-grid, .home-readiness-rail, .resource-mini-list) {
    border-color: var(--app-border-soft);
    background: rgba(1, 9, 75, 0.065);
}

.is-authenticated-app :is(.home-chart-stats div, .analytics-signal-list div, .home-care-grid article, .home-readiness-item) {
    background: rgba(255, 255, 255, 0.9);
}

.is-authenticated-app :is(.home-chart-stats span, .analytics-stat-grid span, .analytics-signal-list span, .resource-stat span, .resource-table-head, .resource-cell span, .home-care-grid span) {
    color: #68738d;
    font-weight: 930;
    letter-spacing: 0;
}

.is-authenticated-app :is(.home-chart-stats strong, .analytics-stat-grid strong, .resource-stat strong, .home-care-grid strong) {
    color: #01094b;
    font-weight: 850;
    letter-spacing: 0;
}

.is-authenticated-app .home-chart-stats {
    min-width: min(100%, 540px);
}

.is-authenticated-app .home-chart-stats div {
    padding: 12px 14px;
}

.is-authenticated-app .home-chart-stats strong {
    font-size: 21px;
}

.is-authenticated-app .home-sales-chart {
    height: 230px;
    margin-top: 12px;
}

.is-authenticated-app .analytics-stat-grid {
    gap: 12px;
}

.is-authenticated-app .analytics-stat-grid article {
    min-height: 92px;
    padding: 16px 18px;
}

.is-authenticated-app .analytics-stat-grid strong {
    font-size: 26px;
}

.is-authenticated-app .analytics-stat-grid p {
    color: #64708a;
    font-weight: 760;
}

.is-authenticated-app .analytics-card-pill {
    border-color: rgba(1, 9, 75, 0.09);
    color: #101a61;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(1, 9, 75, 0.045);
}

.is-authenticated-app :is(.resource-list-page:not(.resource-detail-page) .resource-summary, .resource-list-page:not(.resource-detail-page) .resource-panel) {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--app-shadow-panel);
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-summary {
    border-color: var(--app-border);
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-stat {
    padding: 13px 16px;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-panel {
    overflow: hidden;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-table-head {
    padding: 10px 14px;
    border-bottom-color: var(--app-border-soft);
    background: #f7f9ff;
    color: #68738d;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-row {
    border-bottom-color: rgba(1, 9, 75, 0.068);
    background: rgba(255, 255, 255, 0.96);
    transition: background 150ms ease, box-shadow 150ms ease;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) :is(a.resource-row:hover, .resource-row:hover) {
    background: #fbfdff;
    box-shadow: inset 2px 0 0 rgba(253, 97, 76, 0.56);
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-row.is-selected {
    background: #fffafa !important;
    box-shadow: inset 2px 0 0 var(--coral) !important;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-copy h2 {
    color: #01094b;
    font-weight: 850;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-copy p {
    color: #64708a;
    font-weight: 640;
}

.is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-avatar {
    box-shadow: 0 8px 16px rgba(1, 9, 75, 0.08);
}

.is-authenticated-app :is(.resource-indicator, .resource-status-pill, .resource-badges .product-status, .resource-tag-pill) {
    border-color: rgba(1, 9, 75, 0.1);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.is-authenticated-app :is(.resource-indicator-ok, .resource-status-pill:not(.product-status-alert):not(.product-status-refund)) {
    border-color: rgba(31, 157, 90, 0.18);
    color: #24553a;
    background: rgba(240, 253, 244, 0.88);
}

.is-authenticated-app .resource-indicator-alert {
    border-color: rgba(217, 45, 32, 0.2);
    background: rgba(255, 246, 244, 0.92);
}

.is-authenticated-app .product-row-icon-action {
    border-color: rgba(1, 9, 75, 0.105);
    color: #071056;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 18px rgba(1, 9, 75, 0.055);
}

.is-authenticated-app .product-row-icon-action:hover,
.is-authenticated-app .product-row-icon-action:focus-visible {
    border-color: rgba(253, 97, 76, 0.28);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(1, 9, 75, 0.085);
    outline: 0;
}

.is-authenticated-app :is(.button-primary, .billing-table-cta, .resource-bulk-confirm-button) {
    border-color: rgba(235, 75, 56, 0.9);
    background: linear-gradient(180deg, #ff6a55, #ef4434);
    box-shadow: 0 14px 30px rgba(253, 97, 76, 0.24);
}

.is-authenticated-app :is(.button-primary, .button-secondary, .button, .product-row-icon-action, .nav-link, .nav-button):focus-visible {
    outline: 0;
    box-shadow: var(--app-focus-ring);
}

.is-authenticated-app :is(.button-primary, .button-secondary, .button):hover {
    transform: translateY(-1px);
}

.is-authenticated-app :is(.button-secondary, .pagination-button, .resource-backline a) {
    border-color: rgba(1, 9, 75, 0.105);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.055);
}

.is-authenticated-app .api-hub-reference .api-hub-docs-button {
    width: fit-content;
    min-height: 42px;
    border-color: rgba(141, 224, 180, 0.34);
    padding: 10px 16px;
    color: #f7fbff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.16);
}

.is-authenticated-app .api-hub-reference .api-hub-docs-button:hover,
.is-authenticated-app .api-hub-reference .api-hub-docs-button:focus-visible {
    border-color: rgba(141, 224, 180, 0.5);
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(141, 224, 180, 0.18), rgba(141, 224, 180, 0.08)),
        rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 30px rgba(0, 0, 0, 0.2);
}

.is-authenticated-app :is(input, select, textarea) {
    caret-color: var(--coral-strong);
}

.is-authenticated-app :is(.field input, .field select, .field textarea, .field-group input, .field-group select, .analytics-date-filter input, .discount-options-grid input) {
    border-color: rgba(1, 9, 75, 0.13);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.is-authenticated-app :is(.field input, .field select, .field textarea, .field-group input, .field-group select, .analytics-date-filter input, .discount-options-grid input):focus {
    border-color: rgba(253, 97, 76, 0.64);
    outline: 0;
    box-shadow: var(--app-focus-ring);
}

.is-authenticated-app .checkout-select-control select {
    border-color: rgba(1, 9, 75, 0.13);
    border-radius: 10px;
    padding-right: 58px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 24px rgba(1, 9, 75, 0.035);
}

.is-authenticated-app .account-card {
    padding: 26px;
}

.is-authenticated-app .account-section {
    padding: 18px;
    box-shadow: var(--app-shadow-card);
}

.is-authenticated-app .account-card-head h2 {
    font-size: 27px;
    letter-spacing: 0;
}

.is-authenticated-app .home-command-card {
    border-color: rgba(253, 97, 76, 0.22);
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 248, 0.9));
    box-shadow:
        inset 4px 0 0 rgba(253, 97, 76, 0.86),
        var(--app-shadow-panel);
}

.is-authenticated-app .home-activity-list {
    border-color: var(--app-border-soft);
    background: rgba(1, 9, 75, 0.055);
    box-shadow: 0 8px 18px rgba(1, 9, 75, 0.035);
}

.is-authenticated-app .home-activity-list .home-activity-row {
    background: rgba(255, 255, 255, 0.92);
}

.is-authenticated-app .home-activity-list .home-activity-row:hover {
    background: #ffffff;
}

.is-authenticated-app .resource-bulk-toolbar {
    background:
        linear-gradient(90deg, rgba(255, 245, 242, 0.96), rgba(248, 250, 255, 0.98)),
        #ffffff;
}

.is-authenticated-app .resource-row-selector input {
    accent-color: #ef4434;
}

.is-authenticated-app .admin-portal {
    width: min(100%, 80vw);
    margin-inline: auto;
}

@media (max-width: 1180px) {
    .is-authenticated-app .admin-portal {
        width: min(100% - 32px, 1180px);
    }
}

@media (max-width: 760px) {
    .is-authenticated-app .site-header,
    .is-authenticated-app .page-main {
        width: min(100% - 28px, 1180px);
    }

    .is-authenticated-app .page-main {
        padding-top: 34px;
        padding-bottom: 56px;
    }

    .is-authenticated-app .page-main:has(.admin-portal) {
        padding-top: 12px;
    }

    .is-authenticated-app :is(.home-dashboard-hero h1, .resource-hero h1, .product-analytics-hero h1, .account-hero h1, .dashboard-hero h1) {
        font-size: 32px;
        line-height: 1.04;
    }

    .is-authenticated-app :is(.home-dashboard-hero p, .resource-hero p, .product-analytics-hero p, .account-hero p, .dashboard-hero p) {
        font-size: 14px;
    }

    .is-authenticated-app :is(.home-revenue-card, .analytics-chart-card, .product-analytics-hero, .home-ops-panel, .account-card) {
        padding: 14px;
    }

    .is-authenticated-app .home-chart-stats div {
        padding: 9px 8px;
    }

    .is-authenticated-app .home-chart-stats strong {
        font-size: 18px;
    }

    .is-authenticated-app .home-sales-chart,
    .is-authenticated-app .account-sales-chart {
        height: 198px;
    }
}

@media (max-width: 640px) {
    .is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-hero h1 {
        font-size: 27px;
    }

    .is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-panel {
        box-shadow: 0 10px 26px rgba(1, 9, 75, 0.06);
    }

    .is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-row {
        padding: 9px 10px;
    }

    .is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-copy h2 {
        font-size: 14.5px;
    }

    .is-authenticated-app .resource-list-page:not(.resource-detail-page) .resource-cell {
        background: #f8faff;
    }

    .is-authenticated-app .analytics-stat-grid {
        gap: 8px;
    }

    .is-authenticated-app .analytics-stat-grid article {
        padding: 11px 10px;
    }

    .is-authenticated-app .analytics-stat-grid strong {
        font-size: 21px;
    }
}

.pricing-conversion-hero {
    max-width: 1040px;
    padding-top: 46px;
}

.pricing-conversion-hero h1 {
    max-width: 920px;
    font-size: 62px;
    line-height: 0.98;
}

.pricing-conversion-hero h1 span {
    display: block;
}

.pricing-conversion-hero h1 em {
    color: var(--coral-strong);
    font-style: normal;
}

.pricing-conversion-hero p {
    max-width: 820px;
    color: #59657f;
    font-size: 19px;
    line-height: 1.56;
}

.pricing-conversion-hero .pricing-hero-actions {
    justify-content: center;
    margin-top: 28px;
}

.pricing-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 24px auto 0;
}

.pricing-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    border: 1px solid rgba(39, 179, 106, 0.13);
    border-radius: 999px;
    padding: 8px 14px 8px 11px;
    color: #111a5d;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 253, 250, 0.82));
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.055);
    font-size: 13px;
    font-weight: 900;
}

.pricing-trust-strip span::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #25c06d;
    box-shadow: 0 0 0 6px rgba(141, 224, 180, 0.24);
}

.pricing-proof-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 20px 54px rgba(1, 9, 75, 0.08);
}

.pricing-proof-band article {
    padding: 24px;
}

.pricing-proof-band article + article {
    border-left: 1px solid rgba(1, 9, 75, 0.08);
}

.pricing-proof-band span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-proof-band strong {
    display: block;
    margin-top: 10px;
    color: var(--navy);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.13;
}

.pricing-proof-band p {
    margin: 10px 0 0;
    color: #657089;
    font-size: 14px;
    font-weight: 690;
    line-height: 1.45;
}

.pricing-content-section-tight {
    padding-top: 70px;
    padding-bottom: 70px;
}

.pricing-faq {
    row-gap: 28px;
}

@media (max-width: 980px) {
    .pricing-content-section-tight {
        grid-template-columns: 1fr;
    }

    .pricing-proof-band {
        grid-template-columns: 1fr;
    }

    .pricing-proof-band article + article {
        border-top: 1px solid rgba(1, 9, 75, 0.08);
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .pricing-conversion-hero {
        padding-top: 34px;
        text-align: left;
    }

    .pricing-conversion-hero h1 {
        font-size: 38px;
    }

    .pricing-conversion-hero h1 span {
        display: inline;
    }

    .pricing-conversion-hero p {
        font-size: 16px;
    }

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

    .pricing-trust-strip {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pricing-proof-band article {
        padding: 16px;
    }

    .pricing-content-section-tight {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}

.pricing-paygo-hero h1 {
    max-width: 900px;
}

.pricing-paygo-hero {
    padding-top: 34px;
}

.pricing-paygo-stage {
    display: block;
    min-height: 0;
    margin-top: 34px;
    padding: 0 0 34px;
    perspective: none;
}

.pricing-paygo-stage::before {
    display: none;
}

.pricing-paygo-stage::after {
    display: none;
}

.tilt-plan-paygo {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    gap: 22px 34px;
    width: min(900px, 100%);
    min-height: 0;
    margin: 0 auto;
    border-color: rgba(1, 9, 75, 0.12);
    padding: 32px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(1, 9, 75, 0.08);
    transform: none;
}

.tilt-plan-paygo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--coral);
}

.tilt-plan-paygo::after {
    display: none;
}

.tilt-plan-paygo .tilt-badge {
    color: var(--coral-strong);
    background: rgba(255, 240, 237, 0.9);
}

.tilt-plan-paygo .tilt-plan-top strong {
    max-width: 520px;
    font-size: 30px;
    line-height: 1.05;
}

.tilt-plan-paygo .tilt-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    margin-top: 4px;
    color: var(--navy);
    font-size: 82px;
    letter-spacing: 0;
    text-align: right;
}

.tilt-plan-paygo .tilt-price span {
    display: block;
    max-width: none;
    margin-top: 4px;
    color: #657089;
    font-size: 17px;
    line-height: 1.1;
}

.tilt-plan-paygo .tilt-fee {
    grid-column: 1;
    max-width: 360px;
    margin: 0;
    color: #59657f;
    font-size: 16px;
    line-height: 1.35;
}

.tilt-plan-paygo .button {
    grid-column: 2;
    justify-self: stretch;
    align-self: end;
    width: 100%;
}

.tilt-plan-paygo .tilt-includes {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(1, 9, 75, 0.09);
    margin-top: 4px;
    padding-top: 18px;
}

.tilt-plan-paygo .tilt-includes span {
    border: 0;
    border-right: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 0;
    padding: 0 18px;
    background: transparent;
}

.tilt-plan-paygo .tilt-includes span:first-child {
    padding-left: 0;
}

.tilt-plan-paygo .tilt-includes span:last-child {
    border-right: 0;
    padding-right: 0;
}

.pricing-paygo-stage + .pricing-proof-band {
    margin-top: 0;
}

.pricing-proof-band {
    max-width: 900px;
    margin: 0 auto;
    border-color: rgba(1, 9, 75, 0.09);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.pricing-proof-band article {
    padding: 18px 20px;
}

.pricing-proof-band strong {
    font-size: 16px;
    line-height: 1.22;
}

.pricing-enterprise-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 820px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    margin: 22px auto 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: none;
}

.pricing-enterprise-note span {
    flex: 0 0 auto;
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-enterprise-note p {
    margin: 0;
    color: #657089;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.35;
}

.pricing-enterprise-note a {
    color: var(--navy);
    font-weight: 950;
    text-decoration-color: rgba(253, 97, 76, 0.45);
    text-underline-offset: 3px;
}

.tilt-plan-enterprise {
    width: min(350px, 100%);
    min-height: 342px;
    padding: 24px;
    background:
        radial-gradient(circle at 100% 100%, rgba(234, 243, 255, 0.8), transparent 36%),
        rgba(255, 255, 255, 0.88);
    box-shadow: 0 30px 74px rgba(1, 9, 75, 0.12);
    transform: rotateY(-12deg) rotateZ(2deg) translateY(34px);
}

.tilt-plan-enterprise::before {
    opacity: 0.72;
}

.tilt-plan-enterprise .tilt-badge {
    color: #476070;
    background: rgba(234, 243, 255, 0.86);
}

.tilt-plan-enterprise .tilt-plan-top strong {
    max-width: 280px;
    font-size: 24px;
}

.tilt-plan-enterprise .tilt-price {
    margin-top: 24px;
    font-size: 42px;
}

.tilt-plan-enterprise .tilt-fee {
    font-size: 14px;
    line-height: 1.34;
}

.tilt-plan-enterprise .button {
    width: 100%;
}

.pricing-enterprise-section {
    gap: 56px;
}

.pricing-enterprise-section .button {
    margin-top: 24px;
}

.pricing-enterprise-card {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.1), transparent 30%),
        rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 62px rgba(1, 9, 75, 0.1);
}

.pricing-enterprise-card::before {
    content: "";
    height: 5px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.pricing-enterprise-card div {
    display: grid;
    gap: 7px;
    border-bottom: 1px solid rgba(1, 9, 75, 0.08);
    padding: 20px 22px;
}

.pricing-enterprise-card div:last-child {
    border-bottom: 0;
}

.pricing-enterprise-card span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-enterprise-card strong {
    color: var(--navy);
    font-size: 21px;
    line-height: 1.18;
}

@media (max-width: 980px) {
    .pricing-paygo-stage {
        gap: 18px;
        min-height: auto;
    }

    .tilt-plan-paygo,
    .tilt-plan-enterprise {
        width: 100%;
        min-height: auto;
        transform: none;
    }

    .tilt-plan-paygo {
        grid-template-columns: 1fr;
    }

    .tilt-plan-paygo .tilt-price,
    .tilt-plan-paygo .button,
    .tilt-plan-paygo .tilt-includes {
        grid-column: auto;
    }

    .tilt-plan-paygo .tilt-price {
        grid-row: auto;
        justify-self: start;
        text-align: left;
    }

    .pricing-enterprise-section {
        grid-template-columns: 1fr;
    }

    .pricing-enterprise-note {
        align-items: flex-start;
        border-radius: 8px;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .pricing-paygo-hero h1 {
        font-size: 38px;
    }

    .tilt-plan-paygo,
    .tilt-plan-enterprise {
        padding: 22px;
    }

    .tilt-plan-paygo .tilt-plan-top strong {
        font-size: 26px;
    }

    .tilt-plan-paygo .tilt-price {
        font-size: 64px;
    }

    .tilt-plan-paygo .tilt-price span {
        display: block;
        max-width: none;
        margin-top: 4px;
        font-size: 18px;
    }

    .tilt-plan-paygo .tilt-includes {
        grid-template-columns: 1fr;
        padding-top: 10px;
    }

    .tilt-plan-paygo .tilt-includes span {
        border-right: 0;
        border-bottom: 1px solid rgba(1, 9, 75, 0.08);
        padding: 11px 0;
    }

    .tilt-plan-paygo .tilt-includes span:last-child {
        border-bottom: 0;
    }

    .pricing-enterprise-card div {
        padding: 17px 18px;
    }

    .pricing-enterprise-note {
        display: grid;
        gap: 8px;
        padding: 16px;
    }
}

.pricing-paygo-hero {
    max-width: 1280px;
    padding-top: 18px;
    text-align: left;
}

.pricing-paygo-hero::before {
    inset: -8px calc(50% - 50vw) -180px;
    background:
        radial-gradient(circle at 80% 26%, rgba(141, 224, 180, 0.2), transparent 24%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 255, 0.9) 48%, rgba(255, 240, 237, 0.84)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.035) 0 1px, transparent 1px 54px);
    transform: skewY(-4deg);
}

.pricing-paygo-hero::after {
    top: 24px;
    left: auto;
    right: -8vw;
    width: min(820px, 56vw);
    height: 160px;
    background: linear-gradient(92deg, rgba(253, 97, 76, 0.14), rgba(255, 230, 109, 0.2), rgba(141, 224, 180, 0.18));
    transform: rotate(-8deg);
}

.pricing-hero-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(420px, 0.76fr);
    gap: clamp(30px, 5vw, 74px);
    align-items: center;
    padding: clamp(32px, 5vw, 70px) 0 24px;
}

.pricing-hero-copy {
    max-width: 720px;
}

.pricing-paygo-hero .section-kicker {
    justify-content: flex-start;
}

.pricing-paygo-hero h1 {
    max-width: 780px;
    margin-top: 18px;
    font-size: clamp(56px, 7.6vw, 102px);
    line-height: 0.9;
    letter-spacing: 0;
}

.pricing-paygo-hero h1 em {
    color: var(--coral-strong);
    font-style: normal;
}

.pricing-paygo-hero p {
    max-width: 650px;
    margin: 22px 0 0;
    color: #56627b;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.48;
}

.pricing-paygo-hero .pricing-hero-actions {
    justify-content: flex-start;
    margin-top: 28px;
}

.pricing-paygo-hero .pricing-hero-actions .button {
    min-height: 62px;
    padding-inline: 34px;
    font-size: 18px;
    box-shadow: 0 22px 44px rgba(253, 97, 76, 0.24);
}

.pricing-paygo-hero .pricing-trust-strip {
    justify-content: flex-start;
    margin: 24px 0 0;
}

.pricing-paygo-hero .pricing-trust-strip span {
    min-height: 42px;
    padding: 9px 15px 9px 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 34px rgba(1, 9, 75, 0.07);
}

.pricing-paygo-hero .pricing-paygo-stage {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pricing-paygo-hero .tilt-plan-paygo {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    border-color: rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    padding: clamp(24px, 3vw, 38px);
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.22), transparent 34%),
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.1), transparent 28%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 34px 84px rgba(1, 9, 75, 0.14);
    transform: rotate(1deg);
}

.pricing-paygo-hero .tilt-plan-paygo::before {
    height: 6px;
    background: linear-gradient(90deg, var(--coral), var(--lemon), #8de0b4);
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-plan-top {
    gap: 12px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-plan-top span {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(253, 97, 76, 0.22);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255, 240, 237, 0.72);
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-plan-top strong {
    max-width: 480px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.05;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-price {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    margin-top: 28px;
    font-size: clamp(86px, 8vw, 122px);
    line-height: 0.88;
    text-align: left;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-price span {
    display: inline-block;
    margin-left: 8px;
    color: #59657f;
    font-size: clamp(18px, 1.8vw, 24px);
    vertical-align: baseline;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-fee {
    grid-column: auto;
    max-width: none;
    margin-top: 10px;
    font-size: 17px;
}

.pricing-paygo-hero .tilt-plan-paygo .button {
    grid-column: auto;
    justify-self: stretch;
    min-height: 60px;
    margin-top: 24px;
    font-size: 18px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-includes {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 10px;
    border-top: 1px solid rgba(1, 9, 75, 0.08);
    margin-top: 22px;
    padding-top: 20px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-includes span {
    border: 1px solid rgba(1, 9, 75, 0.08);
    border-radius: 8px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 22px rgba(1, 9, 75, 0.035);
    font-size: 14px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-includes span:first-child,
.pricing-paygo-hero .tilt-plan-paygo .tilt-includes span:last-child {
    padding-inline: 13px;
}

.pricing-paygo-stage + .pricing-proof-band,
.pricing-proof-band {
    max-width: 1180px;
    margin-top: 26px;
}

.pricing-proof-band {
    border-color: rgba(1, 9, 75, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.78));
    box-shadow: 0 18px 54px rgba(1, 9, 75, 0.07);
}

.pricing-proof-band article {
    padding: 22px 26px;
}

.pricing-proof-band strong {
    font-size: 18px;
    line-height: 1.22;
}

.pricing-enterprise-note {
    max-width: 1180px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 18px 22px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(234, 243, 255, 0.64));
}

.pricing-faq {
    max-width: 1180px;
    margin-inline: auto;
    row-gap: 18px;
}

.pricing-faq article {
    background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1080px) {
    .pricing-hero-shell {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-hero-copy {
        max-width: 820px;
    }

    .pricing-paygo-hero .tilt-plan-paygo {
        max-width: 680px;
        transform: none;
    }
}

@media (max-width: 760px) {
    .pricing-paygo-hero {
        padding-top: 16px;
    }

    .pricing-hero-shell {
        padding-top: 30px;
    }

    .pricing-paygo-hero h1 {
        font-size: 42px;
        line-height: 0.96;
    }

    .pricing-paygo-hero h1 span {
        display: block;
    }

    .pricing-paygo-hero p {
        font-size: 16px;
    }

    .pricing-paygo-hero .pricing-trust-strip {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pricing-paygo-hero .tilt-plan-paygo .tilt-price {
        font-size: 74px;
    }

    .pricing-paygo-hero .tilt-plan-paygo .tilt-price span {
        display: block;
        margin: 6px 0 0;
    }

    .pricing-proof-band,
    .pricing-enterprise-note {
        margin-inline: 0;
    }

    .pricing-proof-band article {
        padding: 18px;
    }

    .pricing-enterprise-note {
        display: grid;
        gap: 8px;
    }
}

.pricing-paygo-hero {
    padding-top: 12px;
}

.pricing-paygo-hero::before {
    inset: 0 calc(50% - 50vw) -150px;
    background:
        radial-gradient(circle at 82% 28%, rgba(141, 224, 180, 0.12), transparent 24%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.99), rgba(242, 247, 255, 0.88) 54%, rgba(255, 246, 244, 0.72)),
        repeating-linear-gradient(90deg, rgba(1, 9, 75, 0.028) 0 1px, transparent 1px 54px);
}

.pricing-paygo-hero::after {
    top: 38px;
    right: -12vw;
    width: min(720px, 50vw);
    height: 126px;
    opacity: 0.62;
    background: linear-gradient(92deg, rgba(253, 97, 76, 0.1), rgba(255, 230, 109, 0.13), rgba(141, 224, 180, 0.12));
}

.pricing-hero-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.68fr);
    gap: clamp(30px, 4.5vw, 66px);
    padding: clamp(26px, 4vw, 52px) 0 22px;
}

.pricing-paygo-hero h1 {
    max-width: 920px;
    margin-top: 16px;
    font-size: clamp(48px, 6.1vw, 80px);
    line-height: 0.94;
}

.pricing-paygo-hero h1 span {
    display: inline;
}

.pricing-paygo-hero p {
    max-width: 610px;
    margin-top: 18px;
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.52;
}

.pricing-paygo-hero .pricing-hero-actions {
    margin-top: 24px;
}

.pricing-paygo-hero .pricing-hero-actions .button {
    min-height: 56px;
    padding-inline: 30px;
    font-size: 17px;
    box-shadow: 0 16px 34px rgba(253, 97, 76, 0.18);
}

.pricing-paygo-hero .pricing-trust-strip {
    margin-top: 20px;
    gap: 9px 10px;
}

.pricing-paygo-hero .pricing-trust-strip span {
    min-height: 38px;
    padding: 8px 13px 8px 11px;
    box-shadow: 0 10px 24px rgba(1, 9, 75, 0.045);
}

.pricing-paygo-hero .tilt-plan-paygo {
    border-color: rgba(1, 9, 75, 0.09);
    padding: clamp(24px, 2.5vw, 32px);
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.14), transparent 36%),
        radial-gradient(circle at 0% 0%, rgba(253, 97, 76, 0.06), transparent 30%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 62px rgba(1, 9, 75, 0.1);
    transform: none;
}

.pricing-paygo-hero .tilt-plan-paygo::before {
    height: 4px;
    opacity: 0.84;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-plan-top strong {
    max-width: 440px;
    font-size: clamp(23px, 2vw, 30px);
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-price {
    margin-top: 22px;
    font-size: clamp(68px, 6.2vw, 94px);
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-price span {
    color: #667189;
    font-size: clamp(17px, 1.45vw, 21px);
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-fee {
    margin-top: 8px;
    font-size: 16px;
}

.pricing-paygo-hero .tilt-plan-paygo .button {
    min-height: 56px;
    margin-top: 20px;
    font-size: 17px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-includes {
    margin-top: 18px;
    padding-top: 18px;
}

.pricing-paygo-hero .tilt-plan-paygo .tilt-includes span {
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: none;
    font-size: 13px;
}

.pricing-proof-band {
    margin-top: 20px;
    box-shadow: 0 14px 40px rgba(1, 9, 75, 0.045);
}

.pricing-proof-band article {
    padding: 19px 22px;
}

.pricing-proof-band strong {
    font-size: 17px;
}

.pricing-enterprise-note {
    margin-top: 16px;
}

@media (max-width: 760px) {
    .pricing-hero-shell {
        padding-top: 24px;
    }

    .pricing-paygo-hero h1 {
        font-size: 40px;
    }

    .pricing-paygo-hero .tilt-plan-paygo .tilt-price {
        font-size: 66px;
    }
}

.pricing-enterprise-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    justify-content: stretch;
    max-width: 1180px;
    border-color: rgba(1, 9, 75, 0.09);
    margin-top: 18px;
    padding: 20px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.12), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.84));
    box-shadow: 0 14px 42px rgba(1, 9, 75, 0.055);
}

.pricing-enterprise-note::before {
    content: "";
    width: 10px;
    height: 58px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--coral), var(--lemon), #8de0b4);
}

.pricing-enterprise-note span {
    display: grid;
    gap: 4px;
}

.pricing-enterprise-note span::after {
    content: "Custom terms for larger catalogs and serious volume.";
    max-width: 300px;
    color: #667189;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.3;
    text-transform: none;
}

.pricing-enterprise-note p {
    max-width: 620px;
    color: #56627b;
    font-size: 15px;
    text-align: left;
}

.pricing-enterprise-note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 999px;
    padding: 0 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 26px rgba(1, 9, 75, 0.06);
    text-decoration: none;
    white-space: nowrap;
}

.pricing-faq {
    column-gap: 28px;
    row-gap: 30px;
    margin-top: 56px;
}

.pricing-faq article {
    border-top: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 0;
    padding: 22px 0 0;
    background: transparent;
    box-shadow: none;
}

.pricing-faq span {
    max-width: 360px;
    font-size: 20px;
    line-height: 1.12;
}

.pricing-faq p {
    max-width: 410px;
    margin-top: 16px;
    color: #657089;
    font-size: 16px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .pricing-enterprise-note {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
    }

    .pricing-enterprise-note::before {
        width: 54px;
        height: 6px;
    }

    .pricing-enterprise-note a {
        width: fit-content;
    }

    .pricing-faq {
        margin-top: 38px;
    }
}

@media (max-width: 860px) {
}

.pricing-enterprise-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    max-width: 860px;
    border: 1px solid rgba(1, 9, 75, 0.1);
    border-radius: 8px;
    margin: 28px auto 0;
    padding: 22px 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.9)),
        radial-gradient(circle at 100% 0%, rgba(141, 224, 180, 0.12), transparent 34%);
    box-shadow: 0 18px 46px rgba(1, 9, 75, 0.06);
}

.pricing-enterprise-note::before,
.pricing-enterprise-note span::after {
    display: none;
}

.pricing-enterprise-note div {
    display: grid;
    gap: 8px;
}

.pricing-enterprise-note span {
    color: var(--coral-strong);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pricing-enterprise-note p {
    max-width: 560px;
    margin: 0;
    color: var(--navy);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.18;
}

.pricing-enterprise-note p em {
    color: var(--coral-strong);
    font-style: normal;
}

.pricing-enterprise-note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid rgba(1, 9, 75, 0.12);
    border-radius: 999px;
    padding: 0 20px;
    color: var(--navy);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(1, 9, 75, 0.08);
    font-size: 15px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.pricing-enterprise-note a:hover {
    border-color: rgba(253, 97, 76, 0.26);
    box-shadow: 0 16px 34px rgba(1, 9, 75, 0.1);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .pricing-enterprise-note {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: none;
        padding: 20px;
    }

    .pricing-enterprise-note p {
        font-size: 19px;
    }

    .pricing-enterprise-note a {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 1080px) {
    .pricing-paygo-hero .pricing-hero-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }

    .pricing-paygo-hero .pricing-hero-copy,
    .pricing-paygo-hero .pricing-paygo-stage,
    .pricing-paygo-hero .tilt-plan-paygo {
        max-width: none;
        width: 100%;
    }

    .pricing-paygo-hero .pricing-paygo-stage {
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .pricing-paygo-hero {
        padding-top: 12px;
    }

    .pricing-paygo-hero::after {
        right: -34vw;
        width: 92vw;
        opacity: 0.44;
    }

    .pricing-paygo-hero .pricing-hero-shell {
        gap: 24px;
        padding: 26px 0 18px;
    }

    .pricing-paygo-hero h1 {
        max-width: 11ch;
        font-size: clamp(42px, 13vw, 54px);
        line-height: 0.95;
    }

    .pricing-paygo-hero h1 span {
        display: block;
    }

    .pricing-paygo-hero p {
        max-width: 31rem;
        margin-top: 18px;
        font-size: 16px;
    }

    .pricing-paygo-hero .pricing-trust-strip {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pricing-paygo-hero .tilt-plan-paygo {
        padding: 22px;
    }
}

.checkout-benefit-visual-image {
    display: block;
    width: min(640px, 100%);
    height: auto;
    margin: 0 auto;
    perspective: none;
}

.checkout-benefit-visual-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    filter: drop-shadow(0 28px 50px rgba(1, 9, 75, 0.14));
}

.brand picture,
.nav-drawer-head picture,
.footer-brand picture {
    display: block;
    line-height: 0;
}

.product-loop-art picture {
    display: block;
    width: min(860px, 116%);
    max-width: none;
    transform: translateX(4%);
    filter: drop-shadow(0 30px 44px rgba(1, 9, 75, 0.12));
}

.brand-story-art picture,
.delivery-confidence-art picture,
.features-hero-art picture {
    display: block;
    width: min(100%, 620px);
    filter: drop-shadow(0 34px 58px rgba(1, 9, 75, 0.17));
    animation: site-asset-float 8s ease-in-out infinite;
}

.delivery-confidence-art picture {
    width: min(100%, 560px);
    animation-delay: -2s;
}

.features-hero-art picture {
    width: min(100%, 650px);
}

.bundle-visual picture {
    display: block;
    width: min(112%, 760px);
    max-width: none;
    margin-inline: -6%;
    filter: drop-shadow(0 30px 54px rgba(1, 9, 75, 0.14));
}

.checkout-benefit-visual-image picture {
    display: block;
    width: 100%;
}

.product-loop-art picture img,
.brand-story-art picture img,
.delivery-confidence-art picture img,
.features-hero-art picture img,
.bundle-visual picture img,
.checkout-benefit-visual-image picture img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    filter: none;
    animation: none;
    transform: none;
}

.checkout-benefit-visual-image picture img {
    border-radius: 18px;
}

@media (max-width: 980px) {
    .product-loop-art picture {
        width: min(720px, 100%);
        max-width: 100%;
        transform: none;
    }

    .brand-story-art picture,
    .delivery-confidence-art picture,
    .features-hero-art picture {
        width: min(100%, 440px);
    }

    .bundle-visual picture {
        width: min(100%, 720px);
        max-width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .brand-story-art picture,
    .delivery-confidence-art picture,
    .features-hero-art picture {
        width: min(100%, 340px);
    }

    .bundle-visual picture {
        width: 100%;
    }
}