/* ==========================================================================
   Landing page - KasaFlow
   Self-contained design system, scoped under .lp-page.
   Deliberately does not touch the shared :root tokens in style.css so the
   dashboard, signup, and auth screens are unaffected.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0e1512;
    background: #fbfdfc;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

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

button,
input,
textarea,
select {
    font: inherit;
}

.auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(170, 224, 44, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(255, 205, 63, 0.14), transparent 28%),
        linear-gradient(180deg, #f7fbee 0%, #eef5df 100%);
}

html.auth-root,
body.auth-shell {
    background:
        radial-gradient(circle at top left, rgba(170, 224, 44, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(255, 205, 63, 0.14), transparent 28%),
        linear-gradient(180deg, #f7fbee 0%, #eef5df 100%);
}

.auth-stage {
    width: 100%;
}

.auth-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 24px;
}

.auth-login-grid {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 28px;
    align-items: stretch;
}

.auth-showcase,
.auth-card,
.glass-form {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16, 30, 19, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(33, 53, 19, 0.12);
}

.auth-showcase {
    padding: 40px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 74, 0.22), transparent 30%),
        linear-gradient(145deg, #102018 0%, #173528 52%, #214227 100%);
    color: #f4fae9;
    display: grid;
    gap: 24px;
}

.auth-showcase::after,
.auth-card::after,
.glass-form::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-eyebrow,
.eyebrow {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #d3f15f;
}

.auth-showcase h1,
.signup-copy h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.auth-showcase-text,
.signup-copy p {
    margin: 0;
    max-width: 54ch;
    color: rgba(244, 250, 233, 0.76);
    line-height: 1.72;
    font-size: 0.98rem;
}

.auth-showcase-pills,
.mini-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-showcase-pills span,
.mini-checklist span {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(213, 241, 96, 0.18);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    font-weight: 600;
}

.auth-insight-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(234, 247, 190, 0.12);
}

.auth-insight-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(244, 250, 233, 0.92);
}

.auth-signal-dot,
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c7f24d;
    box-shadow: 0 0 18px rgba(199, 242, 77, 0.55);
}

.auth-chat-stack,
.chat-preview {
    display: grid;
    gap: 12px;
}

.auth-chat-bubble,
.chat-bubble {
    width: fit-content;
    max-width: 30ch;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 0.85rem;
    line-height: 1.55;
}

.auth-chat-bubble.incoming,
.chat-bubble.incoming {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(244, 250, 233, 0.9);
}

.auth-chat-bubble.outgoing,
.chat-bubble.outgoing {
    margin-left: auto;
    background: linear-gradient(135deg, #c8f24f 0%, #f4d45e 100%);
    color: #112116;
    box-shadow: 0 18px 32px rgba(201, 227, 83, 0.2);
}

.auth-metric-row,
.signal-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.auth-metric-row div,
.signal-row div {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-metric-row strong,
.signal-row strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.15rem;
    color: #fffde6;
}

.auth-metric-row span,
.signal-row span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    color: rgba(244, 250, 233, 0.68);
}

.auth-card,
.glass-form {
    padding: 34px 32px;
    background: rgba(255, 255, 255, 0.78);
}

.auth-card {
    display: grid;
    align-content: center;
    gap: 20px;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #4f5d54;
    font-weight: 600;
}

.auth-kicker {
    margin: 16px 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f8611;
    font-weight: 700;
}

.auth-card h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #101914;
}

.auth-card-copy {
    margin: 10px 0 0;
    color: #5f6c64;
    line-height: 1.65;
    font-size: 0.92rem;
}

.auth-alert {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 0.84rem;
    line-height: 1.5;
    font-weight: 600;
}

.auth-alert-success {
    border: 1px solid rgba(74, 165, 75, 0.18);
    background: rgba(95, 185, 104, 0.1);
    color: #1d6a2f;
}

.auth-alert-error {
    border: 1px solid rgba(196, 86, 86, 0.16);
    background: rgba(226, 98, 98, 0.09);
    color: #9a2a2a;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-field,
.form-grid label {
    display: grid;
    gap: 8px;
}

.auth-field span,
.form-grid label span {
    font-size: 0.83rem;
    font-weight: 700;
    color: #243228;
}

.auth-field input,
.form-grid input {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(16, 30, 19, 0.11);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 0 16px;
    color: #102018;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-field input:focus,
.form-grid input:focus {
    border-color: rgba(125, 175, 18, 0.7);
    box-shadow: 0 0 0 4px rgba(174, 220, 63, 0.16);
    transform: translateY(-1px);
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap input {
    padding-right: 80px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6a7c24;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #47544d;
}

.auth-check input {
    width: 18px;
    height: 18px;
}

.auth-help-text {
    font-size: 0.8rem;
    color: #70806d;
}

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.primary-button {
    border: 0;
    background: linear-gradient(135deg, #bde63f 0%, #f2d453 100%);
    color: #132116;
    box-shadow: 0 18px 32px rgba(177, 204, 48, 0.22);
    cursor: pointer;
}

.primary-button:hover,
.ghost-button:hover {
    transform: translateY(-1px);
}

.ghost-button {
    border: 1px solid rgba(18, 31, 20, 0.12);
    background: rgba(255, 255, 255, 0.7);
    color: #16211b;
}

.wide-button {
    width: 100%;
}

.auth-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #57645d;
}

.auth-card-footer p {
    margin: 0;
}

.auth-card-footer a {
    color: #567f12;
    font-weight: 700;
}

.signup-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 40px 0;
}

.signup-copy {
    display: grid;
    gap: 20px;
    padding-right: 12px;
}

.glass-form {
    display: grid;
    gap: 22px;
}

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

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

.plan-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(16, 30, 19, 0.09);
    background: rgba(248, 251, 239, 0.88);
    cursor: pointer;
}

.plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card strong {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1rem;
}

.plan-card span {
    font-size: 0.83rem;
    color: #5c685f;
}

.plan-card b {
    font-size: 1.15rem;
    color: #17221d;
}

.plan-card.featured,
.plan-card:has(input:checked) {
    border-color: rgba(155, 189, 30, 0.36);
    box-shadow: 0 18px 34px rgba(178, 203, 63, 0.16);
}

/* ---------- Login ---------- */

.auth-login-simple,
.auth-signup-simple {
    --auth-accent: #0e8a5f;
    --auth-accent-dark: #0a6a48;
    --auth-ink: #0e1512;
    --auth-muted: #5d6962;
    --auth-line: rgba(14, 21, 18, 0.11);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--auth-ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(14, 138, 95, 0.13), transparent 34%),
        radial-gradient(circle at 96% 88%, rgba(255, 107, 74, 0.07), transparent 30%),
        #fbfdfc;
}

.auth-login-header,
.auth-login-main,
.auth-login-footer {
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-login-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--auth-line);
}

.auth-brand,
.auth-home-link {
    display: inline-flex;
    align-items: center;
}

.auth-brand {
    gap: 10px;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
}

.auth-brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-accent), #1ad08a);
    box-shadow: 0 10px 24px rgba(14, 138, 95, 0.2);
}

.auth-home-link {
    gap: 5px;
    color: var(--auth-muted);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 160ms ease, transform 160ms ease;
}

.auth-home-link:hover {
    color: var(--auth-accent-dark);
    transform: translateX(-2px);
}

.auth-login-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    align-items: center;
    gap: clamp(56px, 9vw, 130px);
    padding-block: 64px;
}

.auth-login-intro {
    max-width: 520px;
}

.auth-login-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--auth-accent-dark);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-login-eyebrow span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--auth-accent);
}

.auth-login-intro h1 {
    max-width: 12ch;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.auth-login-intro > p:not(.auth-login-eyebrow) {
    max-width: 49ch;
    margin: 22px 0 0;
    color: var(--auth-muted);
    font-size: 0.94rem;
    line-height: 1.75;
}

.auth-login-note {
    display: flex;
    align-items: center;
    gap: 13px;
    width: fit-content;
    margin-top: 34px;
    padding: 12px 16px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
}

.auth-login-note-icon {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.1);
}

.auth-login-note > span:last-child {
    display: grid;
    gap: 2px;
    color: var(--auth-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.auth-login-note strong {
    color: var(--auth-ink);
    font-size: 0.79rem;
}

.auth-login-card {
    display: grid;
    gap: 22px;
    padding: 34px;
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
}

.auth-login-card-head > p {
    margin: 0 0 8px;
    color: var(--auth-accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-login-card-head h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.auth-login-card-head > span {
    display: block;
    margin-top: 9px;
    color: var(--auth-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.auth-login-card .auth-form {
    gap: 15px;
}

.auth-login-card .auth-field {
    gap: 7px;
}

.auth-login-card .auth-field > span {
    color: #26332c;
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-login-card .auth-field input {
    min-height: 50px;
    padding-inline: 14px;
    border-color: var(--auth-line);
    border-radius: 12px;
    background: #fbfcfb;
    font-size: 0.86rem;
}

.auth-login-card .auth-password-wrap input {
    padding-right: 66px;
}

.auth-login-card .auth-password-toggle {
    right: 14px;
    color: var(--auth-accent-dark);
    font-size: 0.74rem;
}

.auth-login-card .auth-check {
    width: fit-content;
    gap: 8px;
    color: var(--auth-muted);
    font-size: 0.76rem;
}

.auth-login-card .auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--auth-accent);
}

.auth-login-submit {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-accent), #19b67c);
    box-shadow: 0 16px 30px rgba(14, 138, 95, 0.22);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-login-submit:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--auth-accent-dark), var(--auth-accent));
    box-shadow: 0 18px 34px rgba(14, 138, 95, 0.28);
}

.auth-login-submit:disabled,
.auth-login-submit[aria-busy="true"] {
    cursor: not-allowed;
    opacity: 0.78;
    transform: none;
    box-shadow: 0 12px 22px rgba(14, 138, 95, 0.18);
}

.auth-login-submit[aria-busy="true"] [data-signin-submit-icon] {
    display: none;
}

.auth-login-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
    color: var(--auth-muted);
    font-size: 0.78rem;
}

.auth-login-card-footer a {
    color: var(--auth-accent-dark);
    font-weight: 700;
}

.auth-login-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--auth-line);
    color: #748079;
    font-size: 0.72rem;
}

.auth-login-simple a:focus-visible,
.auth-login-simple button:focus-visible,
.auth-login-simple input:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

html[data-theme="dark"] .auth-login-simple,
html[data-theme="dark"] .auth-signup-simple {
    --auth-accent: #9fda38;
    --auth-accent-dark: #b8ec58;
    --auth-ink: #f3f8f5;
    --auth-muted: #9eaca5;
    --auth-line: rgba(226, 241, 233, 0.12);
    background:
        radial-gradient(circle at 8% 10%, rgba(159, 218, 56, 0.12), transparent 34%),
        radial-gradient(circle at 96% 88%, rgba(255, 204, 39, 0.06), transparent 30%),
        #09110d;
}

html[data-theme="dark"] .auth-login-card,
html[data-theme="dark"] .auth-signup-card,
html[data-theme="dark"] .auth-login-note {
    border-color: var(--auth-line);
    background: rgba(16, 29, 23, 0.94);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-brand,
html[data-theme="dark"] .auth-login-card-head h2,
html[data-theme="dark"] .auth-signup-card-head h2,
html[data-theme="dark"] .auth-login-note strong,
html[data-theme="dark"] .auth-plan-copy strong,
html[data-theme="dark"] .auth-plan-option > b {
    color: var(--auth-ink);
}

html[data-theme="dark"] .auth-login-card .auth-field > span,
html[data-theme="dark"] .auth-signup-field > span,
html[data-theme="dark"] .auth-plan-selector legend,
html[data-theme="dark"] .auth-signup-benefits > div {
    color: #dbe7e0;
}

html[data-theme="dark"] .auth-login-card .auth-field input,
html[data-theme="dark"] .auth-signup-field input,
html[data-theme="dark"] .auth-signup-field select,
html[data-theme="dark"] .auth-plan-option {
    border-color: var(--auth-line);
    color: var(--auth-ink);
    background: #0c1812;
}

html[data-theme="dark"] .auth-login-card .auth-field input::placeholder,
html[data-theme="dark"] .auth-signup-field input::placeholder {
    color: #697870;
}

html[data-theme="dark"] .auth-signup-field select:invalid {
    color: #697870;
}

html[data-theme="dark"] .auth-phone-field {
    border-color: var(--auth-line);
    background: #0c1812;
}

html[data-theme="dark"] .auth-phone-country {
    border-color: var(--auth-line);
}

html[data-theme="dark"] .auth-plan-option:hover,
html[data-theme="dark"] .auth-plan-option:has(input:checked) {
    border-color: rgba(159, 218, 56, 0.42);
    background: rgba(159, 218, 56, 0.08);
}

html[data-theme="dark"] .auth-login-note-icon,
html[data-theme="dark"] .auth-signup-benefits > div > span,
html[data-theme="dark"] .auth-signup-step {
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-login-footer,
html[data-theme="dark"] .auth-signup-footer {
    color: #7f8e86;
}

html[data-theme="dark"] .auth-alert-success {
    border-color: rgba(110, 218, 120, 0.2);
    color: #99e3a3;
    background: rgba(74, 165, 75, 0.12);
}

html[data-theme="dark"] .auth-alert-error {
    border-color: rgba(245, 128, 128, 0.2);
    color: #f0a0a0;
    background: rgba(196, 70, 70, 0.13);
}

.company-chat {
    --chat-green: #86c92f;
    --chat-ink: #142119;
    --chat-muted: #68756e;
    --chat-line: rgba(20, 33, 25, 0.11);
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;
    font-family: "Inter", sans-serif;
}

.company-chat-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: min(370px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--chat-line);
    border-radius: 22px;
    color: var(--chat-ink);
    background: #fff;
    box-shadow: 0 28px 70px rgba(8, 22, 14, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.company-chat.is-open .company-chat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.company-chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 17px;
    color: #f5fbf7;
    background: linear-gradient(135deg, #102c20, #174f36);
}

.company-chat-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.company-chat-heading {
    display: grid;
    flex: 1;
    gap: 3px;
}

.company-chat-heading strong {
    font-size: 0.82rem;
}

.company-chat-heading small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(245, 251, 247, 0.7);
    font-size: 0.65rem;
}

.company-chat-heading i,
.company-chat-launcher-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b9ed55;
    box-shadow: 0 0 0 3px rgba(185, 237, 85, 0.14);
}

.company-chat-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
    cursor: pointer;
}

.company-chat-messages {
    height: 292px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 17px;
    background:
        radial-gradient(circle at 100% 0, rgba(134, 201, 47, 0.08), transparent 34%),
        #f7faf8;
    scroll-behavior: smooth;
}

.company-chat-message {
    max-width: 84%;
    display: grid;
    gap: 5px;
    font-size: 0.76rem;
    line-height: 1.55;
}

.company-chat-message span {
    padding: 10px 12px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(12, 31, 19, 0.07);
}

.company-chat-message small {
    color: var(--chat-muted);
    font-size: 0.58rem;
}

.company-chat-message-user {
    align-self: flex-end;
    text-align: right;
}

.company-chat-message-user span {
    color: #12200e;
    background: #c3ee6c;
    border-radius: 14px 14px 4px;
}

.company-chat-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.company-chat-prompts button {
    padding: 7px 10px;
    border: 1px solid rgba(81, 132, 31, 0.2);
    border-radius: 999px;
    color: #41661f;
    background: rgba(185, 237, 85, 0.12);
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
}

.company-chat-typing span {
    display: inline-flex;
    gap: 4px;
    width: fit-content;
}

.company-chat-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b9991;
    animation: company-chat-typing 900ms ease-in-out infinite alternate;
}

.company-chat-typing i:nth-child(2) { animation-delay: 140ms; }
.company-chat-typing i:nth-child(3) { animation-delay: 280ms; }

@keyframes company-chat-typing {
    to { transform: translateY(-3px); opacity: 0.45; }
}

.company-chat-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 13px 8px;
    border-top: 1px solid var(--chat-line);
    background: #fff;
}

.company-chat-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.company-chat-form input {
    min-width: 0;
    min-height: 42px;
    flex: 1;
    padding: 0 13px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    outline: none;
    color: var(--chat-ink);
    background: #f7faf8;
    font-size: 0.75rem;
}

.company-chat-form input:focus {
    border-color: rgba(94, 151, 39, 0.55);
    box-shadow: 0 0 0 3px rgba(134, 201, 47, 0.1);
}

.company-chat-form button {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    cursor: pointer;
}

.company-chat-handoff {
    margin: 0;
    padding: 0 15px 12px;
    color: var(--chat-muted);
    background: #fff;
    font-size: 0.6rem;
    text-align: center;
}

.company-chat-handoff a {
    color: #47751d;
    font-weight: 700;
}

.company-chat-launcher {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    box-shadow: 0 16px 34px rgba(78, 119, 27, 0.3);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.company-chat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(78, 119, 27, 0.36);
}

.company-chat-launcher-open,
.company-chat-launcher-close {
    grid-area: 1 / 1;
    transition: opacity 160ms ease, transform 180ms ease;
}

.company-chat-launcher-close,
.company-chat.is-open .company-chat-launcher-open {
    opacity: 0;
    transform: scale(0.6) rotate(-30deg);
}

.company-chat.is-open .company-chat-launcher-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.company-chat-launcher-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    border: 2px solid #fff;
}

.company-chat.is-open .company-chat-launcher-dot {
    display: none;
}

html[data-theme="dark"] .company-chat {
    --chat-ink: #eef7f1;
    --chat-muted: #91a198;
    --chat-line: rgba(226, 241, 233, 0.12);
}

html[data-theme="dark"] .company-chat-panel,
html[data-theme="dark"] .company-chat-form,
html[data-theme="dark"] .company-chat-handoff {
    background: #101d17;
}

html[data-theme="dark"] .company-chat-messages {
    background:
        radial-gradient(circle at 100% 0, rgba(159, 218, 56, 0.08), transparent 34%),
        #0b1510;
}

html[data-theme="dark"] .company-chat-message span,
html[data-theme="dark"] .company-chat-form input {
    color: var(--chat-ink);
    background: #16261e;
}

html[data-theme="dark"] .company-chat-message-user span {
    color: #12200e;
    background: #b9e85c;
}

html[data-theme="dark"] .company-chat-form input::placeholder {
    color: #718078;
}

@media (max-width: 600px) {
    .company-chat {
        right: 14px;
        bottom: 14px;
    }

    .company-chat-panel {
        position: fixed;
        right: 12px;
        bottom: 80px;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 96px);
    }

    .company-chat-messages {
        height: min(300px, calc(100dvh - 270px));
        min-height: 210px;
    }

    .company-chat-launcher {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
}

@media (max-width: 820px) {
    .auth-login-main {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 540px;
        padding-block: 48px;
    }

    .auth-login-intro {
        text-align: center;
    }

    .auth-login-eyebrow,
    .auth-login-note {
        margin-inline: auto;
    }

    .auth-login-intro h1,
    .auth-login-intro > p:not(.auth-login-eyebrow) {
        margin-inline: auto;
    }
}

@media (max-width: 520px) {
    .auth-login-header,
    .auth-login-main,
    .auth-login-footer {
        width: min(100% - 32px, 1080px);
    }

    .auth-login-header {
        min-height: 70px;
    }

    .auth-brand > span:last-child {
        display: none;
    }

    .auth-login-main {
        padding-block: 36px;
    }

    .auth-login-intro h1 {
        font-size: 2.15rem;
    }

    .auth-login-intro > p:not(.auth-login-eyebrow) {
        margin-top: 16px;
    }

    .auth-login-note {
        margin-top: 24px;
        text-align: left;
    }

    .auth-login-card {
        padding: 26px 22px;
        border-radius: 18px;
    }

    .auth-login-card-footer,
    .auth-login-footer {
        flex-direction: column;
        text-align: center;
    }

    .auth-login-footer {
        justify-content: center;
        padding-block: 16px;
    }
}

/* Admin control center */
.admin-console {
    --admin-accent: #78c850;
    --admin-warm: #f4c84a;
    display: grid;
    gap: 22px;
}

.admin-page-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 29px 31px;
    border: 1px solid var(--app-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 93% 16%, rgba(244, 200, 74, .22), transparent 23%),
        radial-gradient(circle at 72% 115%, rgba(120, 200, 80, .2), transparent 34%),
        var(--app-surface);
}

.admin-page-head::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: -58px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(120, 200, 80, .3);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(120, 200, 80, .05), 0 0 0 42px rgba(244, 200, 74, .04);
    pointer-events: none;
}

.admin-page-head > * { position: relative; z-index: 1; }
.admin-page-head h2 { margin: 5px 0 7px; font: 700 clamp(1.65rem, 3vw, 2.35rem) "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.admin-page-head p:last-child { max-width: 680px; margin: 0; color: var(--app-muted); font-size: .82rem; line-height: 1.65; }
.admin-metric-grid .dash-metric-card { position: relative; min-width: 0; overflow: hidden; }
.admin-metric-dot { position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 7px rgba(120, 200, 80, .1); }
.admin-metric-dot.is-green { background: var(--admin-accent); }
.admin-metric-dot.is-gold { background: var(--admin-warm); box-shadow: 0 0 0 7px rgba(244, 200, 74, .12); }
.admin-metric-dot.is-blue { background: #5ba8d8; box-shadow: 0 0 0 7px rgba(91, 168, 216, .11); }
.admin-metric-dot.is-coral { background: #e98770; box-shadow: 0 0 0 7px rgba(233, 135, 112, .11); }

.admin-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 20px; }
.admin-trend-list, .admin-pulse-list, .admin-ranked-list { display: grid; gap: 4px; margin-top: 15px; }
.admin-trend-list > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; padding: 9px 0; font-size: .76rem; }
.admin-trend-list i { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--admin-accent), var(--admin-warm)); opacity: .62; }
.admin-trend-list strong { min-width: 92px; text-align: right; }
.admin-pulse-list > div, .admin-ranked-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--app-line); font-size: .77rem; }
.admin-pulse-list > div:last-child, .admin-ranked-list > div:last-child { border-bottom: 0; }
.admin-pulse-list span, .admin-ranked-list small { color: var(--app-muted); }
.admin-ranked-list span { display: grid; gap: 4px; }
.admin-ranked-list > div > span:last-child { text-align: right; }

.admin-count-pill, .admin-status { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.admin-count-pill { padding: 8px 12px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-muted); font-size: .72rem; }
.admin-status { margin: 2px 0; padding: 5px 9px; font-size: .64rem; text-transform: capitalize; }
.admin-status.is-active { color: #347d2b; background: rgba(120, 200, 80, .15); }
.admin-status.is-warn { color: #8b6710; background: rgba(244, 200, 74, .19); }
.admin-status.is-danger { color: #a64237; background: rgba(233, 135, 112, .17); }
.admin-status.is-muted { color: var(--app-muted); background: var(--app-bg); }

.admin-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto auto; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-surface); }
.admin-filter-bar label { display: grid; gap: 7px; color: var(--app-muted); font-size: .68rem; font-weight: 700; }
.admin-filter-bar input, .admin-filter-bar select, .admin-inline-action select { min-height: 41px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 11px; outline: 0; color: var(--app-ink); background: var(--app-bg); font: 600 .74rem "Instrument Sans", sans-serif; }
.admin-filter-bar input:focus, .admin-filter-bar select:focus, .admin-inline-action select:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(120, 200, 80, .11); }
.admin-table-panel { padding: 0; overflow: hidden; }
.admin-wide-table { min-width: 950px; }
.admin-table-primary, .admin-table-secondary { display: block; }
.admin-table-primary { color: var(--app-ink); font-size: .73rem; }
.admin-table-secondary { max-width: 210px; margin-top: 4px; overflow: hidden; color: var(--app-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-error-copy { max-width: 240px; color: #a64237; }
.admin-inline-action { display: flex; align-items: center; gap: 7px; }
.admin-inline-action select { min-height: 34px; padding: 0 7px; font-size: .67rem; }
.admin-inline-action button, .admin-pagination a { min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; color: #fff; background: #17251d; font: 700 .67rem "Instrument Sans", sans-serif; cursor: pointer; }
.admin-empty { padding: 32px !important; color: var(--app-muted); text-align: center; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; color: var(--app-muted); font-size: .72rem; }
.admin-pagination div { display: flex; gap: 8px; }
.admin-pagination a { display: inline-flex; align-items: center; text-decoration: none; }

html[data-theme="dark"] .admin-page-head { background: radial-gradient(circle at 93% 16%, rgba(244, 200, 74, .1), transparent 23%), radial-gradient(circle at 72% 115%, rgba(120, 200, 80, .12), transparent 34%), var(--app-surface); }
html[data-theme="dark"] .admin-status.is-active { color: #a9e68a; }
html[data-theme="dark"] .admin-status.is-warn { color: #f3d16f; }
html[data-theme="dark"] .admin-status.is-danger { color: #f1a493; }

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

@media (max-width: 760px) {
    .admin-console { gap: 16px; }
    .admin-page-head { align-items: flex-start; flex-direction: column; padding: 23px 21px; border-radius: 20px; }
    .admin-filter-bar { grid-template-columns: 1fr 1fr; }
    .admin-search { grid-column: 1 / -1; }
    .admin-filter-bar .dash-button { width: 100%; }
}

@media (max-width: 520px) {
    .admin-metric-grid, .admin-filter-bar { grid-template-columns: 1fr; }
    .admin-search { grid-column: auto; }
    .admin-page-head .dash-button, .admin-page-head .admin-count-pill { width: 100%; justify-content: center; }
    .admin-pagination { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* ---------- Signup ---------- */

.auth-signup-header,
.auth-signup-main,
.auth-signup-footer {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-signup-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--auth-line);
}

.auth-signup-header-action {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--auth-muted);
    font-size: 0.8rem;
}

.auth-signup-header-action a {
    color: var(--auth-accent-dark);
    font-weight: 700;
}

.auth-signup-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
    padding-block: 52px;
}

.auth-signup-intro {
    max-width: 450px;
}

.auth-signup-intro h1 {
    max-width: 11ch;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.1rem, 4vw, 3.45rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.auth-signup-intro > p:not(.auth-login-eyebrow) {
    margin: 20px 0 0;
    color: var(--auth-muted);
    font-size: 0.9rem;
    line-height: 1.72;
}

.auth-signup-benefits {
    display: grid;
    gap: 13px;
    margin-top: 30px;
}

.auth-signup-benefits > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #37443d;
    font-size: 0.8rem;
    font-weight: 600;
}

.auth-signup-benefits > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.1);
}

.auth-signup-card {
    display: grid;
    gap: 22px;
    padding: 32px;
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
}

.auth-signup-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.auth-signup-card-head p {
    margin: 0 0 7px;
    color: var(--auth-accent-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-signup-card-head h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.auth-signup-card-head div > span {
    display: block;
    max-width: 55ch;
    margin-top: 8px;
    color: var(--auth-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.auth-signup-step {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.68rem;
    font-weight: 700;
}

.auth-signup-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-signup-field {
    display: grid;
    gap: 7px;
}

.auth-signup-field > span {
    color: #26332c;
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-signup-field small {
    margin-left: 4px;
    color: #89928d;
    font-size: 0.65rem;
    font-weight: 500;
}

.auth-signup-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    outline: none;
    color: var(--auth-ink);
    background: #fbfcfb;
    font-size: 0.82rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-phone-field {
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    min-height: 48px;
    overflow: hidden;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: #fbfcfb;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-phone-field:focus-within {
    border-color: rgba(14, 138, 95, .66);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, .1);
    transform: translateY(-1px);
}

.auth-phone-country {
    position: relative;
    display: block;
    border-right: 1px solid var(--auth-line);
}

.auth-phone-country select {
    height: 100%;
    min-height: 46px;
    padding: 0 31px 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .7rem;
    font-weight: 650;
    box-shadow: none;
    transform: none;
}

.auth-phone-country > svg {
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--auth-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.auth-signup-field .auth-phone-field > input[type="tel"] {
    min-width: 0;
    min-height: 46px;
    padding-inline: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.auth-signup-field .auth-phone-field > input[type="tel"]:focus,
.auth-phone-country select:focus {
    border: 0;
    box-shadow: none;
    transform: none;
}

.auth-signup-select {
    position: relative;
    display: block;
}

.auth-signup-field select {
    width: 100%;
    min-height: 48px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    outline: none;
    color: var(--auth-ink);
    background: #fbfcfb;
    font-size: .82rem;
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-signup-field select:invalid {
    color: #9aa39e;
}

.auth-signup-select > svg {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--auth-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 160ms ease, transform 160ms ease;
}

.auth-signup-select:focus-within > svg {
    color: var(--auth-accent-dark);
    transform: translateY(-50%) rotate(180deg);
}

.auth-signup-field input::placeholder {
    color: #9aa39e;
}

.auth-signup-field input:focus,
.auth-signup-field select:focus {
    border-color: rgba(14, 138, 95, 0.66);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, 0.1);
    transform: translateY(-1px);
}

.auth-plan-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-plan-selector legend {
    grid-column: 1 / -1;
    margin-bottom: -2px;
    padding: 0;
    color: #26332c;
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-plan-selector legend small {
    margin-left: 6px;
    color: var(--auth-muted);
    font-size: .65rem;
    font-weight: 500;
}

.auth-plan-option {
    margin-top: 12px;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 13px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: #fbfcfb;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-plan-option:hover,
.auth-plan-option:has(input:checked) {
    border-color: rgba(14, 138, 95, 0.42);
    background: rgba(14, 138, 95, 0.045);
}

.auth-plan-option:has(input:checked) {
    box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.08);
}

.auth-plan-option:has(input:focus-visible) {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

.auth-plan-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-plan-radio {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1.5px solid #aab3ae;
    border-radius: 50%;
}

.auth-plan-radio::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-accent);
    transform: scale(0);
    transition: transform 160ms ease;
}

.auth-plan-option input:checked ~ .auth-plan-radio {
    border-color: var(--auth-accent);
}

.auth-plan-option input:checked ~ .auth-plan-radio::after {
    transform: scale(1);
}

.auth-plan-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.auth-plan-copy strong {
    color: var(--auth-ink);
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 0.82rem;
}

.auth-plan-copy small {
    overflow: hidden;
    color: var(--auth-muted);
    font-size: 0.67rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.auth-plan-option > b {
    color: var(--auth-ink);
    font-size: 0.9rem;
}

.auth-plan-option > b small {
    color: var(--auth-muted);
    font-size: 0.62rem;
    font-weight: 500;
}

.auth-signup-terms {
    margin: -8px 0 0;
    color: #7a8580;
    font-size: 0.67rem;
    line-height: 1.5;
    text-align: center;
}

.auth-signup-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--auth-line);
    color: #748079;
    font-size: 0.72rem;
}

.auth-signup-footer a {
    color: var(--auth-accent-dark);
    font-weight: 600;
}

.auth-signup-simple a:focus-visible,
.auth-signup-simple button:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .auth-signup-main {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 680px;
        padding-block: 48px;
    }

    .auth-signup-intro {
        max-width: 620px;
        text-align: center;
    }

    .auth-signup-intro h1,
    .auth-signup-intro > p:not(.auth-login-eyebrow) {
        margin-inline: auto;
    }

    .auth-signup-intro .auth-login-eyebrow {
        justify-content: center;
    }

    .auth-login-intro .auth-login-eyebrow {
        justify-content: center;
    }

    .auth-signup-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auth-signup-benefits > div {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .auth-signup-header,
    .auth-signup-main,
    .auth-signup-footer {
        width: min(100% - 32px, 1160px);
    }

    .auth-signup-header {
        min-height: 70px;
    }

    .auth-signup-header-action > span {
        display: none;
    }

    .auth-signup-main {
        padding-block: 36px;
    }

    .auth-signup-intro h1 {
        font-size: 2.15rem;
    }

    .auth-signup-benefits {
        grid-template-columns: 1fr;
        width: fit-content;
        margin-inline: auto;
    }

    .auth-signup-card {
        gap: 20px;
        padding: 26px 22px;
        border-radius: 18px;
    }

    .auth-signup-card-head,
    .auth-signup-footer {
        flex-direction: column;
    }

    .auth-signup-card-head {
        gap: 12px;
    }

    .auth-signup-form-grid,
    .auth-plan-selector {
        grid-template-columns: 1fr;
    }

    .auth-plan-selector legend {
        grid-column: auto;
    }

    .auth-signup-footer {
        justify-content: center;
        gap: 7px;
        padding-block: 16px;
        text-align: center;
    }
}

.lp-page {
    --lp-bg: #fbfdfc;
    --lp-bg-soft: #f2f7f4;
    --lp-ink: #0e1512;
    --lp-muted: #566259;
    --lp-line: rgba(14, 21, 18, 0.12);
    --lp-accent: #0e8a5f;
    --lp-accent-dark: #0a6a48;
    --lp-accent-soft: rgba(14, 138, 95, 0.14);
    --lp-coral: #ff6b4a;
    --lp-radius-lg: 28px;
    --lp-radius-md: 18px;
    --lp-radius-sm: 12px;
    --lp-shadow: 0 28px 60px rgba(14, 21, 18, 0.12);
    --lp-shadow-soft: 0 16px 34px rgba(14, 21, 18, 0.10);
    --lp-space-1: 8px;
    --lp-space-2: 16px;
    --lp-space-3: 24px;
    --lp-space-4: 32px;
    --lp-space-5: 48px;
    --lp-space-6: 64px;
    --lp-space-7: 96px;

    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--lp-ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        var(--lp-bg);
    -webkit-font-smoothing: antialiased;
}

html:has(.lp-page),
body:has(.lp-page) {
    background-color: #fbfdfc;
}

html:has(.lp-page[data-theme="light"]),
body:has(.lp-page[data-theme="light"]) {
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        #fbfdfc;
}

html:has(.lp-page[data-theme="dark"]),
body:has(.lp-page[data-theme="dark"]) {
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.18), transparent 44%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.10), transparent 40%),
        #091218;
}

.lp-page[data-theme="light"] {
    --lp-bg: #fbfdfc;
    --lp-bg-soft: #f2f7f4;
    --lp-ink: #0e1512;
    --lp-muted: #566259;
    --lp-line: rgba(14, 21, 18, 0.12);
    --lp-accent-soft: rgba(14, 138, 95, 0.14);
    --lp-shadow: 0 28px 60px rgba(14, 21, 18, 0.12);
    --lp-shadow-soft: 0 16px 34px rgba(14, 21, 18, 0.10);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        var(--lp-bg);
}

.lp-page[data-theme="dark"] {
    --lp-bg: #091218;
    --lp-bg-soft: #0f1c24;
    --lp-ink: #edf6f3;
    --lp-muted: #9bb0ad;
    --lp-line: rgba(237, 246, 243, 0.12);
    --lp-accent-soft: rgba(14, 138, 95, 0.24);
    --lp-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
    --lp-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.18), transparent 44%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.10), transparent 40%),
        var(--lp-bg);
}

.lp-page h1,
.lp-page h2,
.lp-page h3,
.lp-page .lp-display {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 0;
}

.lp-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-accent-dark);
    margin: 0 0 var(--lp-space-2);
}

.lp-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-accent);
}

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

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}

.lp-btn-primary {
    background: linear-gradient(135deg, var(--lp-accent) 0%, #19b67c 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(14, 138, 95, 0.24);
}

.lp-btn-primary:hover {
    background: linear-gradient(135deg, var(--lp-accent-dark) 0%, #0e8a5f 100%);
    transform: translateY(-1px);
}

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

.lp-btn-ghost:hover {
    border-color: var(--lp-accent);
    color: var(--lp-accent-dark);
}

.lp-btn-lg {
    padding: 16px 30px;
    font-size: 0.92rem;
}

.lp-btn.is-checking,
.lp-plan-compare-link.is-checking {
    pointer-events: none;
    opacity: 0.82;
}

.lp-btn.is-checking::after,
.lp-plan-compare-link.is-checking::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lp-auth-spin 700ms linear infinite;
}

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

.lp-theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-shrink: 0;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.lp-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--lp-accent);
    background: rgba(14, 138, 95, 0.12);
}

.lp-theme-toggle-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.lp-theme-toggle {
    position: relative;
}

.lp-page[data-theme="light"] .lp-theme-toggle-sun,
.lp-page[data-theme="dark"] .lp-theme-toggle-moon {
    opacity: 0;
    transform: scale(0.7);
}

.lp-page[data-theme="light"] .lp-theme-toggle-moon,
.lp-page[data-theme="dark"] .lp-theme-toggle-sun {
    opacity: 1;
    transform: scale(1);
}

.lp-page[data-theme="light"] .lp-theme-toggle {
    background: rgba(14, 21, 18, 0.04);
}

/* ---------- Top navigation ---------- */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lp-line);
    box-shadow: 0 12px 28px rgba(14, 21, 18, 0.06);
}

.lp-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-3);
    padding: 16px 0;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.96rem;
}

.lp-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-accent) 0%, #1ad08a 100%);
    display: grid;
    place-items: center;
    color: #fff;
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: var(--lp-space-4);
}

.lp-nav-links a {
    position: relative;
    font-size: 0.86rem;
    font-weight: 500;
    /* color: var(--lp-muted); */
}

/* .lp-nav-links a:hover {
    color: var(--lp-ink);
} */

.lp-nav-links > a.is-active {
    color: var(--lp-ink);
    font-weight: 700;
}

.lp-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 138, 95, 0), rgba(14, 138, 95, 0.9), rgba(14, 138, 95, 0));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease;
}

.lp-nav-links a:hover::after,
.lp-nav-links > a.is-active::after {
    transform: scaleX(1);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--lp-space-2);
}

.lp-nav-actions-mobile {
    display: none;
}

.lp-page[data-theme="light"] .lp-nav {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(14, 21, 18, 0.06);
}

.lp-page[data-theme="light"] .lp-logo-strip {
    background: rgba(255, 255, 255, 0.55);
}

.lp-page[data-theme="light"] .lp-logo-row span {
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.86);
    color: rgba(14, 21, 18, 0.72);
}

.lp-page[data-theme="light"] .lp-feature-card {
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.lp-page[data-theme="light"] .lp-feature-icon {
    color: rgba(14, 21, 18, 0.92);
}

.lp-page[data-theme="light"] .lp-step {
    background: var(--lp-bg);
}

.lp-page[data-theme="light"] .lp-step-number {
    background: var(--lp-ink);
    color: #fff;
}

.lp-page[data-theme="light"] .lp-price-card {
    background: var(--lp-bg);
}

.lp-page[data-theme="light"] .lp-price-card-featured {
    background: var(--lp-ink);
    border-color: var(--lp-ink);
}

.lp-page[data-theme="light"] .lp-price-card-featured li svg {
    color: #6bd8ac;
}

.lp-page[data-theme="light"] .lp-testimonial {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.08);
    box-shadow: 0 14px 30px rgba(14, 21, 18, 0.06);
}

.lp-page[data-theme="light"] .lp-avatar {
    background: var(--lp-accent-soft);
    color: var(--lp-accent-dark);
}

.lp-page[data-theme="light"] .lp-faq details {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.10);
}

.lp-page[data-theme="light"] .lp-cta-band {
    background: linear-gradient(135deg, #0b1c16 0%, #12342a 60%, #0e8a5f 100%);
}

.lp-page[data-theme="light"] .lp-footer {
    background: rgba(255, 255, 255, 0.55);
}

.lp-page[data-theme="light"] .lp-nav-links {
    background: transparent;
}

.lp-page[data-theme="dark"] .lp-nav {
    background: rgba(9, 18, 24, 0.86);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.lp-page[data-theme="dark"] .lp-logo-strip {
    background: rgba(255, 255, 255, 0.02);
}

.lp-page[data-theme="dark"] .lp-logo-row span {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(237, 246, 243, 0.76);
}

.lp-page[data-theme="dark"] .lp-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
}

.lp-page[data-theme="dark"] .lp-theme-toggle {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-feature-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-stat {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp-page[data-theme="dark"] .lp-stat strong {
    color: #f4fbf8;
}

.lp-page[data-theme="dark"] .lp-stat span {
    color: rgba(237, 246, 243, 0.68);
}

.lp-page[data-theme="dark"] .lp-feature-icon {
    color: #eaf8f3;
}

.lp-page[data-theme="dark"] .lp-step {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-step-number {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.lp-page[data-theme="dark"] .lp-price-card {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-price-card-featured {
    background: linear-gradient(180deg, #123728 0%, #0e1512 100%);
    border-color: rgba(25, 182, 124, 0.26);
}

.lp-page[data-theme="dark"] .lp-testimonial {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.lp-page[data-theme="dark"] .lp-avatar {
    background: rgba(14, 138, 95, 0.22);
    color: #dff7ee;
}

.lp-page[data-theme="dark"] .lp-faq details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-page[data-theme="dark"] .lp-phone-screen {
    background: #122028;
}

.lp-page[data-theme="dark"] .lp-phone-body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
        #122028;
}

.lp-page[data-theme="dark"] .lp-bubble-in {
    background: rgba(255, 255, 255, 0.08);
    color: #edf6f3;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-page[data-theme="dark"] .lp-bubble-out {
    background: linear-gradient(135deg, rgba(14, 138, 95, 0.3), rgba(14, 138, 95, 0.18));
    color: #eefaf5;
}

.lp-page[data-theme="dark"] .lp-bubble-order {
    background: linear-gradient(135deg, rgba(255, 107, 74, 0.18), rgba(255, 107, 74, 0.08));
    color: #fff1ec;
    border: 1px solid rgba(255, 107, 74, 0.18);
}

.lp-page[data-theme="dark"] .lp-bubble-order .lp-dot {
    background: #ff8b70;
}

.lp-page[data-theme="dark"] .lp-typing {
    background: rgba(255, 255, 255, 0.08);
}

.lp-page[data-theme="dark"] .lp-typing span {
    background: rgba(237, 246, 243, 0.7);
}

.lp-page[data-theme="dark"] .lp-phone-composer {
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(237, 246, 243, 0.52);
    background: rgba(255, 255, 255, 0.06);
}

.lp-page[data-theme="dark"] .lp-phone-home {
    background: rgba(237, 246, 243, 0.72);
}

.lp-page[data-theme="dark"] .lp-chat-time {
    color: rgba(237, 246, 243, 0.48);
}

.lp-page[data-theme="dark"] .lp-cta-band {
    background: linear-gradient(135deg, #0b1c16 0%, #12342a 60%, #0e8a5f 100%);
}

.lp-page[data-theme="dark"] .lp-footer {
    background: rgba(255, 255, 255, 0.03);
}

.lp-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lp-nav-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--lp-line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lp-nav-burger span,
.lp-nav-burger span::before,
.lp-nav-burger span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--lp-ink);
    position: relative;
    transition: transform 160ms ease;
}

.lp-nav-burger span::before,
.lp-nav-burger span::after {
    content: "";
    position: absolute;
}

.lp-nav-burger span::before {
    top: -6px;
}

.lp-nav-burger span::after {
    top: 6px;
}

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

.lp-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 74px);
    display: grid;
    align-items: center;
    padding: 84px 0 76px;
    background:
        linear-gradient(var(--lp-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-line) 1px, transparent 1px),
        radial-gradient(circle at 82% 30%, rgba(14, 138, 95, 0.16), transparent 36%),
        var(--lp-bg);
    background-size: 64px 64px, 64px 64px, auto, auto;
}

.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--lp-bg) 0%, transparent 34%, transparent 72%, var(--lp-bg) 100%);
    z-index: 0;
    pointer-events: none;
}

.lp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-accent), transparent);
    opacity: 0.36;
    z-index: 0;
    pointer-events: none;
}

.lp-hero-ambient {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(4px);
    animation: lp-ambient-drift 9s ease-in-out infinite;
}

.lp-hero-ambient-one {
    width: 360px;
    height: 360px;
    top: -180px;
    right: 16%;
    background: radial-gradient(circle, rgba(25, 182, 124, 0.16), transparent 68%);
}

.lp-hero-ambient-two {
    width: 280px;
    height: 280px;
    left: -130px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(255, 107, 74, 0.1), transparent 68%);
    animation-delay: -4s;
}

@keyframes lp-ambient-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(24px, -18px, 0) scale(1.08); }
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(400px, 0.98fr);
    gap: clamp(54px, 7vw, 104px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.lp-hero h1 {
    font-size: clamp(2.7rem, 5.2vw, 4.65rem);
    line-height: 0.99;
    max-width: 13ch;
    letter-spacing: -0.055em;
}

.lp-hero-content {
    position: relative;
    z-index: 2;
    animation: lp-hero-content-in 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    padding: 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lp-hero-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19b67c;
    box-shadow: 0 0 0 5px rgba(25, 182, 124, 0.12), 0 0 16px rgba(25, 182, 124, 0.65);
    animation: lp-status-pulse 1.8s ease-out infinite;
}

@keyframes lp-status-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(25, 182, 124, 0.1), 0 0 12px rgba(25, 182, 124, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(25, 182, 124, 0), 0 0 20px rgba(25, 182, 124, 0.7); }
}

@keyframes lp-hero-content-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.lp-hero-copy {
    position: relative;
    display: grid;
    gap: 0;
    min-height: 330px;
}

.lp-hero-copy-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: var(--lp-muted);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-hero-copy-meta span:first-child {
    color: var(--lp-accent);
}

.lp-hero-copy-meta span:last-child::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    margin: 0 10px 3px 0;
    background: var(--lp-line);
}

.lp-hero-title,
.lp-hero-sub {
    transition:
        opacity 420ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms ease,
        clip-path 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter, clip-path;
}

.lp-hero-title {
    position: relative;
    display: block;
    color: var(--lp-ink);
    background: none;
    text-shadow: none;
}

.lp-hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    top: -8px;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    box-shadow: 0 0 16px rgba(25, 182, 124, 0.42);
}

.lp-page[data-theme="light"] .lp-hero-title {
    color: #0e1512;
    background: none;
    text-shadow: none;
}

.lp-page[data-theme="light"] .lp-hero-title::after {
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    box-shadow: 0 0 16px rgba(25, 182, 124, 0.32);
}

.lp-hero-copy.is-switching .lp-hero-title,
.lp-hero-copy.is-switching .lp-hero-sub {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(6px);
    clip-path: inset(0 0 100% 0);
}

.lp-hero-copy.is-entering .lp-hero-title,
.lp-hero-copy.is-entering .lp-hero-sub {
    animation: lp-copy-scan-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-hero-copy.is-entering .lp-hero-sub {
    animation-delay: 70ms;
}

@keyframes lp-copy-scan-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(7px); clip-path: inset(100% 0 0 0); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-title,
    .lp-hero-sub {
        transition: none;
    }
}

.lp-hero-sub {
    margin: 22px 0 20px;
    max-width: 54ch;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--lp-muted);
}

.lp-hero-progress {
    width: min(100%, 360px);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--lp-line);
}

.lp-hero-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-origin: left;
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    animation: lp-hero-progress 4.8s linear infinite;
}

.lp-hero-progress span.is-restarting {
    animation: none;
}

@keyframes lp-hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.lp-hero-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: var(--lp-space-2);
    flex-wrap: wrap;
}

.lp-hero-play {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

.lp-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--lp-line);
}

.lp-stat {
    position: relative;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.lp-stat:first-child {
    padding-left: 0;
}

.lp-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 1px;
    height: 36px;
    background: var(--lp-line);
}

.lp-stat strong {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.22rem;
    color: var(--lp-ink);
    letter-spacing: -0.03em;
}

.lp-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--lp-muted);
    line-height: 1.4;
}

.lp-logo-strip {
    padding: var(--lp-space-4) 0;
    border-bottom: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
}

.lp-logo-strip-title {
    margin: 0 0 14px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-muted);
    font-weight: 600;
    text-align: center;
}

.lp-logo-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lp-logo-row span {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.86);
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(14, 21, 18, 0.72);
}

/* ---------- Hero phone mockup ---------- */

.lp-hero-visual {
    position: relative;
    min-height: 600px;
    display: grid;
    place-items: center;
    isolation: isolate;
    animation: lp-hero-visual-in 900ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lp-hero-visual-in {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-hero-radar {
    position: absolute;
    width: min(100%, 500px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-accent-soft), transparent 64%);
    z-index: -1;
}

.lp-hero-radar::before,
.lp-hero-radar::after,
.lp-hero-radar > span {
    content: "";
    position: absolute;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
}

.lp-hero-radar::before { inset: 15%; }
.lp-hero-radar::after { inset: 31%; }
.lp-hero-radar > span:nth-child(1) { inset: 44%; border-color: var(--lp-accent); box-shadow: 0 0 26px var(--lp-accent-soft); }
.lp-hero-radar > span:nth-child(2) { width: 7px; height: 7px; top: 21%; right: 18%; border: 0; background: var(--lp-accent); box-shadow: 0 0 14px var(--lp-accent); }
.lp-hero-radar > span:nth-child(3) { width: 5px; height: 5px; left: 12%; bottom: 27%; border: 0; background: var(--lp-coral); box-shadow: 0 0 12px var(--lp-coral); }

.lp-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    color: var(--lp-ink);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--lp-shadow-soft);
    animation: lp-float-card 4.4s ease-in-out infinite;
}

.lp-float-card-status {
    top: 14%;
    left: -1%;
}

.lp-float-card-order {
    right: -2%;
    bottom: 16%;
    animation-delay: -2.2s;
}

.lp-float-card > span:last-child {
    display: grid;
    gap: 2px;
}

.lp-float-card strong {
    color: var(--lp-ink);
    font-size: 0.72rem;
}

.lp-float-card small {
    color: var(--lp-muted);
    font-size: 0.62rem;
}

.lp-float-icon,
.lp-float-check {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-float-check {
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

@keyframes lp-float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.lp-phone {
    position: relative;
    justify-self: center;
    width: min(100%, 318px);
    border: 2px solid #34383a;
    border-radius: 46px;
    padding: 9px;
    background: linear-gradient(145deg, #25292b, #070808 48%, #262a2c);
    box-shadow: 0 42px 80px rgba(7, 18, 13, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transform: rotate(2.5deg);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-hero-visual:hover .lp-phone {
    transform: rotate(0deg) translateY(-5px);
}

.lp-phone::before {
    content: "";
    position: absolute;
    inset: -24px;
    border-radius: 58px;
    background: linear-gradient(180deg, rgba(25, 182, 124, 0.2), rgba(14, 138, 95, 0.02));
    filter: blur(26px);
    opacity: 0.72;
    z-index: -1;
    pointer-events: none;
}

.lp-phone-screen {
    background: #edf2ef;
    border-radius: 37px;
    overflow: hidden;
    min-height: 538px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.lp-phone-notch {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 148px;
    height: 25px;
    transform: translateX(-50%);
    border-radius: 0 0 17px 17px;
    background: #080909;
}

.lp-phone-notch::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 30px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #15272a;
    box-shadow: inset 0 0 2px #48717a;
}

.lp-phone-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 34px 15px 13px;
    background: linear-gradient(135deg, #08724e, var(--lp-accent));
    color: #fff;
}

.lp-phone-back {
    margin-right: -4px;
    font-size: 1.45rem;
    line-height: 1;
    opacity: 0.9;
}

.lp-phone-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.lp-phone-bar strong {
    display: block;
    font-size: 0.82rem;
}

.lp-phone-bar small {
    display: block;
    font-size: 0.68rem;
    opacity: 0.82;
}

.lp-phone-bar small i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 3px;
    border-radius: 50%;
    background: #8bf0bd;
    box-shadow: 0 0 8px rgba(139, 240, 189, 0.7);
}

.lp-phone-body {
    flex: 1;
    padding: 13px 13px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(circle at 20% 20%, rgba(14, 138, 95, 0.05), transparent 28%),
        #edf2ef;
}

.lp-chat-time {
    align-self: center;
    margin-bottom: 2px;
    color: #7f8b85;
    font-size: 0.57rem;
    font-weight: 600;
}

.lp-bubble {
    max-width: 84%;
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 0.7rem;
    line-height: 1.45;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(14, 21, 18, 0.07);
    animation: lp-chat-message-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-bubble:nth-of-type(2) { animation-delay: 280ms; }
.lp-bubble:nth-of-type(3) { animation-delay: 560ms; }
.lp-bubble:nth-of-type(4) { animation-delay: 840ms; }
.lp-bubble:nth-of-type(5) { animation-delay: 1120ms; }
.lp-bubble:nth-of-type(6) { animation-delay: 1400ms; }

@keyframes lp-chat-message-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-bubble-in {
    border-bottom-left-radius: 4px;
}

.lp-bubble-out {
    align-self: flex-end;
    color: #0d3b2c;
    background: #d8f3e6;
    border-bottom-right-radius: 4px;
}

.lp-bubble-order {
    align-self: flex-end;
    background: linear-gradient(135deg, #0e1512, #123728);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom-right-radius: 4px;
}

.lp-bubble-order .lp-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--lp-coral);
    flex-shrink: 0;
}

.lp-typing {
    display: inline-flex;
    gap: 4px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    box-shadow: var(--lp-shadow-soft);
    width: fit-content;
    animation: lp-chat-message-in 520ms 1680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-phone-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 12px 8px;
    padding: 7px 7px 7px 12px;
    border: 1px solid rgba(14, 21, 18, 0.1);
    border-radius: 999px;
    color: #839089;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.64rem;
}

.lp-phone-composer b {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

.lp-phone-home {
    width: 104px;
    height: 4px;
    align-self: center;
    margin-bottom: 7px;
    border-radius: 999px;
    background: rgba(14, 21, 18, 0.72);
}

.lp-typing span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-muted);
    opacity: 0.5;
    animation: lp-typing-bounce 1.2s infinite ease-in-out;
}

.lp-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.lp-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes lp-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ---------- Section shells ---------- */

.lp-section {
    padding: var(--lp-space-6) 0;
}

.lp-section-soft {
    background:
        radial-gradient(circle at 18% 18%, rgba(14, 138, 95, 0.10), transparent 48%),
        radial-gradient(circle at 80% 0%, rgba(255, 107, 74, 0.08), transparent 42%),
        var(--lp-bg-soft);
}

.lp-section-head {
    max-width: 640px;
    margin: 0 0 var(--lp-space-5);
}

.lp-section-head h2 {
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.15;
}

.lp-section-head p {
    margin: var(--lp-space-2) 0 0;
    color: var(--lp-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.lp-section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lp-space-3);
    flex-wrap: wrap;
}

/* ---------- Feature grid ---------- */

.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-feature-card {
    padding: var(--lp-space-3);
    border-radius: var(--lp-radius-md);
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.lp-feature-card:hover {
    box-shadow: var(--lp-shadow-soft);
    border-color: transparent;
    transform: translateY(-2px);
}

.lp-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--lp-radius-sm);
    background: linear-gradient(135deg, rgba(14, 138, 95, 0.18), rgba(255, 107, 74, 0.12));
    color: rgba(14, 21, 18, 0.92);
    display: grid;
    place-items: center;
    margin-bottom: var(--lp-space-2);
}

.lp-feature-card h3 {
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.lp-feature-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--lp-muted);
}

.lp-feature-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-3);
    margin-top: var(--lp-space-4);
    padding: 16px 18px 16px 22px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg-soft);
}

.lp-feature-more > span {
    color: var(--lp-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ---------- How it works ---------- */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lp-space-3);
    counter-reset: lp-step;
}

.lp-step {
    position: relative;
    padding: var(--lp-space-3) var(--lp-space-3) var(--lp-space-4);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg);
    border: 1px solid var(--lp-line);
}

.lp-step-number {
    counter-increment: lp-step;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--lp-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    margin-bottom: var(--lp-space-2);
}

.lp-step-number::before {
    content: counter(lp-step, decimal-leading-zero);
}

.lp-step h3 {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.lp-step p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--lp-muted);
    line-height: 1.55;
}

.lp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 36px;
    left: calc(100% + 12px);
    width: calc(var(--lp-space-3) - 12px);
    height: 1px;
    background: var(--lp-line);
    display: none;
}

@media (min-width: 901px) {
    .lp-step:not(:last-child)::after {
        display: block;
    }
}

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

.lp-billing-switch {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto 32px;
    padding: 4px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--lp-bg-soft) 90%, transparent);
}

.lp-billing-switch button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--lp-muted);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.lp-billing-switch button.is-active {
    color: #fff;
    background: var(--lp-ink);
    box-shadow: 0 8px 18px rgba(14, 21, 18, 0.14);
}

.lp-billing-switch button span {
    padding: 3px 6px;
    border-radius: 999px;
    color: #31510f;
    background: #c5ed72;
    font-size: 0.56rem;
    white-space: nowrap;
}

.lp-page[data-theme="dark"] .lp-billing-switch {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-billing-switch button.is-active {
    color: #12200e;
    background: #c5ed72;
}

.lp-page[data-theme="dark"] .lp-billing-switch button.is-active span {
    color: #dff4b6;
    background: rgba(18, 32, 14, 0.42);
}

.lp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
    align-items: stretch;
}

.lp-pricing-auth-hint {
    margin: 14px auto 0;
    max-width: 760px;
    padding: 12px 16px;
    border: 1px solid rgba(14, 138, 95, 0.12);
    border-radius: 16px;
    background: rgba(14, 138, 95, 0.06);
    color: var(--lp-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.lp-price-card {
    display: flex;
    flex-direction: column;
    padding: var(--lp-space-4);
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-line);
    background: var(--lp-bg);
}

.lp-price-card-featured {
    background: var(--lp-ink);
    color: #fff;
    border-color: var(--lp-ink);
    box-shadow: var(--lp-shadow);
}

.lp-price-card-featured .lp-price-tier,
.lp-price-card-featured .lp-price-amount small,
.lp-price-card-featured .lp-price-audience,
.lp-price-card-featured .lp-price-desc,
.lp-price-card-featured ul li {
    color: rgba(255, 255, 255, 0.72);
}

.lp-price-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--lp-coral);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--lp-space-2);
}

.lp-price-tier {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lp-muted);
    margin-bottom: 6px;
}

.lp-price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0 0 2px;
    transition: opacity 120ms ease, transform 120ms ease;
}

.lp-price-amount del {
    color: var(--lp-muted);
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration-color: var(--lp-coral);
    text-decoration-thickness: 1.5px;
}

.lp-price-card-featured .lp-price-amount del {
    color: rgba(255, 255, 255, 0.48);
}

.lp-price-amount.is-updating {
    opacity: 0.45;
    transform: translateY(3px);
}

.lp-price-amount small {
    color: var(--lp-muted);
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0;
}

.lp-price-audience {
    margin: 0 0 12px;
    color: var(--lp-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.lp-price-desc {
    font-size: 0.82rem;
    color: var(--lp-muted);
    margin: 0 0 var(--lp-space-3);
    line-height: 1.5;
}

.lp-price-card ul {
    list-style: none;
    margin: 0 0 var(--lp-space-4);
    padding: 0;
    display: grid;
    gap: 10px;
    flex: 1;
}

.lp-price-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--lp-ink);
}

.lp-price-card-featured li {
    color: rgba(255, 255, 255, 0.9);
}

.lp-price-card li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--lp-accent);
}

.lp-price-card-featured li svg {
    color: #6bd8ac;
}

/* ---------- Testimonials ---------- */

.lp-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-testimonial {
    padding: var(--lp-space-4);
    border-radius: var(--lp-radius-md);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.08);
    box-shadow: 0 14px 30px rgba(14, 21, 18, 0.06);
}

.lp-testimonial p {
    margin: 0 0 var(--lp-space-3);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--lp-ink);
}

.lp-testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    background: var(--lp-accent-soft);
    color: var(--lp-accent-dark);
    display: grid;
    place-items: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    line-height: 1;
}

.lp-testimonial-person strong {
    display: block;
    font-size: 0.82rem;
}

.lp-testimonial-person > span:not(.lp-avatar),
.lp-testimonial-person > span:not(.lp-avatar) > span {
    display: block;
    font-size: 0.76rem;
    color: var(--lp-muted);
}

/* ---------- FAQ ---------- */

.lp-faq {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: var(--lp-space-2);
}

.lp-faq details {
    border: 1px solid rgba(14, 21, 18, 0.10);
    border-radius: var(--lp-radius-md);
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.84);
}

.lp-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

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

.lp-faq summary::after {
    content: "+";
    font-size: 1.3rem;
    color: var(--lp-muted);
    transition: transform 160ms ease;
}

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

.lp-faq p {
    margin: 12px 0 0;
    color: var(--lp-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

/* ---------- Final CTA ---------- */

.lp-cta-band {
    border-radius: var(--lp-radius-lg);
    background: linear-gradient(135deg, #0b1c16 0%, #134233 60%, #0e8a5f 100%);
    color: #fff;
    padding: var(--lp-space-6) var(--lp-space-5);
    text-align: center;
}

.lp-cta-band h2 {
    color: #fff;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    max-width: 26ch;
    margin: 0 auto;
}

.lp-cta-band p {
    color: rgba(255, 255, 255, 0.72);
    margin: var(--lp-space-2) auto var(--lp-space-4);
    max-width: 48ch;
}

.lp-cta-band .lp-hero-actions {
    justify-content: center;
}

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

.lp-footer {
    padding: var(--lp-space-6) 0 var(--lp-space-4);
    border-top: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--lp-space-4);
    margin-bottom: var(--lp-space-5);
}

.lp-footer-brand p {
    margin: var(--lp-space-2) 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.84rem;
    font-weight: 100;
    line-height: 1.6;
    max-width: 34ch;
}

.lp-social-row {
    display: flex;
    gap: 10px;
}

.lp-social-row a {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    display: grid;
    place-items: center;
    color: var(--lp-muted);
}

.lp-social-row a:hover {
    color: var(--lp-accent-dark);
    border-color: var(--lp-accent);
}

.lp-footer-col h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8rem;
    margin-bottom: var(--lp-space-2);
}

.lp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lp-footer-col a,
.lp-footer-col address {
    font-size: 0.82rem;
    color: var(--lp-muted);
    font-style: normal;
}

.lp-footer-col a:hover {
    color: var(--lp-ink);
}

.lp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-2);
    padding-top: var(--lp-space-3);
    border-top: 1px solid var(--lp-line);
    font-size: 0.78rem;
    color: var(--lp-muted);
    flex-wrap: wrap;
}

/* ---------- Marketing inner pages ---------- */

.lp-inner-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 82px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-inner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--lp-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 90%);
}

.lp-inner-hero .lp-container {
    position: relative;
    z-index: 1;
}

.lp-inner-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: var(--lp-space-6);
}

.lp-inner-hero h1 {
    max-width: 13ch;
    font-size: clamp(2.55rem, 5.6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.lp-inner-hero p:not(.lp-eyebrow) {
    max-width: 60ch;
    margin: var(--lp-space-3) 0 0;
    color: var(--lp-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.lp-inner-hero .lp-hero-actions {
    margin-top: var(--lp-space-4);
}

.lp-inner-hero-centered {
    text-align: center;
}

.lp-inner-hero-centered .lp-eyebrow {
    justify-content: center;
}

.lp-inner-hero-centered h1,
.lp-inner-hero-centered p:not(.lp-eyebrow) {
    margin-inline: auto;
}

.lp-inner-section-first {
    padding-top: var(--lp-space-6);
}

.lp-inner-orbit {
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-accent-soft), transparent 64%);
}

.lp-inner-orbit::before,
.lp-inner-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
}

.lp-inner-orbit::before {
    inset: 15%;
}

.lp-inner-orbit::after {
    inset: 32%;
}

.lp-orbit-core {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-accent), #19b67c);
    box-shadow: 0 24px 44px rgba(14, 138, 95, 0.3);
}

.lp-orbit-chip {
    position: absolute;
    z-index: 3;
    padding: 9px 13px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    color: var(--lp-ink);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    font-size: 0.72rem;
    font-weight: 700;
    animation: lp-orbit-float 4s ease-in-out infinite;
}

.lp-orbit-chip-one {
    top: 14%;
    right: 5%;
}

.lp-orbit-chip-two {
    bottom: 18%;
    right: -3%;
    animation-delay: -1.3s;
}

.lp-orbit-chip-three {
    bottom: 10%;
    left: 2%;
    animation-delay: -2.6s;
}

@keyframes lp-orbit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.lp-btn-on-dark {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.lp-btn-on-dark:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}

.lp-pricing-note {
    max-width: 74ch;
    margin: var(--lp-space-4) auto 0;
    color: var(--lp-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.lp-plan-comparison {
    margin-top: clamp(58px, 8vw, 92px);
}

.lp-plan-comparison-head {
    max-width: 650px;
    margin: 0 auto 28px;
    text-align: center;
}

.lp-plan-comparison-head .lp-eyebrow {
    margin-bottom: 9px;
}

.lp-plan-comparison-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.lp-plan-comparison-head > p:last-child {
    margin: 11px 0 0;
    color: var(--lp-muted);
    font-size: .78rem;
    line-height: 1.6;
}

.lp-plan-comparison-scroll {
    overflow-x: auto;
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    scrollbar-color: var(--lp-line) transparent;
}

.lp-plan-comparison-scroll:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
}

.lp-plan-comparison-table {
    width: 100%;
    min-width: 760px;
    border-spacing: 0;
    color: var(--lp-ink);
    font-size: .72rem;
    text-align: center;
}

.lp-plan-comparison-table th,
.lp-plan-comparison-table td {
    min-width: 155px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-plan-comparison-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 210px;
    min-width: 210px;
    color: var(--lp-muted);
    background: var(--lp-bg);
    text-align: left;
}

.lp-plan-comparison-table thead th {
    padding-block: 20px;
    color: var(--lp-ink);
    background: var(--lp-bg-soft);
}

.lp-plan-comparison-table thead th:first-child {
    z-index: 3;
    background: var(--lp-bg-soft);
}

.lp-plan-comparison-table thead strong,
.lp-plan-comparison-table thead small,
.lp-plan-comparison-table td small {
    display: block;
}

.lp-plan-comparison-table thead strong {
    font-size: .84rem;
}

.lp-plan-comparison-table thead small {
    width: fit-content;
    margin: 5px auto 0;
    padding: 3px 7px;
    border-radius: 999px;
    color: #31510f;
    background: #f5dc62;
    font-size: .52rem;
    font-weight: 750;
}

.lp-plan-comparison-table td strong {
    font-size: .76rem;
}

.lp-plan-comparison-table td small {
    margin-top: 2px;
    color: var(--lp-muted);
    font-size: .54rem;
}

.lp-plan-comparison-table .is-featured {
    background: color-mix(in srgb, var(--lp-accent-soft) 48%, var(--lp-bg));
}

.lp-plan-comparison-table thead .is-featured {
    background: color-mix(in srgb, var(--lp-accent-soft) 60%, var(--lp-bg-soft));
}

.lp-plan-comparison-table tbody tr:hover td,
.lp-plan-comparison-table tbody tr:hover th {
    background-color: color-mix(in srgb, var(--lp-accent-soft) 35%, var(--lp-bg));
}

.lp-plan-check {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    margin-right: 3px;
    border-radius: 50%;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    vertical-align: middle;
}

.lp-plan-comparison-table tfoot th,
.lp-plan-comparison-table tfoot td {
    border-bottom: 0;
    padding-block: 17px;
}

.lp-plan-compare-link {
    display: inline-flex;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 9px;
    color: var(--lp-ink);
    font-size: .62rem;
    font-weight: 750;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.lp-plan-compare-link:hover,
.lp-plan-compare-link:focus-visible {
    border-color: var(--lp-accent);
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    outline: none;
}

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

.lp-page[data-theme="dark"] .lp-plan-comparison-scroll,
.lp-page[data-theme="dark"] .lp-plan-comparison-table tr > :first-child {
    background: #111d18;
}

.lp-page[data-theme="dark"] .lp-plan-comparison-table thead th,
.lp-page[data-theme="dark"] .lp-plan-comparison-table thead th:first-child {
    background: #15241d;
}

.lp-page[data-theme="dark"] .lp-plan-comparison-table .is-featured {
    background: rgba(190, 232, 79, .055);
}

@media (max-width: 640px) {
    .lp-plan-comparison-scroll {
        margin-inline: -8px;
        border-radius: 16px;
    }

    .lp-plan-comparison-table tr > :first-child {
        width: 160px;
        min-width: 160px;
    }

    .lp-plan-comparison-table th,
    .lp-plan-comparison-table td {
        min-width: 140px;
        padding: 13px 14px;
    }
}

.lp-payment-options {
    margin-top: clamp(54px, 8vw, 90px);
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--lp-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 0, rgba(190, 232, 79, 0.14), transparent 35%),
        color-mix(in srgb, var(--lp-bg-soft) 88%, transparent);
    box-shadow: var(--lp-shadow-soft);
}

.lp-payment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.lp-payment-heading > div {
    max-width: 650px;
}

.lp-payment-heading .lp-eyebrow {
    margin-bottom: 10px;
}

.lp-payment-heading h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.18;
}

.lp-payment-heading > div > p:last-child {
    max-width: 60ch;
    margin: 11px 0 0;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.lp-payment-secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid rgba(14, 138, 95, 0.16);
    border-radius: 999px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    font-size: 0.68rem;
    font-weight: 700;
}

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

.lp-payment-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 17px;
    padding: 24px;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--lp-bg) 92%, transparent);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lp-payment-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 138, 95, 0.24);
    box-shadow: 0 18px 36px rgba(14, 21, 18, 0.08);
}

.lp-payment-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-payment-card-icon-momo {
    color: #4d3c00;
    background: linear-gradient(135deg, #ffe35a, #ffcb32);
}

.lp-payment-label {
    color: var(--lp-accent-dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-payment-card h3 {
    margin: 5px 0 0;
    font-size: 1rem;
}

.lp-payment-card p {
    margin: 8px 0 0;
    color: var(--lp-muted);
    font-size: 0.74rem;
    line-height: 1.58;
}

.lp-payment-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 17px;
}

.lp-payment-brand {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    color: var(--lp-ink);
    background: var(--lp-bg);
    font-size: 0.6rem;
    font-weight: 800;
}

.lp-payment-brand-mtn { color: #312700; background: #ffdc32; border-color: #ffdc32; }
.lp-payment-brand-telecel { color: #fff; background: #d71920; border-color: #d71920; }
.lp-payment-brand-at { color: #fff; background: #157347; border-color: #157347; }
.lp-payment-brand-visa { color: #163a8c; font-size: 0.7rem; font-style: italic; }

.lp-payment-brand-mastercard i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #eb001b;
}

.lp-payment-brand-mastercard i + i {
    margin-left: -8px;
    background: rgba(247, 158, 27, 0.86);
}

.lp-payment-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    color: var(--lp-muted);
    font-size: 0.68rem;
    line-height: 1.5;
    text-align: center;
}

.lp-payment-footnote svg {
    flex: 0 0 auto;
}

.lp-page[data-theme="dark"] .lp-payment-options {
    background:
        radial-gradient(circle at 92% 0, rgba(190, 232, 79, 0.1), transparent 35%),
        rgba(255, 255, 255, 0.025);
}

.lp-page[data-theme="dark"] .lp-payment-card {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-payment-brand:not(.lp-payment-brand-mtn):not(.lp-payment-brand-telecel):not(.lp-payment-brand-at) {
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 760px) {
    .lp-payment-heading {
        flex-direction: column;
        gap: 18px;
    }

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

@media (max-width: 480px) {
    .lp-payment-options {
        margin-top: 48px;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .lp-payment-secure {
        align-self: flex-start;
    }

    .lp-payment-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
        padding: 19px 16px;
        border-radius: 17px;
    }

    .lp-payment-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .lp-payment-card-icon svg {
        width: 23px;
        height: 23px;
    }

    .lp-payment-brands {
        grid-column: 1 / -1;
    }

    .lp-payment-footnote {
        align-items: flex-start;
        text-align: left;
    }
}

.lp-payment-simple {
    margin-top: clamp(42px, 6vw, 66px);
    text-align: center;
}

.lp-payment-simple h2 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.35;
}

.lp-payment-simple-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.lp-payment-channel {
    min-width: 96px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    color: var(--lp-ink);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    font-size: 0.68rem;
    box-shadow: none;
}

.lp-payment-channel b,
.lp-payment-channel small {
    line-height: 1;
}

.lp-payment-channel small {
    font-size: 0.55rem;
    font-weight: 700;
}

.lp-payment-channel-mtn {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
}

.lp-payment-channel-mtn b {
    padding: 3px 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.58rem;
}

.lp-payment-channel-telecel {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
}

.lp-payment-channel-telecel b {
    font-size: 1rem;
    font-style: italic;
}

.lp-payment-channel-at {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
}

.lp-payment-channel-at b {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.lp-payment-channel-visa {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
}

.lp-payment-channel-visa b {
    font-size: 0.82rem;
    font-style: italic;
    letter-spacing: -0.04em;
}

.lp-payment-channel-mastercard {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
}

.lp-mastercard-mark {
    display: flex;
}

.lp-mastercard-mark i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #727b76;
}

.lp-mastercard-mark i + i {
    margin-left: -6px;
    background: rgba(114, 123, 118, 0.55);
}

.lp-page[data-theme="dark"] .lp-payment-channel {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(237, 246, 243, 0.68);
}

@media (max-width: 480px) {
    .lp-payment-simple-methods {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-payment-channel {
        min-width: 0;
        width: 100%;
    }

    .lp-payment-channel:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 340px) {
    .lp-billing-switch {
        width: 100%;
    }

    .lp-billing-switch button {
        flex: 1;
        justify-content: center;
        padding-inline: 10px;
    }

    .lp-payment-simple-methods {
        grid-template-columns: 1fr;
    }

    .lp-payment-channel:last-child {
        grid-column: auto;
    }
}

.lp-process-list {
    display: grid;
    gap: var(--lp-space-3);
    counter-reset: process;
}

.lp-process-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--lp-space-4);
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
}

.lp-process-list article > span {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--lp-accent);
    font-size: 1.5rem;
    font-weight: 800;
}

.lp-process-list .lp-eyebrow {
    margin-bottom: 8px;
}

.lp-process-list h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.lp-process-list article > div > p:last-child {
    max-width: 70ch;
    margin: 9px 0 0;
    color: var(--lp-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.lp-process-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-faq-page-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
    align-items: start;
    gap: var(--lp-space-6);
}

.lp-faq-aside {
    position: sticky;
    top: 112px;
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg-soft);
}

.lp-faq-aside h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.lp-faq-aside > p:not(.lp-eyebrow) {
    margin: 12px 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.lp-faq-page-grid .lp-faq-list {
    display: grid;
    gap: 12px;
}

.lp-faq-page-grid details {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg);
}

.lp-faq-page-grid summary {
    padding: 20px 22px;
    color: var(--lp-ink);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.lp-faq-page-grid details p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.lp-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-contact-card {
    display: block;
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    transition: transform 160ms ease, border-color 160ms ease;
}

a.lp-contact-card:hover {
    transform: translateY(-3px);
    border-color: var(--lp-accent);
}

.lp-contact-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-contact-card > p {
    margin: 24px 0 7px;
    color: var(--lp-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lp-contact-card h2 {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.35;
}

.lp-contact-card small {
    display: block;
    margin-top: 7px;
    color: var(--lp-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.lp-contact-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-5);
    margin-top: var(--lp-space-5);
    padding: var(--lp-space-5);
    border-radius: var(--lp-radius-lg);
    color: #fff;
    background: linear-gradient(135deg, #0e1512, #123728);
}

.lp-contact-banner .lp-eyebrow {
    color: #66dcaa;
}

.lp-contact-banner h2 {
    max-width: 22ch;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.lp-contact-banner div > p:last-child {
    max-width: 62ch;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    line-height: 1.6;
}

.lp-legal-hero {
    padding-bottom: 64px;
}

.lp-legal-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.lp-legal-hero small {
    display: block;
    margin-top: var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.72rem;
}

.lp-legal-content {
    width: min(760px, calc(100% - 48px));
}

.lp-legal-content h2 {
    margin-top: var(--lp-space-5);
    font-size: 1.25rem;
}

.lp-legal-content h2:first-child {
    margin-top: 0;
}

.lp-legal-content p {
    margin: 12px 0 0;
    color: var(--lp-muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

.lp-legal-content a {
    color: var(--lp-accent-dark);
    font-weight: 600;
}

.lp-inner-cta-section {
    padding-top: 0;
}

/* ---------- Motion & accessibility ---------- */

.lp-page a:focus-visible,
.lp-page button:focus-visible,
.lp-page summary:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lp-page * {
        animation: none !important;
        transition: none !important;
    }
}

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

@media (max-width: 1080px) {
    .lp-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lp-inner-hero-grid,
    .lp-faq-page-grid {
        grid-template-columns: 1fr;
    }

    .lp-inner-orbit {
        width: min(100%, 320px);
    }

    .lp-faq-aside {
        position: static;
    }

    .lp-contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-contact-card:last-child {
        grid-column: 1 / -1;
    }

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

    .lp-hero-visual {
        min-height: 560px;
        margin-top: var(--lp-space-3);
    }

    .lp-phone {
        width: min(100%, 280px);
    }

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

    .lp-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--lp-space-2);
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--lp-line);
        padding: var(--lp-space-3) 24px;
        display: none;
    }

    .lp-nav-actions {
        display: none;
    }

    .lp-nav-burger {
        display: flex;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-links,
    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-actions-mobile {
        display: flex;
    }

    .lp-nav-actions-mobile {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0 24px var(--lp-space-3);
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-links {
        position: absolute;
        margin-top: 1px;
    }

    .lp-steps,
    .lp-pricing-grid,
    .lp-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .lp-inner-hero {
        padding: 64px 0 52px;
    }

    .lp-inner-hero h1 {
        font-size: 2.55rem;
    }

    .lp-inner-hero-grid {
        gap: var(--lp-space-5);
    }

    .lp-process-list article {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 24px 20px;
    }

    .lp-process-icon {
        display: none;
    }

    .lp-contact-grid {
        grid-template-columns: 1fr;
    }

    .lp-contact-card:last-child {
        grid-column: auto;
    }

    .lp-contact-banner {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--lp-space-4) var(--lp-space-3);
    }

    .lp-legal-content {
        width: min(100% - 32px, 760px);
    }

    .lp-container {
        width: min(100% - 32px, 1180px);
    }

    .lp-feature-grid {
        grid-template-columns: 1fr;
    }

    .lp-feature-more {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .lp-hero {
        min-height: auto;
        padding: 58px 0 48px;
        background-size: 42px 42px, 42px 42px, auto, auto;
    }

    .lp-hero h1 {
        font-size: clamp(2.35rem, 11vw, 3.15rem);
    }

    .lp-hero-copy {
        min-height: 330px;
    }

    .lp-hero-status {
        font-size: 0.62rem;
    }

    .lp-stat {
        padding: 0 10px;
    }

    .lp-stat strong {
        font-size: 1rem;
    }

    .lp-stat span {
        font-size: 0.62rem;
    }

    .lp-hero-visual {
        min-height: 520px;
        margin-top: 10px;
    }

    .lp-hero-radar {
        width: 390px;
        max-width: 112vw;
    }

    .lp-float-card-status {
        top: 10%;
        left: -2%;
    }

    .lp-float-card-order {
        right: -2%;
        bottom: 12%;
    }

    .lp-phone {
        width: min(100%, 270px);
        border-radius: 41px;
    }

    .lp-phone-screen {
        min-height: 500px;
        border-radius: 33px;
    }

    .lp-cta-band {
        padding: var(--lp-space-4) var(--lp-space-3);
    }

    .lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Mobile refinement ---------- */

@media (max-width: 600px) {
    .lp-page {
        overflow-x: clip;
    }

    .lp-nav-row {
        min-height: 64px;
        padding: 10px 0;
    }

    .lp-brand {
        gap: 8px;
        font-size: 0.82rem;
    }

    .lp-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .lp-nav-burger {
        width: 42px;
        height: 42px;
    }

    .lp-nav-links {
        max-height: calc(100vh - 64px);
        gap: 0;
        overflow-y: auto;
        padding: 12px 16px 18px;
        background: color-mix(in srgb, var(--lp-bg) 96%, transparent);
        backdrop-filter: blur(20px);
        box-shadow: 0 20px 38px rgba(14, 21, 18, 0.12);
    }

    .lp-page[data-theme="light"] .lp-nav-links {
        background: rgba(251, 253, 252, 0.97);
    }

    .lp-page[data-theme="dark"] .lp-nav-links {
        background: rgba(9, 18, 24, 0.97);
        box-shadow: 0 20px 38px rgba(0, 0, 0, 0.3);
    }

    .lp-nav-links > a {
        width: 100%;
        padding: 13px 2px;
        border-bottom: 1px solid var(--lp-line);
        font-size: 0.84rem;
    }

    .lp-nav-links > a::after {
        display: none;
    }

    .lp-nav-links > a.is-active {
        margin-inline: -8px;
        padding-inline: 10px;
        border-bottom-color: transparent;
        border-radius: 10px;
        color: var(--lp-accent-dark);
        background: color-mix(in srgb, var(--lp-accent) 11%, transparent);
    }

    .lp-nav-actions-mobile {
        gap: 9px;
        padding: 15px 0 0;
    }

    .lp-nav-actions-mobile .lp-theme-toggle {
        margin-bottom: 4px;
    }

    .lp-nav-toggle:focus-visible ~ .lp-nav-row .lp-nav-burger {
        outline: 2px solid var(--lp-accent);
        outline-offset: 2px;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span {
        background: transparent;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .lp-hero {
        padding: 46px 0 38px;
    }

    .lp-hero-grid {
        gap: 34px;
    }

    .lp-hero-status {
        max-width: 100%;
        margin-bottom: 18px;
        padding: 7px 10px;
        letter-spacing: 0.025em;
        white-space: nowrap;
    }

    .lp-hero-copy {
        min-height: 318px;
    }

    .lp-hero-copy-meta {
        margin-bottom: 12px;
        font-size: 0.61rem;
    }

    .lp-hero-copy-meta span:last-child::before {
        width: 18px;
        margin-right: 7px;
    }

    .lp-hero h1 {
        max-width: 12ch;
        font-size: clamp(2.25rem, 10.7vw, 2.8rem);
        line-height: 1.01;
    }

    .lp-hero-sub {
        margin: 18px 0;
        font-size: 0.82rem;
        line-height: 1.65;
    }

    .lp-hero-progress {
        width: 100%;
    }

    .lp-hero-actions {
        width: 100%;
        gap: 10px;
    }

    .lp-hero-actions .lp-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 18px;
    }

    .lp-stat-grid {
        margin-top: 28px;
        padding-top: 18px;
    }

    .lp-stat {
        padding: 0 8px;
    }

    .lp-stat:first-child {
        padding-left: 0;
    }

    .lp-stat strong {
        font-size: 0.96rem;
    }

    .lp-stat span {
        font-size: 0.58rem;
        line-height: 1.35;
    }

    .lp-stat:not(:last-child)::after {
        height: 32px;
    }

    .lp-hero-visual {
        min-height: 484px;
        margin-top: 0;
    }

    .lp-hero-radar {
        width: 340px;
        max-width: 106vw;
    }

    .lp-phone {
        width: min(100%, 250px);
        border-radius: 39px;
        transform: none;
    }

    .lp-hero-visual:hover .lp-phone {
        transform: translateY(-3px);
    }

    .lp-phone-screen {
        min-height: 462px;
        border-radius: 31px;
    }

    .lp-phone-notch {
        width: 126px;
        height: 22px;
    }

    .lp-phone-bar {
        padding: 30px 13px 11px;
    }

    .lp-phone-avatar {
        width: 30px;
        height: 30px;
    }

    .lp-phone-body {
        gap: 6px;
        padding: 10px 11px 8px;
    }

    .lp-bubble {
        padding: 7px 9px;
        font-size: 0.62rem;
    }

    .lp-typing {
        padding: 8px 10px;
    }

    .lp-phone-composer {
        margin-inline: 10px;
        padding-block: 5px;
    }

    .lp-float-card {
        padding: 9px 10px;
        border-radius: 12px;
    }

    .lp-float-card-status {
        top: 5%;
        left: 0;
    }

    .lp-float-card-order {
        right: 0;
        bottom: 7%;
    }

    .lp-float-icon,
    .lp-float-check {
        width: 28px;
        height: 28px;
    }

    .lp-logo-strip {
        padding: 24px 0;
    }

    .lp-logo-strip-title {
        text-align: left;
    }

    .lp-logo-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .lp-logo-row::-webkit-scrollbar,
    .lp-testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .lp-logo-row span {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .lp-section {
        padding: 48px 0;
    }

    .lp-section-head {
        margin-bottom: 30px;
    }

    .lp-section-head h2 {
        font-size: 1.5rem;
        line-height: 1.18;
    }

    .lp-section-head p {
        font-size: 0.82rem;
    }

    .lp-feature-grid {
        gap: 14px;
    }

    .lp-feature-card {
        padding: 20px;
    }

    .lp-feature-more {
        gap: 16px;
        margin-top: 18px;
    }

    .lp-feature-more .lp-btn {
        width: 100%;
    }

    .lp-steps {
        gap: 12px;
    }

    .lp-step {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px;
    }

    .lp-step-number {
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .lp-step h3,
    .lp-step p {
        grid-column: 2;
    }

    .lp-step h3 {
        margin: 1px 0 5px;
    }

    .lp-pricing-grid {
        gap: 16px;
    }

    .lp-price-card {
        padding: 24px 22px;
        border-radius: 22px;
    }

    .lp-testimonial-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(86%, 1fr);
        gap: 14px;
        overflow-x: auto;
        margin-right: -16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .lp-testimonial {
        min-height: 230px;
        padding: 22px;
        scroll-snap-align: start;
    }

    .lp-faq {
        gap: 10px;
    }

    .lp-faq details {
        padding: 16px 17px;
    }

    .lp-faq summary {
        gap: 14px;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .lp-faq p {
        font-size: 0.78rem;
    }

    .lp-cta-band {
        padding: 30px 22px;
        border-radius: 22px;
        text-align: left;
    }

    .lp-cta-band h2,
    .lp-cta-band p {
        margin-left: 0;
        margin-right: 0;
    }

    .lp-cta-band .lp-hero-actions {
        justify-content: flex-start;
    }

    .lp-footer {
        padding: 46px 0 26px;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
        margin-bottom: 34px;
    }

    .lp-footer-brand {
        grid-column: 1 / -1;
    }

    .lp-footer-col:last-child {
        grid-column: 1 / -1;
    }

    .lp-footer-bottom {
        gap: 8px;
        font-size: 0.68rem;
        line-height: 1.45;
    }

    .lp-inner-hero {
        padding: 54px 0 46px;
        text-align: left;
    }

    .lp-inner-hero-centered .lp-eyebrow {
        justify-content: flex-start;
    }

    .lp-inner-hero h1 {
        margin-left: 0;
        font-size: 2.25rem;
        line-height: 1.02;
    }

    .lp-inner-hero-centered p:not(.lp-eyebrow) {
        margin-left: 0;
    }

    .lp-inner-orbit {
        width: min(100%, 280px);
    }

    .lp-process-list article {
        border-radius: 20px;
    }

    .lp-faq-page-grid {
        gap: 24px;
    }

    .lp-faq-aside,
    .lp-contact-card {
        padding: 22px;
        border-radius: 20px;
    }

    .lp-faq-page-grid summary {
        padding: 17px;
    }

    .lp-faq-page-grid details p {
        padding: 0 17px 17px;
    }

    .lp-contact-banner .lp-btn {
        width: 100%;
    }

    .lp-legal-content h2 {
        margin-top: 34px;
    }
}

@media (max-width: 380px) {
    .lp-container {
        width: min(100% - 26px, 1180px);
    }

    .lp-brand {
        font-size: 0.75rem;
    }

    .lp-hero-status {
        font-size: 0.56rem;
    }

    .lp-hero-copy {
        min-height: 330px;
    }

    .lp-hero-visual {
        min-height: 468px;
    }

    .lp-phone {
        width: 238px;
    }

    .lp-phone-screen {
        min-height: 448px;
    }

    .lp-float-card strong {
        font-size: 0.65rem;
    }

    .lp-float-card small {
        font-size: 0.56rem;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-brand,
    .lp-footer-col:last-child {
        grid-column: auto;
    }
}

/* ---------- Verification pages ---------- */

.auth-verify-page {
    --verify-accent: #0e8a5f;
    --verify-ink: #0e1512;
    --verify-muted: #66716b;
    --verify-line: rgba(14, 21, 18, 0.11);
    --auth-accent: #0e8a5f;
    --auth-accent-dark: #08724e;
    --auth-ink: #0e1512;
    --auth-muted: #66716b;
    --auth-line: rgba(14, 21, 18, 0.11);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--verify-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 138, 95, 0.13), transparent 32%),
        radial-gradient(circle at 92% 90%, rgba(255, 107, 74, 0.07), transparent 28%),
        #fbfdfc;
}

.auth-verify-header,
.auth-verify-footer {
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-verify-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--verify-line);
}

.auth-verify-page .auth-brand {
    color: var(--verify-ink);
}

.auth-verify-page .auth-home-link {
    color: var(--verify-muted);
}

.auth-verify-page .auth-home-link:hover {
    color: var(--verify-accent);
}

.auth-verify-page .auth-signup-step {
    color: var(--verify-accent);
    background: rgba(14, 138, 95, 0.09);
}

.auth-verify-main {
    width: min(100% - 32px, 1120px);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding: 48px 0;
}

.auth-verify-card {
    width: 100%;
    max-width: 440px;
    padding: 38px;
    border: 1px solid var(--verify-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
    text-align: center;
}

.auth-verify-card-vendor {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.auth-verify-card-vendor::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0e8a5f 0%, #35c18c 58%, #ffc65a 100%);
}

.auth-verify-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-verify-progress-label {
    color: var(--verify-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-theme="dark"] .auth-verify-page {
    --verify-accent: #9fda38;
    --verify-ink: #f3f8f5;
    --verify-muted: #9eaca5;
    --verify-line: rgba(226, 241, 233, 0.12);
    --auth-accent: #9fda38;
    --auth-accent-dark: #b8ec58;
    --auth-ink: #f3f8f5;
    --auth-muted: #9eaca5;
    --auth-line: rgba(226, 241, 233, 0.12);
    background:
        radial-gradient(circle at 12% 8%, rgba(159, 218, 56, 0.12), transparent 32%),
        radial-gradient(circle at 92% 90%, rgba(255, 204, 39, 0.06), transparent 28%),
        #09110d;
}

html[data-theme="dark"] .auth-verify-page .auth-brand {
    color: var(--verify-ink);
}

html[data-theme="dark"] .auth-verify-page .auth-signup-step {
    color: var(--verify-accent);
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-verify-card {
    border-color: var(--verify-line);
    background: rgba(16, 29, 23, 0.94);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-verify-icon {
    color: #b8ec58;
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-otp-group input {
    border-color: var(--verify-line);
    color: var(--verify-ink);
    background: #0c1812;
}

html[data-theme="dark"] .auth-verify-copy strong {
    color: var(--verify-ink);
}

html[data-theme="dark"] .auth-verify-alternate a {
    color: #b8ec58;
}

.auth-verify-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    margin: 0 auto;
    color: #08724e;
    background: rgba(14, 138, 95, 0.1);
    flex-shrink: 0;
    margin-bottom: 24px;
}

.auth-verify-card .auth-login-eyebrow {
    justify-content: center;
}

.auth-verify-card h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.65rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.auth-verify-copy {
    margin: 12px auto 0;
    color: var(--verify-muted);
    font-size: 0.82rem;
    line-height: 1.65;
    max-width: 33ch;
}

.auth-verify-copy strong {
    color: var(--verify-ink);
}

.auth-verify-card .auth-alert {
    margin-top: 20px;
}

.auth-verify-form {
    display: grid;
    gap: 22px;
    margin-top: 26px;
}

.auth-otp-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-otp-group legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.auth-otp-group input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 0.84;
    border: 1px solid var(--verify-line);
    border-radius: 12px;
    outline: none;
    color: var(--verify-ink);
    background: #fbfcfb;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    text-align: center;
    caret-color: var(--verify-accent);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-otp-group input:focus {
    border-color: var(--verify-accent);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, 0.1);
    transform: translateY(-2px);
}

.auth-dev-code {
    margin: 16px 0;
    padding: 12px 15px;
    border: 1px dashed rgba(14, 138, 95, 0.4);
    border-radius: 12px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.07);
    font-size: 0.82rem;
    text-align: center;
}

.auth-dev-code strong {
    margin-left: 5px;
    letter-spacing: 0.18em;
}

.auth-resend-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    color: var(--auth-muted);
    font-size: 0.78rem;
}

.auth-resend-form button {
    padding: 0;
    border: 0;
    color: var(--auth-accent-dark);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-subscription-main .auth-signup-card {
    max-width: 620px;
}

.auth-verify-alternate {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    color: var(--verify-muted);
    font-size: 0.74rem;
}

.auth-verify-alternate a {
    color: #08724e;
    font-weight: 700;
}

.auth-verify-support-row {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    color: var(--verify-muted);
    background: rgba(14, 138, 95, 0.06);
    font-size: 0.77rem;
    line-height: 1.55;
    text-align: left;
}

.auth-verify-footer {
    min-height: 62px;
    display: grid;
    place-items: center;
    border-top: 1px solid var(--verify-line);
    color: #7b8580;
    font-size: 0.7rem;
    text-align: center;
}

@media (max-width: 600px) {
    .auth-login-header,
    .auth-signup-header,
    .auth-login-main,
    .auth-signup-main,
    .auth-login-footer,
    .auth-verify-header,
    .auth-verify-footer {
        width: min(100% - 28px, 1160px);
    }

    .auth-login-header .auth-brand > span:last-child,
    .auth-signup-header .auth-brand > span:last-child {
        display: inline;
    }

    .auth-login-main,
    .auth-signup-main {
        gap: 26px;
        padding-block: 32px;
    }

    .auth-login-intro h1,
    .auth-signup-intro h1 {
        font-size: 2rem;
    }

    .auth-login-intro > p:not(.auth-login-eyebrow),
    .auth-signup-intro > p:not(.auth-login-eyebrow) {
        font-size: 0.82rem;
        line-height: 1.62;
    }

    .auth-login-note {
        width: 100%;
    }

    .auth-login-card,
    .auth-signup-card {
        padding: 24px 20px;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(14, 21, 18, 0.09);
    }

    .auth-login-card-head h2,
    .auth-signup-card-head h2 {
        font-size: 1.35rem;
    }

    .auth-signup-benefits {
        gap: 10px;
        margin-top: 22px;
    }

    .auth-signup-benefits > div {
        font-size: 0.75rem;
    }

    .auth-signup-field input,
    .auth-signup-field select,
    .auth-login-card .auth-field input {
        min-height: 50px;
        font-size: 0.84rem;
    }

    .auth-plan-option {
        min-height: 72px;
    }

    .auth-login-footer {
        min-height: 58px;
        padding-block: 14px;
    }

    .auth-verify-header {
        min-height: 68px;
    }

    .auth-verify-header .auth-brand > span:last-child {
        display: none;
    }

    .auth-verify-main {
        width: min(100% - 24px, 1120px);
        padding: 32px 0;
    }

    .auth-verify-card {
        padding: 28px 18px;
        border-radius: 19px;
    }

    .auth-verify-card-vendor {
        padding: 26px 18px 22px;
    }

    .auth-otp-group {
        gap: 6px;
    }

    .auth-otp-group input {
        border-radius: 10px;
        font-size: 1.05rem;
    }

    .auth-verify-alternate {
        align-items: center;
        flex-direction: column;
    }

    .auth-verify-header-meta {
        gap: 8px;
    }

    .auth-verify-progress-label {
        display: none;
    }
}

/* ---------- Vendor dashboard ---------- */

.app-shell {
    --app-bg: #f4f7f5;
    --app-surface: #ffffff;
    --app-ink: #102019;
    --app-muted: #68766f;
    --app-line: rgba(16, 32, 25, 0.1);
    --app-green: #0e8a5f;
    margin: 0;
    min-height: 100vh;
    color: var(--app-ink);
    background: var(--app-bg);
    font-family: "Instrument Sans", "Inter", sans-serif;
}

.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(244, 247, 245, 0.9);
    backdrop-filter: blur(12px);
    transition: opacity 220ms ease, visibility 220ms ease;
}

.loader-overlay.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.loader-panel {
    display: grid;
    justify-items: center;
    gap: 15px;
    color: var(--app-muted);
    font-size: 0.78rem;
}

.loader-orbit {
    position: relative;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(14, 138, 95, 0.2);
    border-radius: 50%;
    animation: app-loader-spin 1.6s linear infinite;
}

.loader-orbit span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-green);
}

.loader-orbit span:nth-child(1) { top: -4px; left: 23px; }
.loader-orbit span:nth-child(2) { right: 1px; bottom: 8px; opacity: 0.65; }
.loader-orbit span:nth-child(3) { left: 1px; bottom: 8px; opacity: 0.35; }

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

.dashboard-frame {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    color: #edf7f2;
    background: linear-gradient(180deg, #0d2119, #102f24);
    z-index: 70;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-green), #20c98b);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
}

.brand-mark strong,
.brand-mark span {
    display: block;
}

.brand-mark strong {
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.92rem;
}

.brand-mark span {
    margin-top: 2px;
    color: rgba(237, 247, 242, 0.58);
    font-size: 0.65rem;
}

.sidebar-close,
.dashboard-menu-button,
.dashboard-scrim {
    border: 0;
    cursor: pointer;
}

.sidebar-close {
    display: none;
    color: #fff;
    background: transparent;
    font-size: 1.7rem;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
    margin-top: 44px;
}

.nav-link {
    padding: 12px 14px;
    border-radius: 12px;
    color: rgba(237, 247, 242, 0.68);
    font-size: 0.8rem;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.sidebar-card {
    margin-top: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-card .eyebrow {
    color: #70ddb0;
}

.sidebar-card h3 {
    margin: 7px 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
}

.sidebar-card p:last-child {
    margin: 0;
    color: rgba(237, 247, 242, 0.58);
    font-size: 0.72rem;
    line-height: 1.55;
}

.dashboard-scrim {
    display: none;
}

.dashboard-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--app-line);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
}

.topbar .eyebrow,
.dashboard-grid .eyebrow {
    margin: 0 0 5px;
    color: var(--app-green);
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.topbar h1 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #176c4a;
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.72rem;
    font-weight: 700;
}

.status-pill .status-dot {
    width: 7px;
    height: 7px;
    box-shadow: none;
}

.topbar .ghost-button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 0.74rem;
}

.dashboard-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--app-surface);
}

.dashboard-menu-button span {
    display: block;
    width: 17px;
    height: 2px;
    margin: 3px auto;
    border-radius: 2px;
    background: var(--app-ink);
}

.dashboard-content {
    flex: 1;
    padding: 28px 32px 40px;
}

.dashboard-grid {
    display: grid;
    gap: 22px;
}

.hero-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    align-items: end;
    gap: 30px;
    padding: 30px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0d2119, #124431 70%, #0e8a5f);
}

.hero-summary h2 {
    margin: 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.8rem;
}

.hero-text {
    max-width: 65ch;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.8rem;
    line-height: 1.6;
}

.hero-summary .signal-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-summary .signal-row div {
    padding: 0 12px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-summary .signal-row strong {
    color: #fff;
    font-size: 1.05rem;
}

.hero-summary .signal-row span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
}

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

.stat-card,
.content-panel {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
    box-shadow: 0 14px 30px rgba(16, 32, 25, 0.055);
}

.stat-card {
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
}

.stat-card > span,
.stat-card > small {
    display: block;
    color: var(--app-muted);
    font-size: 0.68rem;
}

.stat-card strong {
    display: block;
    overflow-wrap: anywhere;
    margin: 10px 0 5px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
}

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

.content-panel {
    padding: 24px;
    border-radius: 20px;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-heading h3 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
}

.panel-chip {
    padding: 6px 9px;
    border-radius: 999px;
    color: #176c4a;
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.65rem;
    font-weight: 700;
}

.panel-chip-warm {
    color: #8a5b00;
    background: rgba(255, 193, 59, 0.13);
}

.activity-list {
    display: grid;
    gap: 0;
    margin-top: 18px;
}

.activity-list article {
    padding: 14px 0;
    border-top: 1px solid var(--app-line);
}

.activity-list strong {
    font-size: 0.78rem;
}

.activity-list p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.progress-block {
    margin-top: 26px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--app-muted);
    font-size: 0.7rem;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    margin-top: 9px;
    border-radius: 999px;
    background: #e8efeb;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-green), #20c98b);
}

.detail-list {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--app-line);
    list-style: none;
    color: var(--app-muted);
    font-size: 0.74rem;
}

.detail-list strong {
    color: var(--app-ink);
}

.dashboard-footer {
    padding: 20px 32px;
    border-top: 1px solid var(--app-line);
    color: var(--app-muted);
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
}

.dashboard-footer p {
    margin: 0;
}

@media (max-width: 1100px) {
    .hero-summary {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 900px) {
    .dashboard-frame {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(84vw, 310px);
        transform: translateX(-105%);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.25);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .sidebar-close,
    .dashboard-menu-button {
        display: block;
    }

    .dashboard-scrim {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(4, 12, 8, 0.54);
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .dashboard-menu-open {
        overflow: hidden;
    }

    .dashboard-menu-open .sidebar {
        transform: translateX(0);
    }

    .dashboard-menu-open .dashboard-scrim {
        visibility: visible;
        opacity: 1;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
    }

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

@media (max-width: 600px) {
    .topbar {
        min-height: 74px;
        gap: 12px;
        padding: 12px 14px;
    }

    .topbar-copy {
        min-width: 0;
        flex: 1;
    }

    .topbar .eyebrow {
        display: none;
    }

    .topbar h1 {
        overflow: hidden;
        font-size: 0.95rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .topbar-actions .status-pill {
        width: 38px;
        height: 38px;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }

    .topbar .ghost-button {
        display: none;
    }

    .dashboard-content {
        padding: 16px 14px 28px;
    }

    .dashboard-grid {
        gap: 14px;
    }

    .hero-summary {
        gap: 22px;
        padding: 22px 18px;
        border-radius: 20px;
    }

    .hero-summary h2 {
        font-size: 1.4rem;
    }

    .hero-summary .signal-row div {
        padding: 0 8px;
    }

    .hero-summary .signal-row div:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .hero-summary .signal-row strong {
        font-size: 0.9rem;
    }

    .stat-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 16px;
        border-radius: 16px;
    }

    .stat-card strong {
        font-size: 1.08rem;
    }

    .content-panel {
        padding: 19px 17px;
        border-radius: 18px;
    }

    .panel-heading h3 {
        font-size: 0.9rem;
    }

    .progress-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-footer {
        padding: 18px 14px;
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- KasaFlow role dashboards ---------- */

.app-shell {
    --dash-green: #6fba3b;
    --dash-green-dark: #173f2d;
    --dash-lime: #c8ed70;
    --dash-yellow: #f4d857;
    --dash-blue: #78a9e8;
    --dash-coral: #ef9077;
}

.app-shell .dashboard-frame {
    grid-template-columns: 248px minmax(0, 1fr);
}

.app-shell .sidebar {
    padding: 22px 16px 18px;
    background:
        radial-gradient(circle at 10% 95%, rgba(151, 215, 91, 0.12), transparent 30%),
        #10251c;
}

.app-shell .sidebar-head {
    position: relative;
    min-height: 48px;
}

.app-shell .sidebar .auth-brand {
    min-width: 0;
    gap: 11px;
    color: #f6fbf7;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    letter-spacing: -0.025em;
}

.app-shell .sidebar .auth-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    color: #18301f;
    background: linear-gradient(135deg, #d8f88e, #f5da58);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        0 0 0 4px rgba(200, 237, 112, 0.08);
}

.app-shell .sidebar .auth-brand-mark svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.2;
}

.app-shell .sidebar .auth-brand > span:last-child {
    display: block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-shell .brand-mark {
    padding-inline: 5px;
}

.app-shell .brand-icon {
    width: 39px;
    height: 39px;
    color: #17240d;
    background: linear-gradient(135deg, var(--dash-lime), var(--dash-yellow));
    font-size: 1rem;
}

.app-shell .brand-mark > span {
    margin: 0;
}

.app-shell .brand-mark small {
    display: block;
    margin-top: 2px;
    color: rgba(237, 247, 242, 0.48);
    font-size: 0.6rem;
}

.app-shell .sidebar-nav {
    gap: 4px;
    margin-top: 34px;
}

.sidebar-label {
    margin: 22px 11px 7px;
    color: rgba(237, 247, 242, 0.34);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-label:first-child {
    margin-top: 0;
}

.app-shell .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.app-shell .nav-link.active {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.11);
    box-shadow: inset 3px 0 0 var(--dash-lime);
}

.nav-icon {
    width: 25px;
    height: 25px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(237, 247, 242, 0.5);
    font-size: 0.52rem;
}

.nav-link.active .nav-icon {
    border-color: rgba(200, 237, 112, 0.18);
    color: var(--dash-lime);
    background: rgba(200, 237, 112, 0.07);
}

.nav-link > b {
    min-width: 21px;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #17301f;
    background: var(--dash-lime);
    font-size: 0.55rem;
    text-align: center;
}

.sidebar-spacer {
    flex: 1;
    min-height: 24px;
}

.sidebar-profile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #17301f;
    background: #d5edaa;
    font-size: 0.65rem;
    font-weight: 800;
}

.sidebar-profile > span:nth-child(2) {
    min-width: 0;
}

.sidebar-profile strong,
.sidebar-profile small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-profile strong {
    color: #f2f8f4;
    font-size: 0.75rem;
}

.sidebar-profile small {
    margin-top: 3px;
    color: rgba(237, 247, 242, 0.42);
    font-size: 0.62rem;
}

.sidebar-profile button {
    padding: 5px;
    border: 0;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
}

.app-shell .topbar {
    min-height: 82px;
    padding: 15px clamp(18px, 3vw, 34px);
}

.app-shell .topbar h1 {
    font-size: 1.15rem;
}

.dashboard-icon-button {
    position: relative;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 11px;
    color: var(--app-muted);
    background: var(--app-surface);
    cursor: pointer;
}

.dashboard-icon-button i {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #e7674c;
}

.dashboard-search {
    position: relative;
    width: 39px;
    height: 39px;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-search.is-open {
    width: min(270px, 28vw);
}

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

.dashboard-search input {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 46px 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--app-ink);
    background: transparent;
    font: inherit;
    font-size: .67rem;
    opacity: 0;
    pointer-events: none;
    transform: scaleX(.25);
    transform-origin: right center;
    transition: opacity 160ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.dashboard-search input::-webkit-search-cancel-button {
    display: none;
}

.dashboard-search input::placeholder {
    color: var(--app-muted);
}

.dashboard-search.is-open input {
    border-color: rgba(111, 186, 59, .35);
    background: var(--app-surface);
    box-shadow: 0 10px 28px rgba(19, 54, 38, .1);
    opacity: 1;
    pointer-events: auto;
    transform: scaleX(1);
}

.dashboard-search.is-open input:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 0 3px rgba(111, 186, 59, .16), 0 12px 30px rgba(19, 54, 38, .12);
    outline: none;
}

.dashboard-search .dashboard-search-button {
    z-index: 1;
    flex: 0 0 39px;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.dashboard-search.is-open .dashboard-search-button {
    border-color: transparent;
    color: #173f2d;
    background: var(--dash-lime);
    transform: scale(.8);
}

.dashboard-notifications {
    position: relative;
}

.dashboard-notification-menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 180;
    width: min(350px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 22px 50px rgba(15, 35, 25, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
}

.dashboard-notifications.is-open .dashboard-notification-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-notifications.is-open .dashboard-notification-button {
    border-color: rgba(111, 186, 59, .38);
    color: #173f2d;
    background: var(--dash-lime);
}

.dashboard-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 10px 13px;
    border-bottom: 1px solid var(--app-line);
}

.dashboard-notification-head strong,
.dashboard-notification-head small {
    display: block;
}

.dashboard-notification-head strong {
    font-size: .78rem;
}

.dashboard-notification-head small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .58rem;
}

.dashboard-notification-head small b {
    color: var(--dash-green);
}

.dashboard-notification-head button {
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    color: var(--dash-green-dark);
    background: rgba(111, 186, 59, .1);
    font: inherit;
    font-size: .57rem;
    font-weight: 750;
    cursor: pointer;
}

.dashboard-notification-head button:disabled {
    color: var(--app-muted);
    background: transparent;
    cursor: default;
}

.dashboard-notification-list {
    display: grid;
    padding: 5px 0;
}

.dashboard-notification-list a {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    color: var(--app-ink);
    transition: background 150ms ease;
}

.dashboard-notification-list a:hover,
.dashboard-notification-list a:focus-visible {
    background: rgba(111, 186, 59, .08);
    outline: none;
}

.dashboard-notification-list a.is-unread::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dash-green);
}

.dashboard-notification-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.dashboard-notification-icon.is-green { color: #4f942b; background: rgba(111, 186, 59, .12); }
.dashboard-notification-icon.is-yellow { color: #a88713; background: rgba(244, 216, 87, .16); }
.dashboard-notification-icon.is-blue { color: #477fbf; background: rgba(120, 169, 232, .14); }

.dashboard-notification-list strong,
.dashboard-notification-list small {
    display: block;
}

.dashboard-notification-list strong {
    font-size: .66rem;
    line-height: 1.35;
}

.dashboard-notification-list small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .56rem;
    line-height: 1.45;
}

.dashboard-notification-list time {
    color: var(--app-muted);
    font-size: .52rem;
    white-space: nowrap;
}

.dashboard-notification-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid var(--app-line);
    color: var(--dash-green-dark);
    font-size: .62rem;
    font-weight: 750;
}

.dashboard-primary-action {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 11px;
    color: #fff;
    background: #173f2d;
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-account {
    position: relative;
}

.dashboard-account-trigger {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 5px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-account-trigger:hover,
.dashboard-account-trigger:focus-visible,
.dashboard-account.is-open .dashboard-account-trigger {
    border-color: rgba(111, 186, 59, .38);
    box-shadow: 0 8px 22px rgba(19, 54, 38, .09);
    outline: none;
}

.dashboard-account-icon {
    width: 33px;
    height: 33px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: #173f2d;
    background: linear-gradient(135deg, var(--dash-lime), var(--dash-yellow));
}

.dashboard-account-copy {
    min-width: 0;
}

.dashboard-account-copy strong,
.dashboard-account-copy small {
    display: block;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-account-copy strong {
    font-size: .68rem;
    font-weight: 750;
}

.dashboard-account-copy small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .56rem;
}

.dashboard-account-chevron {
    color: var(--app-muted);
    transition: transform 180ms ease;
}

.dashboard-account.is-open .dashboard-account-chevron {
    transform: rotate(180deg);
}

.dashboard-account-menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 180;
    width: min(290px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 22px 50px rgba(15, 35, 25, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
}

.dashboard-account.is-open .dashboard-account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-account-summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 9px 10px 13px;
    border-bottom: 1px solid var(--app-line);
}

.dashboard-account-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #173f2d;
    background: linear-gradient(135deg, #d8f88e, #f5da58);
    font-size: .66rem;
    font-weight: 800;
}

.dashboard-account-summary strong,
.dashboard-account-summary small {
    display: block;
}

.dashboard-account-summary strong {
    font-size: .75rem;
}

.dashboard-account-summary small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .61rem;
}

.dashboard-account-links {
    display: grid;
    gap: 2px;
    padding: 7px 0;
}

.dashboard-account-links a,
.dashboard-account-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--app-ink);
    transition: color 150ms ease, background 150ms ease;
}

.dashboard-account-links a:hover,
.dashboard-account-links a:focus-visible {
    color: #173f2d;
    background: rgba(111, 186, 59, .09);
    outline: none;
}

.dashboard-account-links svg,
.dashboard-account-logout svg {
    flex: 0 0 auto;
    color: var(--app-muted);
}

.dashboard-account-links span {
    min-width: 0;
}

.dashboard-account-links strong,
.dashboard-account-links small {
    display: block;
}

.dashboard-account-links strong {
    font-size: .68rem;
}

.dashboard-account-links small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .56rem;
}

.dashboard-account-logout {
    border-top: 1px solid var(--app-line);
    border-radius: 0 0 10px 10px;
    color: #c54f43;
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-account-logout:hover,
.dashboard-account-logout:focus-visible {
    background: rgba(197, 79, 67, .08);
    outline: none;
}

.dashboard-account-logout svg {
    color: currentColor;
}

.app-shell .dashboard-content {
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    padding: 26px clamp(18px, 3vw, 34px) 44px;
}

.dash-page {
    display: grid;
    gap: 18px;
}

.dash-welcome-card,
.dash-admin-intro {
    border-radius: 24px;
}

.dash-welcome-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    align-items: center;
    gap: 30px;
    padding: 34px clamp(28px, 4vw, 48px);
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(200, 237, 112, 0.2), transparent 25%),
        linear-gradient(135deg, #11281e, #174f38);
}

.dash-welcome-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.15;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.dash-welcome-copy {
    position: relative;
    z-index: 1;
}

.dash-live-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: rgba(255,255,255,.74);
    background: rgba(255,255,255,.06);
    font-size: 0.62rem;
    font-weight: 700;
}

.dash-live-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dash-lime);
    box-shadow: 0 0 0 4px rgba(200,237,112,.1);
}

.dash-welcome-card h2,
.dash-admin-intro h2 {
    margin: 16px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.dash-welcome-card h2 {
    max-width: 18ch;
    color: #fff;
}

.dash-welcome-card p,
.dash-admin-intro p {
    max-width: 58ch;
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.65;
}

.dash-welcome-copy .dash-page-greeting,
.dash-admin-intro .dash-page-greeting {
    margin: 18px 0 -8px;
    color: var(--dash-lime);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.dash-admin-intro .dash-page-greeting {
    color: #5b9637;
}

.dash-welcome-card p {
    color: rgba(255,255,255,.64);
}

.dash-welcome-actions,
.dash-admin-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.dash-button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.dash-button-light { color: #163221; background: var(--dash-lime); }
.dash-button-quiet { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.dash-button-outline { color: var(--app-ink); border-color: var(--app-line); background: var(--app-surface); }
.dash-button-dark { color: #fff; background: var(--dash-green-dark); }

.dash-assistant-orbit {
    position: relative;
    z-index: 1;
    min-height: 190px;
    display: grid;
    place-items: center;
}

.dash-orbit-ring {
    width: 154px;
    height: 154px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    text-align: center;
    box-shadow: inset 0 0 0 18px rgba(255,255,255,.025), 0 0 0 24px rgba(200,237,112,.035);
}

.dash-orbit-ring strong,
.dash-orbit-ring small { display: block; }
.dash-orbit-ring strong { font: 700 2rem "Space Grotesk", sans-serif; }
.dash-orbit-ring small { margin-top: 3px; color: rgba(255,255,255,.56); font-size: .58rem; }

.dash-orbit-chip {
    position: absolute;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    font-size: .57rem;
    font-weight: 700;
}

.dash-orbit-chip-one { top: 18px; right: 0; }
.dash-orbit-chip-two { bottom: 17px; left: 0; }

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

.dash-metric-card,
.dash-panel {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
    box-shadow: 0 8px 24px rgba(16, 32, 25, 0.035);
}

.dash-metric-card {
    position: relative;
    padding: 19px;
    border-radius: 17px;
}

.dash-metric-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .68rem;
    font-weight: 800;
}

.dash-icon-green { color: #38721d; background: #e2f2ce; }
.dash-icon-yellow { color: #765e00; background: #f8eab0; }
.dash-icon-blue { color: #315c91; background: #dceafa; }
.dash-icon-coral { color: #934d3b; background: #f7dfd9; }

.dash-metric-trend {
    position: absolute;
    top: 20px;
    right: 18px;
    color: var(--app-muted);
    font-size: .6rem;
    font-weight: 700;
}

.dash-metric-trend.is-positive { color: #4f942b; }
.dash-metric-card p { margin: 17px 0 4px; color: var(--app-muted); font-size: .76rem; }
.dash-metric-card > strong { display: block; font: 700 1.28rem "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.dash-metric-card > small { display: block; margin-top: 5px; color: #8a9690; font-size: .64rem; }

.dash-layout-main {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr);
    gap: 18px;
}

.dash-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 19px;
}

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

.dash-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--dash-green);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dash-panel h3 { margin: 0; font: 700 .94rem "Space Grotesk", sans-serif; letter-spacing: -.02em; }

.dash-filter-button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    color: var(--app-muted);
    background: var(--app-surface);
    font: inherit;
    font-size: .62rem;
}

.dash-status-badge,
.dash-count-badge {
    padding: 6px 9px;
    border-radius: 999px;
    color: #4b812d;
    background: #e9f5da;
    font-size: .57rem;
    font-weight: 800;
}

.dash-chart-summary { display: flex; align-items: baseline; gap: 12px; margin-top: 23px; }
.dash-chart-summary strong { font: 700 1.4rem "Space Grotesk", sans-serif; }
.dash-chart-summary span { color: #59933a; font-size: .6rem; }
.dash-chart-summary i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--dash-green); }

.dash-bar-chart {
    height: 190px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: clamp(8px, 2vw, 18px);
    margin-top: 19px;
    padding-top: 10px;
    border-bottom: 1px solid var(--app-line);
    background: repeating-linear-gradient(to bottom, var(--app-line) 0 1px, transparent 1px 48px);
}

.dash-bar-chart > div { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 8px; }
.dash-bar-chart span { width: min(28px, 68%); height: var(--bar-height); border-radius: 7px 7px 2px 2px; background: #dceacc; }
.dash-bar-chart .is-current span { background: linear-gradient(180deg, var(--dash-lime), var(--dash-green)); }
.dash-bar-chart small { margin-bottom: -22px; color: var(--app-muted); font-size: .56rem; }

.dash-token-panel { display: flex; flex-direction: column; }
.dash-token-ring { width: 138px; height: 138px; display: grid; place-items: center; margin: 26px auto 20px; border-radius: 50%; background: conic-gradient(var(--dash-green) var(--token-progress), #e9efeb 0); }
.dash-token-ring::before { content: ""; grid-area: 1/1; width: 106px; height: 106px; border-radius: 50%; background: var(--app-surface); }
.dash-token-ring > span { position: relative; grid-area: 1/1; text-align: center; }
.dash-token-ring strong,.dash-token-ring small { display: block; }
.dash-token-ring strong { font: 700 1.3rem "Space Grotesk",sans-serif; }
.dash-token-ring small { color: var(--app-muted); font-size: .56rem; }
.dash-token-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.dash-token-meta span { padding: 10px; border-radius: 10px; background: var(--app-bg); }
.dash-token-meta small,.dash-token-meta strong { display: block; }
.dash-token-meta small { color: var(--app-muted); font-size: .55rem; }
.dash-token-meta strong { margin-top: 3px; font-size: .7rem; }

.dash-layout-orders { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); }
.dash-text-link { color: #4f8b31; font-size: .64rem; font-weight: 700; }
.dash-table-wrap { overflow-x: auto; margin: 18px -4px -4px; }
.dash-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.dash-table th { padding: 0 10px 10px; color: #8b9791; font-size: .55rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.dash-table td { padding: 12px 10px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .66rem; }
.dash-table td strong,.dash-table td small { display: block; }
.dash-table td strong { color: var(--app-ink); font-size: .68rem; }
.dash-table td small { margin-top: 3px; color: #98a39d; font-size: .53rem; }
.dash-order-status { display: inline-flex; padding: 5px 7px; border-radius: 999px; font-size: .53rem; font-weight: 800; }
.dash-order-status.is-new { color: #37648e; background: #e1edf8; }
.dash-order-status.is-processing { color: #806400; background: #f8edbd; }
.dash-order-status.is-ready,.dash-order-status.is-complete { color: #4b812d; background: #e5f2d7; }

.dash-inbox-list { display: grid; gap: 2px; margin: 14px 0 18px; }
.dash-inbox-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--app-line); }
.dash-contact-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #34651d; background: #e1f0d1; font-size: .56rem; font-weight: 800; }
.dash-contact-avatar.is-yellow { color: #735c02; background: #f5e9af; }
.dash-contact-avatar.is-blue { color: #315d8c; background: #dce9f7; }
.dash-inbox-list strong { display: block; font-size: .66rem; }
.dash-inbox-list p { overflow: hidden; margin: 3px 0 0; color: var(--app-muted); font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.dash-inbox-list article > small { color: #98a39d; font-size: .52rem; }

.dash-admin-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 28px 30px; border: 1px solid var(--app-line); background: linear-gradient(120deg, #f8fbf5, #edf6e5); }
.dash-admin-intro .dash-live-label { color: #4f812f; border-color: rgba(80,130,50,.14); background: rgba(112,186,59,.07); }
.dash-admin-intro h2 { color: var(--app-ink); }
.dash-admin-intro p { color: var(--app-muted); }
.dash-admin-intro-actions { flex: 0 0 auto; margin: 0; }

.dash-line-chart { position: relative; height: 220px; margin-top: 18px; padding-bottom: 25px; }
.dash-line-chart svg { position: absolute; inset: 0 0 25px; width: 100%; height: calc(100% - 25px); overflow: visible; }
.dash-line-chart .dash-area { fill: url(#adminChartFill); }
.dash-line-chart .dash-line { fill: none; stroke: var(--dash-green); stroke-width: 4; stroke-linecap: round; }
.dash-chart-grid { position: absolute; inset: 0 0 25px; display: flex; flex-direction: column; justify-content: space-between; }
.dash-chart-grid i { width: 100%; border-top: 1px dashed var(--app-line); }
.dash-chart-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: var(--app-muted); font-size: .55rem; }

.dash-health-score { padding: 25px 0 20px; text-align: center; }
.dash-health-score strong { display: block; color: #4f942b; font: 700 2rem "Space Grotesk",sans-serif; }
.dash-health-score span { color: var(--app-muted); font-size: .59rem; }
.dash-health-list { display: grid; gap: 2px; }
.dash-health-list div,.dash-channel-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--app-line); font-size: .61rem; }
.dash-health-list span,.dash-channel-list span { display: flex; align-items: center; gap: 8px; color: var(--app-muted); }
.dash-health-list i { width: 6px; height: 6px; border-radius: 50%; background: #72b84b; box-shadow: 0 0 0 3px #e8f3df; }
.dash-health-list strong { color: #55843b; font-size: .55rem; }

.dash-admin-bottom { grid-template-columns: minmax(0,1.55fr) minmax(280px,.55fr); }
.dash-business-cell { display: flex; align-items: center; gap: 9px; }
.dash-business-cell > i { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #315b23; background: #e4efd9; font-style: normal; font-size: .53rem; font-weight: 800; }
.dash-payment-total { padding: 22px 0 14px; }
.dash-payment-total strong,.dash-payment-total small { display: block; }
.dash-payment-total strong { font: 700 1.55rem "Space Grotesk",sans-serif; }
.dash-payment-total small { margin-top: 4px; color: var(--app-muted); font-size: .58rem; }
.dash-channel-list i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #43504a; background: #edf1ef; font-style: normal; font-size: .53rem; font-weight: 800; }
.dash-channel-list strong { font-size: .61rem; }

@media (max-width: 1180px) {
    .dash-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-layout-main,.dash-layout-orders,.dash-admin-bottom { grid-template-columns: 1fr; }
    .dash-token-panel { min-height: auto; }
    .dash-token-panel .dash-button { align-self: center; }
}

@media (max-width: 900px) {
    .app-shell .dashboard-frame { display: block; }
    .dash-welcome-card { grid-template-columns: minmax(0,1fr) 260px; }

    .app-shell .sidebar-head {
        padding-right: 48px;
    }

    .app-shell .sidebar-close {
        position: absolute;
        top: 4px;
        right: 0;
        z-index: 2;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    }

    .app-shell .sidebar-close:hover,
    .app-shell .sidebar-close:focus-visible {
        border-color: rgba(216, 248, 142, 0.5);
        color: #d8f88e;
        background: rgba(216, 248, 142, 0.11);
        outline: none;
    }
}

@media (max-width: 720px) {
    .dash-welcome-card { grid-template-columns: 1fr; padding: 28px 24px; }
    .dash-assistant-orbit { min-height: 170px; }
    .dash-admin-intro { align-items: flex-start; flex-direction: column; padding: 24px; }
    .dash-admin-intro-actions { width: 100%; }
}

@media (max-width: 600px) {
    .dashboard-primary-action { display: none; }
    .app-shell .dashboard-content { padding: 14px 12px 30px; }
    .dash-page { gap: 12px; }
    .dash-welcome-card,.dash-admin-intro { border-radius: 19px; }
    .dash-welcome-card h2,.dash-admin-intro h2 { font-size: 1.55rem; }
    .dash-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .dash-metric-card { padding: 15px; border-radius: 14px; }
    .dash-metric-card p { margin-top: 14px; }
    .dash-metric-card > strong { font-size: 1.05rem; }
    .dash-metric-trend { top: 16px; right: 13px; }
    .dash-panel { padding: 18px 15px; border-radius: 16px; }
    .dash-panel-head { gap: 10px; }
    .dash-chart-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
    .dash-bar-chart { gap: 7px; }
    .dash-line-chart { height: 180px; }
    .dash-table-wrap { margin-inline: -15px; padding-inline: 7px; }
    .dash-admin-intro-actions .dash-button { flex: 1; }
}

@media (max-width: 390px) {
    .dash-metric-grid { grid-template-columns: 1fr; }
    .dash-welcome-actions { flex-direction: column; }
    .dash-welcome-actions .dash-button { width: 100%; }
    .dash-assistant-orbit { transform: scale(.9); margin-block: -12px; }
}

/* ---------- Dashboard themes ---------- */

.app-shell,
.app-shell .topbar,
.dash-metric-card,
.dash-panel,
.dash-admin-intro,
.dashboard-icon-button,
.dash-filter-button,
.dash-button-outline,
.dashboard-footer {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-theme-button {
    display: grid;
}

.dashboard-theme-icon {
    grid-area: 1 / 1;
    transition: opacity 170ms ease, transform 200ms ease;
}

html[data-theme="light"] .dashboard-theme-sun,
html[data-theme="dark"] .dashboard-theme-moon {
    opacity: 0;
    transform: scale(.55) rotate(-35deg);
}

html[data-theme="light"] .dashboard-theme-moon,
html[data-theme="dark"] .dashboard-theme-sun {
    opacity: 1;
    transform: scale(1) rotate(0);
}

html[data-theme="dark"] .app-shell {
    --app-bg: #09110d;
    --app-surface: #111d17;
    --app-ink: #eff7f2;
    --app-muted: #8e9e95;
    --app-line: rgba(226, 241, 233, 0.1);
    --dash-green: #91d653;
    --dash-green-dark: #8dce51;
    color-scheme: dark;
    background:
        radial-gradient(circle at 88% 5%, rgba(145, 214, 83, .055), transparent 28%),
        var(--app-bg);
}

html[data-theme="dark"] .loader-overlay {
    color: var(--app-muted);
    background: rgba(9, 17, 13, .92);
}

html[data-theme="dark"] .loader-orbit {
    border-color: rgba(145, 214, 83, .24);
}

html[data-theme="dark"] .app-shell .topbar {
    border-color: var(--app-line);
    background: rgba(12, 23, 17, .88);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

html[data-theme="dark"] .dashboard-icon-button,
html[data-theme="dark"] .dash-filter-button,
html[data-theme="dark"] .dash-button-outline {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .dashboard-primary-action,
html[data-theme="dark"] .dash-button-dark {
    color: #15230f;
    background: var(--dash-lime);
}

html[data-theme="dark"] .dashboard-account-trigger,
html[data-theme="dark"] .dashboard-account-menu {
    border-color: var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .dashboard-account-trigger:hover,
html[data-theme="dark"] .dashboard-account-trigger:focus-visible,
html[data-theme="dark"] .dashboard-account.is-open .dashboard-account-trigger {
    border-color: rgba(200, 237, 112, .28);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .dashboard-account-menu {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .dashboard-account-links a:hover,
html[data-theme="dark"] .dashboard-account-links a:focus-visible {
    color: #d8f2a2;
    background: rgba(200, 237, 112, .08);
}

html[data-theme="dark"] .dashboard-notification-menu {
    border-color: var(--app-line);
    background: #14221b;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .dashboard-notifications.is-open .dashboard-notification-button {
    border-color: transparent;
    color: #173f2d;
    background: var(--dash-lime);
}

html[data-theme="dark"] .dashboard-notification-head button {
    color: #cdeb90;
    background: rgba(200, 237, 112, .08);
}

html[data-theme="dark"] .app-shell .dashboard-menu-button {
    border: 1px solid var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .app-shell .dashboard-menu-button span {
    background: var(--app-ink);
}

html[data-theme="dark"] .dash-metric-card,
html[data-theme="dark"] .dash-panel {
    border-color: var(--app-line);
    background: rgba(17, 29, 23, .96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .dash-admin-intro {
    border-color: var(--app-line);
    background:
        radial-gradient(circle at 88% 0, rgba(145, 214, 83, .09), transparent 32%),
        linear-gradient(120deg, #111f18, #14271d);
}

html[data-theme="dark"] .dash-admin-intro .dash-live-label {
    color: #bde990;
    border-color: rgba(145, 214, 83, .15);
    background: rgba(145, 214, 83, .07);
}

html[data-theme="dark"] .dash-icon-green {
    color: #b9e899;
    background: rgba(103, 177, 64, .15);
}

html[data-theme="dark"] .dash-icon-yellow {
    color: #f0d96f;
    background: rgba(244, 216, 87, .13);
}

html[data-theme="dark"] .dash-icon-blue {
    color: #9cc3f2;
    background: rgba(120, 169, 232, .14);
}

html[data-theme="dark"] .dash-icon-coral {
    color: #f2ae9b;
    background: rgba(239, 144, 119, .13);
}

html[data-theme="dark"] .dash-metric-card > small,
html[data-theme="dark"] .dash-table th,
html[data-theme="dark"] .dash-table td small,
html[data-theme="dark"] .dash-inbox-list article > small {
    color: #718078;
}

html[data-theme="dark"] .dash-status-badge,
html[data-theme="dark"] .dash-count-badge {
    color: #bce594;
    background: rgba(112, 184, 75, .13);
}

html[data-theme="dark"] .dash-bar-chart span {
    background: #26392f;
}

html[data-theme="dark"] .dash-bar-chart .is-current span {
    background: linear-gradient(180deg, var(--dash-lime), #5fa63b);
}

html[data-theme="dark"] .dash-token-ring {
    background: conic-gradient(var(--dash-green) var(--token-progress), #28372f 0);
}

html[data-theme="dark"] .dash-token-ring::before {
    background: var(--app-surface);
}

html[data-theme="dark"] .dash-token-meta span {
    background: #0d1812;
}

html[data-theme="dark"] .dash-contact-avatar,
html[data-theme="dark"] .dash-business-cell > i {
    color: #bce698;
    background: rgba(112, 184, 75, .14);
}

html[data-theme="dark"] .dash-contact-avatar.is-yellow {
    color: #f0da76;
    background: rgba(244, 216, 87, .13);
}

html[data-theme="dark"] .dash-contact-avatar.is-blue {
    color: #a5c7ed;
    background: rgba(120, 169, 232, .14);
}

html[data-theme="dark"] .dash-order-status.is-new {
    color: #a8cbef;
    background: rgba(120, 169, 232, .13);
}

html[data-theme="dark"] .dash-order-status.is-processing {
    color: #ead469;
    background: rgba(244, 216, 87, .12);
}

html[data-theme="dark"] .dash-order-status.is-ready,
html[data-theme="dark"] .dash-order-status.is-complete {
    color: #b9e491;
    background: rgba(112, 184, 75, .13);
}

html[data-theme="dark"] .dash-health-list i {
    box-shadow: 0 0 0 3px rgba(114, 184, 75, .12);
}

html[data-theme="dark"] .dash-health-list strong,
html[data-theme="dark"] .dash-chart-summary span,
html[data-theme="dark"] .dash-text-link,
html[data-theme="dark"] .dash-kicker {
    color: #9ed66d;
}

html[data-theme="dark"] .dash-channel-list i {
    color: #aebbb4;
    background: #26342d;
}

html[data-theme="dark"] .dashboard-footer {
    border-color: var(--app-line);
    color: #718078;
    background: rgba(14, 25, 19, .7);
}

html[data-theme="dark"] .dash-line-chart .dash-line {
    stroke: #91d653;
}

html[data-theme="dark"] .dash-line-chart .dash-area {
    opacity: .72;
}

@media (max-width: 760px) {
    .dashboard-search.is-open {
        width: min(240px, calc(100vw - 94px));
    }

    .topbar-actions.is-searching > .dashboard-theme-button,
    .topbar-actions.is-searching > .dashboard-notifications,
    .topbar-actions.is-searching > .dashboard-account {
        display: none;
    }

    .dashboard-notification-menu {
        right: -49px;
    }

    .dashboard-account-trigger {
        width: 39px;
        height: 39px;
        min-height: 39px;
        justify-content: center;
        padding: 3px;
    }

    .dashboard-account-icon {
        width: 31px;
        height: 31px;
    }

    .dashboard-account-copy,
    .dashboard-account-chevron {
        display: none;
    }
}

/* ---------- Advanced dashboard navigation ---------- */

.app-shell .dashboard-frame {
    transition: grid-template-columns 220ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-collapse-button {
    width: 39px;
    height: 39px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 11px;
    color: var(--app-muted);
    background: var(--app-surface);
    cursor: pointer;
}

/* Vendor WhatsApp onboarding */
.dash-whatsapp-connect {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    margin-bottom: 22px;
    padding: 28px 30px;
    overflow: hidden;
    border: 1px solid rgba(16, 73, 49, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 7% 8%, rgba(66, 210, 139, 0.22), transparent 26%),
        linear-gradient(118deg, #f7fcf8 0%, #fffdf5 62%, #f4f9f5 100%);
    box-shadow: 0 18px 54px rgba(24, 65, 45, 0.09);
}

.dash-whatsapp-connect > .auth-alert,
.dash-whatsapp-warning {
    grid-column: 1 / -1;
    margin: 0;
}

.dash-whatsapp-warning {
    padding: 11px 14px;
    border-radius: 11px;
    color: #7b5a13;
    background: rgba(244, 201, 68, 0.16);
    font-size: 0.76rem;
}

.dash-whatsapp-visual {
    position: relative;
    width: 136px;
    height: 112px;
    display: grid;
    place-items: center;
}

.dash-whatsapp-glow {
    position: absolute;
    inset: 4px 15px;
    border-radius: 40% 60% 58% 42%;
    background: linear-gradient(135deg, rgba(31, 187, 112, 0.22), rgba(252, 214, 74, 0.22));
    filter: blur(3px);
    transform: rotate(-8deg);
}

.dash-whatsapp-phone,
.dash-whatsapp-meta {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 28px rgba(17, 77, 49, 0.17);
}

.dash-whatsapp-phone {
    left: 13px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border-radius: 18px;
    background: #25d366;
}

.dash-whatsapp-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-whatsapp-meta {
    right: 16px;
    width: 52px;
    height: 52px;
    border: 5px solid rgba(255, 255, 255, 0.86);
    overflow: hidden;
    border-radius: 18px;
    background: #1877f2;
}

.dash-whatsapp-meta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-whatsapp-link {
    position: absolute;
    z-index: 1;
    width: 52px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #38b97d 0 7px, transparent 7px 12px);
    animation: whatsapp-link-flow 1.4s linear infinite;
}

@keyframes whatsapp-link-flow {
    to { background-position: 24px 0; }
}

.dash-whatsapp-copy {
    min-width: 0;
}

.dash-whatsapp-copy h3 {
    max-width: 670px;
    margin: 5px 0 8px;
    color: #12271d;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.72rem);
    letter-spacing: -0.035em;
}

.dash-whatsapp-copy > p {
    max-width: 680px;
    margin: 0;
    color: #68776f;
    font-size: 0.82rem;
    line-height: 1.65;
}

.dash-whatsapp-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.dash-connection-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #16724c;
    background: rgba(37, 190, 121, 0.12);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dash-connection-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20b875;
    box-shadow: 0 0 0 4px rgba(32, 184, 117, 0.13);
}

.dash-whatsapp-steps,
.dash-whatsapp-details {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 15px;
}

.dash-whatsapp-steps span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #44554c;
    font-size: 0.7rem;
    font-weight: 700;
}

.dash-whatsapp-steps b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #0c7149;
    background: rgba(31, 183, 115, 0.12);
    font-size: 0.62rem;
}

.dash-whatsapp-details span {
    display: grid;
    gap: 3px;
    padding-right: 18px;
    border-right: 1px solid rgba(20, 68, 45, 0.1);
}

.dash-whatsapp-details span:last-child { border-right: 0; }
.dash-whatsapp-details small { color: #7a8981; font-size: 0.61rem; }
.dash-whatsapp-details strong { color: #243b30; font-size: 0.75rem; }

.dash-whatsapp-action {
    width: min(230px, 100%);
    display: grid;
    gap: 9px;
    justify-items: stretch;
}

.dash-meta-button {
    min-width: 210px;
    justify-content: center;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #1877f2, #0756c4);
    box-shadow: 0 12px 24px rgba(24, 119, 242, 0.22);
}

.dash-meta-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.dash-meta-mark {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
}

.dash-whatsapp-action > small {
    color: #7b8881;
    font-size: 0.68rem;
    line-height: 1.45;
    text-align: center;
}

.dash-meta-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #345b47;
    font-size: 0.7rem;
    font-weight: 700;
}

.dash-meta-progress[hidden] { display: none; }
.dash-meta-progress i {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(30, 156, 98, 0.18);
    border-top-color: #1e9c62;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.dash-button-danger {
    color: #a53b36;
    border: 1px solid rgba(180, 64, 57, 0.2);
    background: rgba(198, 70, 62, 0.07);
}

html[data-theme="dark"] .dash-whatsapp-connect {
    border-color: rgba(122, 207, 160, 0.13);
    background:
        radial-gradient(circle at 7% 8%, rgba(36, 177, 108, 0.14), transparent 27%),
        linear-gradient(118deg, #10231a, #17241e 64%, #11251b);
}

html[data-theme="dark"] .dash-whatsapp-copy h3 { color: #edf7f1; }
html[data-theme="dark"] .dash-whatsapp-copy > p,
html[data-theme="dark"] .dash-whatsapp-action > small { color: #91a098; }
html[data-theme="dark"] .dash-whatsapp-steps span,
html[data-theme="dark"] .dash-whatsapp-details strong { color: #cbd9d1; }
html[data-theme="dark"] .dash-whatsapp-details span { border-color: rgba(219, 239, 227, 0.1); }

@media (max-width: 980px) {
    .dash-whatsapp-connect { grid-template-columns: 120px minmax(0, 1fr); }
    .dash-whatsapp-visual { width: 118px; }
    .dash-whatsapp-action,
    .dash-whatsapp-connect > form:last-child { grid-column: 2; width: 100%; justify-items: start; }
}

@media (max-width: 640px) {
    .dash-whatsapp-connect {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 18px;
        border-radius: 20px;
    }
    .dash-whatsapp-visual { width: 124px; height: 90px; margin: 0 auto; }
    .dash-whatsapp-action,
    .dash-whatsapp-connect > form:last-child { grid-column: 1; justify-items: stretch; }
    .dash-meta-button { width: 100%; min-width: 0; }
    .dash-whatsapp-details { display: grid; grid-template-columns: 1fr 1fr; }
    .dash-whatsapp-details span { border-right: 0; }
}

.dashboard-collapse-button svg {
    transition: transform 220ms ease;
}

.sidebar-nav-advanced {
    flex: 1;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    margin-right: -7px;
    padding-right: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, .13) transparent;
    scrollbar-width: thin;
}

.sidebar-nav-advanced::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-advanced::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
}

.nav-group {
    position: relative;
    display: grid;
}

.nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 0;
    border-radius: 10px;
    color: rgba(237, 247, 242, .68);
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.nav-group-toggle:hover,
.nav-group.is-open > .nav-group-toggle,
.nav-group.is-active > .nav-group-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .065);
}

.nav-group-toggle > b,
.nav-children a > b {
    min-width: 20px;
    margin-left: auto;
    padding: 3px 5px;
    border-radius: 999px;
    color: #18301f;
    background: var(--dash-lime);
    font-size: .5rem;
    text-align: center;
}

.nav-chevron {
    margin-left: auto;
    color: rgba(237, 247, 242, .38);
    font-size: 1.05rem;
    line-height: 1;
    transform: rotate(0);
    transition: transform 180ms ease;
}

.nav-group-toggle > b + .nav-chevron {
    margin-left: 0;
}

.nav-group.is-open .nav-chevron {
    transform: rotate(90deg);
}

.nav-group.is-active .nav-chevron {
    color: var(--dash-lime);
}

.nav-children {
    position: relative;
    max-height: 0;
    display: grid;
    gap: 2px;
    overflow: hidden;
    margin: 0 0 0 24px;
    padding: 0 0 0 22px;
    opacity: 0;
    transition: max-height 240ms ease, opacity 180ms ease, padding 220ms ease;
}

.nav-children::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 8px;
    width: 1px;
    background: rgba(255, 255, 255, .09);
}

.nav-group.is-open .nav-children {
    max-height: 240px;
    padding-top: 5px;
    padding-bottom: 7px;
    opacity: 1;
}

.nav-children a {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    color: rgba(237, 247, 242, .48);
    font-size: .7rem;
    font-weight: 600;
    transition: color 150ms ease, background 150ms ease;
}

.nav-children a:hover {
    color: #eff8f2;
    background: rgba(255, 255, 255, .055);
}

.nav-children a.active,
.nav-children a[aria-current="page"] {
    color: #f4faed;
    background: rgba(200, 237, 112, .11);
    box-shadow: inset 2px 0 0 var(--dash-lime);
}

.nav-children a > b {
    color: #ddebce;
    background: rgba(255, 255, 255, .09);
}

.sidebar-nav-advanced .nav-icon {
    color: rgba(237, 247, 242, .55);
}

.sidebar-nav-advanced .nav-icon svg {
    display: block;
}

.sidebar-spacer {
    flex: 0 0 14px;
    min-height: 14px;
}

html[data-theme="dark"] .dashboard-collapse-button {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: #14221b;
}

@media (min-width: 901px) {
    .dashboard-sidebar-collapsed .dashboard-frame {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .dashboard-sidebar-collapsed .sidebar {
        padding-inline: 10px;
    }

    .dashboard-sidebar-collapsed .sidebar-head {
        justify-content: center;
    }

    .dashboard-sidebar-collapsed .sidebar .auth-brand {
        justify-content: center;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar .auth-brand > .sidebar-brand-name,
    .dashboard-sidebar-collapsed .sidebar-label,
    .dashboard-sidebar-collapsed .nav-text,
    .dashboard-sidebar-collapsed .nav-link > b,
    .dashboard-sidebar-collapsed .nav-group-toggle > b,
    .dashboard-sidebar-collapsed .nav-chevron,
    .dashboard-sidebar-collapsed .sidebar-profile-copy,
    .dashboard-sidebar-collapsed .sidebar-profile-menu {
        display: none;
    }

    .dashboard-sidebar-collapsed .sidebar .auth-brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .dashboard-sidebar-collapsed .sidebar-nav-advanced {
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .dashboard-sidebar-collapsed .nav-link,
    .dashboard-sidebar-collapsed .nav-group-toggle {
        justify-content: center;
        padding-inline: 7px;
    }

    .dashboard-sidebar-collapsed .nav-link.active {
        box-shadow: none;
    }

    .dashboard-sidebar-collapsed .nav-icon {
        width: 35px;
        height: 35px;
        border-color: transparent;
    }

    .dashboard-sidebar-collapsed .sidebar-profile {
        display: flex;
        justify-content: center;
        padding-inline: 0;
    }

    .dashboard-sidebar-collapsed .dashboard-collapse-button svg {
        transform: rotate(180deg);
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children {
        position: absolute;
        top: 0;
        left: calc(100% + 9px);
        z-index: 120;
        width: 220px;
        max-height: none;
        display: grid;
        gap: 3px;
        overflow: visible;
        margin: 0;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 13px;
        background: #142a20;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-5px) scale(.98);
        transform-origin: top left;
        transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
    }

    .dashboard-sidebar-collapsed #admin-access-menu,
    .dashboard-sidebar-collapsed #admin-system-menu {
        top: auto;
        bottom: 0;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children::before {
        content: attr(data-menu-title);
        position: static;
        width: auto;
        height: auto;
        margin: 2px 8px 7px;
        color: rgba(237, 247, 242, .42);
        background: transparent;
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
    }

    .dashboard-sidebar-collapsed .nav-group:hover .nav-children,
    .dashboard-sidebar-collapsed .nav-group:focus-within .nav-children {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) scale(1);
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children a {
        min-height: 34px;
        padding-inline: 10px;
        color: rgba(237, 247, 242, .68);
        font-size: .68rem;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children a:hover,
    .dashboard-sidebar-collapsed .nav-group .nav-children a:focus-visible,
    .dashboard-sidebar-collapsed .nav-group .nav-children a.active,
    .dashboard-sidebar-collapsed .nav-group .nav-children a[aria-current="page"] {
        color: #fff;
        background: rgba(200, 237, 112, .09);
        outline: none;
    }
}

@media (max-width: 900px) {
    .dashboard-collapse-button {
        display: none;
    }

    .sidebar-nav-advanced {
        flex: 1;
    }
}
/* Admin-managed subscription pricing */
.dash-plan-admin {
    margin-top: 24px;
}

.dash-plan-admin-intro {
    margin: -4px 0 22px;
    color: var(--dash-muted, #687268);
}

.dash-plan-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dash-plan-editor {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--dash-border, #dce4dc) 82%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--dash-card, #fff) 94%, #eef8ea);
}

.dash-plan-editor-head,
.dash-plan-editor-row,
.dash-plan-editor-checks {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-plan-editor-head {
    justify-content: space-between;
}

.dash-plan-editor-head > span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f6e1;
    color: #326d25;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dash-plan-editor > label,
.dash-plan-editor-row > label {
    display: grid;
    flex: 1;
    gap: 6px;
    min-width: 0;
}

.dash-plan-editor label > span {
    color: var(--dash-muted, #687268);
    font-size: 12px;
    font-weight: 700;
}

.dash-plan-editor input[type="text"],
.dash-plan-editor input[type="number"],
.dash-plan-editor textarea {
    width: 100%;
    border: 1px solid var(--dash-border, #dce4dc);
    border-radius: 11px;
    padding: 10px 11px;
    background: var(--dash-card, #fff);
    color: var(--dash-text, #162016);
    font: inherit;
    outline: none;
}

.dash-plan-editor input:focus,
.dash-plan-editor textarea:focus {
    border-color: #68bf45;
    box-shadow: 0 0 0 3px rgb(104 191 69 / 14%);
}

.dash-plan-editor-checks {
    flex-wrap: wrap;
    color: var(--dash-muted, #687268);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .dash-plan-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .dash-plan-editor-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Keep compact dashboard copy readable without changing heading hierarchy. */
.app-shell .brand-mark small,
.app-shell .sidebar-label,
.app-shell .sidebar-profile small,
.app-shell .topbar .eyebrow,
.app-shell .dashboard-grid .eyebrow,
.app-shell .dash-live-label,
.app-shell .dash-kicker,
.app-shell .dash-orbit-ring small,
.app-shell .dash-orbit-chip,
.app-shell .dash-metric-trend,
.app-shell .dash-metric-card > small,
.app-shell .dash-chart-summary span,
.app-shell .dash-bar-chart small,
.app-shell .dash-token-ring small,
.app-shell .dash-token-meta small,
.app-shell .dash-table th,
.app-shell .dash-table td small,
.app-shell .dash-order-status,
.app-shell .dash-inbox-list article > small,
.app-shell .dash-chart-labels,
.app-shell .dash-health-score span,
.app-shell .dash-health-list strong,
.app-shell .dash-payment-total small,
.app-shell .dashboard-notification-head small,
.app-shell .dashboard-notification-head button,
.app-shell .dashboard-notification-list small,
.app-shell .dashboard-notification-list time,
.app-shell .dashboard-notification-footer,
.app-shell .dashboard-account-copy small,
.app-shell .dashboard-account-summary small,
.app-shell .dashboard-account-links small,
.app-shell .dash-whatsapp-details small,
.app-shell .nav-group-toggle > b,
.app-shell .nav-children a > b {
    font-size: 0.68rem;
}

.app-shell .sidebar-profile strong,
.app-shell .dashboard-search input,
.app-shell .dashboard-notification-head strong,
.app-shell .dashboard-notification-list strong,
.app-shell .dashboard-account-copy strong,
.app-shell .dashboard-account-summary strong,
.app-shell .dashboard-account-links strong,
.app-shell .dash-button,
.app-shell .dash-filter-button,
.app-shell .dash-status-badge,
.app-shell .dash-count-badge,
.app-shell .dash-text-link,
.app-shell .dash-table td,
.app-shell .dash-table td strong,
.app-shell .dash-inbox-list strong,
.app-shell .dash-inbox-list p,
.app-shell .dash-health-list div,
.app-shell .dash-channel-list div,
.app-shell .dash-channel-list strong,
.app-shell .dash-whatsapp-steps span,
.app-shell .dash-whatsapp-action > small,
.app-shell .dash-meta-progress,
.app-shell .nav-children a {
    font-size: 0.76rem;
}

.app-shell .nav-group.is-active > .nav-group-toggle {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.11);
    box-shadow: inset 3px 0 0 var(--dash-lime);
}

.app-shell .nav-group.is-active > .nav-group-toggle .nav-icon,
.app-shell .nav-group.is-open > .nav-group-toggle .nav-icon {
    border-color: rgba(200, 237, 112, 0.18);
    color: var(--dash-lime);
    background: rgba(200, 237, 112, 0.07);
}

.app-shell .nav-children a.active,
.app-shell .nav-children a[aria-current="page"] {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.09);
}

.app-shell .dash-welcome-card p,
.app-shell .dash-admin-intro p,
.app-shell .dash-metric-card p {
    font-size: 0.84rem;
}

/* ---------- Vendor workspace pages ---------- */
.vendor-workspace-page {
    gap: 20px;
}

.vendor-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 2px 4px;
}

.vendor-page-head h1 {
    margin: 4px 0 0;
    font: 700 clamp(1.65rem, 3vw, 2.25rem) "Space Grotesk", sans-serif;
    letter-spacing: -0.045em;
}

.vendor-page-head p,
.vendor-section-copy {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--app-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.vendor-record-count {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(111, 186, 59, .2);
    border-radius: 999px;
    color: #487d2b;
    background: rgba(111, 186, 59, .08);
    font-size: .74rem;
    font-weight: 750;
    text-transform: capitalize;
}

.vendor-conversation-layout {
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
}

.vendor-conversation-list,
.vendor-thread-panel {
    padding: 12px;
}

.vendor-conversation-list {
    align-content: start;
}

.vendor-conversation-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 13px;
    color: var(--app-ink);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.vendor-conversation-item:hover,
.vendor-conversation-item.is-active {
    background: rgba(111, 186, 59, .09);
    box-shadow: inset 3px 0 0 var(--dash-green);
}

.vendor-conversation-item strong,
.vendor-conversation-item small {
    display: block;
}

.vendor-conversation-item strong {
    font-size: .8rem;
}

.vendor-conversation-item small {
    max-width: 260px;
    overflow: hidden;
    margin-top: 4px;
    color: var(--app-muted);
    font-size: .7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vendor-conversation-meta {
    max-width: 115px;
    text-align: right;
}

.vendor-conversation-meta b {
    display: inline-block;
    margin-top: 5px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #8a5b00;
    background: rgba(244, 216, 87, .18);
    font-size: .62rem;
}

.vendor-thread-panel {
    display: flex;
    flex-direction: column;
}

.vendor-thread-panel > .dash-panel-head {
    padding: 10px 10px 16px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-thread {
    display: grid;
    align-content: start;
    gap: 11px;
    padding: 20px 10px 10px;
}

.vendor-message {
    width: min(78%, 560px);
    padding: 11px 13px;
    border-radius: 15px;
}

.vendor-message p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
}

.vendor-message span,
.vendor-message small {
    display: block;
    font-size: .65rem;
}

.vendor-message span {
    margin-bottom: 5px;
    color: #4e842f;
    font-weight: 800;
}

.vendor-message small {
    margin-top: 6px;
    color: var(--app-muted);
}

.vendor-message.is-customer {
    justify-self: end;
    color: #fff;
    background: #173f2d;
    border-bottom-right-radius: 5px;
}

.vendor-message.is-customer small {
    color: rgba(255, 255, 255, .58);
}

.vendor-message.is-assistant {
    justify-self: start;
    background: #eff6e9;
    border-bottom-left-radius: 5px;
}

.vendor-empty-state {
    display: grid;
    place-content: center;
    min-height: 150px;
    padding: 24px;
    color: var(--app-muted);
    text-align: center;
}

.vendor-empty-state h3,
.vendor-empty-state p {
    margin: 0;
}

.vendor-empty-state h3 {
    color: var(--app-ink);
    font: 700 .95rem "Space Grotesk", sans-serif;
}

.vendor-empty-state p {
    margin-top: 6px;
    font-size: .76rem;
    line-height: 1.5;
}

.vendor-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.vendor-filter-bar input,
.vendor-filter-bar select,
.vendor-inline-form select {
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    font-size: .76rem;
}

.vendor-filter-bar input {
    width: min(360px, 100%);
}

.vendor-filter-bar input:focus,
.vendor-filter-bar select:focus,
.vendor-form input:focus,
.vendor-form select:focus,
.vendor-form textarea:focus,
.vendor-knowledge-input:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 0 3px rgba(111, 186, 59, .13);
    outline: none;
}

.vendor-data-table {
    min-width: 780px;
}

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

.vendor-inline-form select {
    min-height: 32px;
    padding-inline: 8px;
}

.vendor-inline-form button,
.vendor-archive-form button {
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    color: #315b23;
    background: #e8f3dd;
    font: inherit;
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
}

.vendor-catalog-layout {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 18px;
}

.vendor-form-panel {
    position: sticky;
    top: 104px;
}

.vendor-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.vendor-form label {
    display: grid;
    align-content: start;
    gap: 7px;
}

.vendor-form label > span {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
}

.vendor-form .is-wide {
    grid-column: 1 / -1;
}

.vendor-form input,
.vendor-form select,
.vendor-form textarea,
.vendor-knowledge-input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    font-size: .78rem;
    resize: vertical;
}

.vendor-check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.vendor-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--dash-green);
}

.vendor-product-list {
    display: grid;
    gap: 8px;
}

.vendor-product-row {
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: var(--app-surface);
}

.vendor-product-row summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.vendor-product-row summary::-webkit-details-marker {
    display: none;
}

.vendor-product-row summary strong,
.vendor-product-row summary small {
    display: block;
}

.vendor-product-row summary strong {
    font-size: .77rem;
}

.vendor-product-row summary small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .68rem;
}

.vendor-product-thumb {
    width: 42px;
    height: 42px;
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 11px;
    color: #315b23;
    background: #e4efd9;
    font-weight: 800;
}

.vendor-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-product-row summary > b {
    padding: 5px 7px;
    border-radius: 999px;
    font-size: .65rem;
}

.vendor-product-row summary > b.is-live { color: #397221; background: #e8f5dd; }
.vendor-product-row summary > b.is-offline { color: #7a6251; background: #f2ece8; }

.vendor-edit-form {
    margin: 0;
    padding: 18px;
    border-top: 1px solid var(--app-line);
    background: rgba(244, 247, 245, .55);
}

.vendor-archive-form {
    padding: 0 18px 18px;
    background: rgba(244, 247, 245, .55);
}

.vendor-archive-form button {
    color: #a33e36;
    background: rgba(197, 79, 67, .09);
}

.vendor-settings-stack,
.vendor-settings-section {
    display: grid;
    gap: 18px;
}

.vendor-settings-section {
    scroll-margin-top: 110px;
}

.vendor-knowledge-input {
    min-height: 230px;
}

.vendor-form-actions {
    position: sticky;
    bottom: 16px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 30px rgba(16, 32, 25, .09);
    backdrop-filter: blur(12px);
}

.vendor-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.vendor-plan-card {
    padding: 20px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: var(--app-bg);
}

.vendor-plan-card.is-current {
    border-color: rgba(111, 186, 59, .45);
    background: linear-gradient(145deg, #f2f9e9, #fffdf4);
    box-shadow: inset 0 0 0 1px rgba(111, 186, 59, .14);
}

.vendor-plan-card > span,
.vendor-plan-card > small {
    color: var(--app-muted);
    font-size: .7rem;
    font-weight: 700;
}

.vendor-plan-card h3 {
    margin: 12px 0 6px;
    font: 700 1.25rem "Space Grotesk", sans-serif;
}

.vendor-plan-card p {
    margin: 0 0 14px;
    color: var(--app-muted);
    font-size: .76rem;
}

.vendor-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vendor-security-row strong,
.vendor-security-row small {
    display: block;
}

.vendor-security-row strong { font-size: .82rem; }
.vendor-security-row small { margin-top: 5px; color: var(--app-muted); font-size: .72rem; }

.dashboard-notification-empty {
    padding: 28px 16px;
    color: var(--app-muted);
    font-size: .72rem;
    text-align: center;
}

html[data-theme="dark"] .vendor-message.is-assistant,
html[data-theme="dark"] .vendor-edit-form,
html[data-theme="dark"] .vendor-archive-form,
html[data-theme="dark"] .vendor-plan-card {
    background: #17261e;
}

html[data-theme="dark"] .vendor-form-actions {
    background: rgba(20, 34, 27, .9);
}

@media (max-width: 1080px) {
    .vendor-catalog-layout,
    .vendor-conversation-layout {
        grid-template-columns: 1fr;
    }

    .vendor-form-panel {
        position: static;
    }

    .vendor-conversation-layout {
        min-height: 0;
    }

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

@media (max-width: 650px) {
    .vendor-page-head,
    .vendor-security-row,
    .vendor-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-record-count {
        width: fit-content;
    }

    .vendor-form,
    .vendor-plan-grid {
        grid-template-columns: 1fr;
    }

    .vendor-form .is-wide {
        grid-column: auto;
    }

    .vendor-product-row summary {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .vendor-product-row summary > span:nth-child(3) {
        display: none;
    }

    .vendor-message {
        width: 90%;
    }
}

/* WhatsApp disconnect confirmation */
.dashboard-modal-open {
    overflow: hidden;
}

.dash-confirm-modal[hidden] {
    display: none;
}

.dash-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 180ms ease;
}

.dash-confirm-modal.is-open {
    opacity: 1;
}

.dash-confirm-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 23, 16, .66);
    backdrop-filter: blur(7px);
    cursor: default;
}

.dash-confirm-panel {
    position: relative;
    width: min(460px, 100%);
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 24px;
    color: var(--app-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(239, 144, 119, .18), transparent 34%),
        var(--app-surface);
    box-shadow: 0 32px 90px rgba(4, 18, 11, .32);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.dash-confirm-modal.is-open .dash-confirm-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dash-confirm-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-muted);
    background: rgba(255, 255, 255, .68);
    font-size: 1.25rem;
    cursor: pointer;
}

.dash-confirm-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 17px;
    color: #b3463b;
    background: linear-gradient(145deg, #ffe5df, #fff2d8);
    box-shadow: 0 12px 26px rgba(179, 70, 59, .15);
}

.dash-confirm-panel h3 {
    margin: 7px 0 0;
    font: 700 1.35rem "Space Grotesk", sans-serif;
    letter-spacing: -.035em;
}

.dash-confirm-panel > p {
    margin: 10px 0 0;
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.6;
}

.dash-confirm-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding: 13px 14px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: var(--app-bg);
}

.dash-confirm-number span,
.dash-confirm-number strong {
    font-size: .76rem;
}

.dash-confirm-number span {
    color: var(--app-muted);
}

.dash-confirm-number strong {
    overflow-wrap: anywhere;
    text-align: right;
}

.dash-confirm-panel .dash-confirm-note {
    padding-left: 12px;
    border-left: 3px solid var(--dash-yellow);
    font-size: .72rem;
}

.dash-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.dash-confirm-danger {
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #c95447, #a93931);
    box-shadow: 0 10px 22px rgba(169, 57, 49, .2);
}

.dash-confirm-danger:hover {
    background: linear-gradient(135deg, #b9473c, #942f29);
}

.dash-confirm-danger:disabled {
    cursor: not-allowed;
    opacity: .72;
}

html[data-theme="dark"] .dash-confirm-panel {
    border-color: rgba(255, 255, 255, .09);
    background:
        radial-gradient(circle at 100% 0, rgba(239, 144, 119, .13), transparent 34%),
        #14221b;
}

html[data-theme="dark"] .dash-confirm-close {
    background: #1d2d25;
}

@media (max-width: 520px) {
    .dash-confirm-panel {
        padding: 25px 20px 20px;
        border-radius: 20px;
    }

    .dash-confirm-actions {
        grid-template-columns: 1fr;
    }

    .dash-confirm-actions .dash-button {
        width: 100%;
    }
}