@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Playfair+Display:wght@600;700&display=swap');

/*
|--------------------------------------------------------------------------
| CRAFID Brand System V2
| Logo palette: Espresso, Crafid Brown, Ivory, Champagne
|--------------------------------------------------------------------------
*/

:root {
    --crafid-espresso: #2C1D17;
    --crafid-deep: #4B3026;
    --crafid-primary: #7C4E2C;
    --crafid-primary-hover: #633F2D;
    --crafid-champagne: #D6B795;
    --crafid-champagne-soft: #E2C8AB;
    --crafid-ivory: #FEF8EE;
    --crafid-ivory-soft: #F8F0E5;
    --crafid-paper: #FFFCF7;
    --crafid-ink: #2F211A;
    --crafid-muted: #655348;
    --crafid-border: #D9CCBF;
    --crafid-success: #2E7355;
    --crafid-warning: #A26622;
    --crafid-danger: #A9403A;
    --crafid-shadow-sm: 0 1px 2px rgba(44, 29, 23, .06);
    --crafid-shadow-md: 0 8px 24px rgba(44, 29, 23, .08);
    --crafid-radius-sm: 10px;
    --crafid-radius-md: 14px;
    --crafid-radius-lg: 18px;
}

html {
    font-size: 16px;
    background: var(--crafid-ivory-soft);
}

html body {
    margin: 0;
    color: var(--crafid-ink) !important;
    background: #F7F2EA !important;
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html body :where(button, input, select, textarea, option) {
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif !important;
}

html body :where(h1, h2, h3, .display-title, .page-title, .hero-title) {
    color: var(--crafid-espresso) !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}

html body h1 {
    font-size: clamp(2.35rem, 5vw, 3.9rem) !important;
}

html body h2 {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

html body h3 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

html body :where(p, li, td, label) {
    font-size: max(14px, .9rem);
}

html body :where(small, .help, [class*="eyebrow"], [class*="kicker"]) {
    font-size: max(12px, .76rem) !important;
}

html body a {
    text-underline-offset: .2em;
}

/* Shared navigation */
html body .nav {
    background:
        radial-gradient(circle at 16% -20%, rgba(214, 183, 149, .14), transparent 42%),
        linear-gradient(135deg, var(--crafid-deep), var(--crafid-espresso)) !important;
    border-bottom: 1px solid rgba(255, 248, 238, .12) !important;
    box-shadow: 0 10px 30px rgba(44, 29, 23, .14);
}

html body .nav-inner {
    min-height: 76px;
}

html body .brand img {
    width: 198px;
    max-width: min(42vw, 198px);
    height: auto;
}

html body .nav .muted,
html body .nav-user {
    color: rgba(254, 248, 238, .74) !important;
    font-size: 14px;
}

html body .nav .btn-light {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(214, 183, 149, .35) !important;
    background: rgba(254, 248, 238, .96) !important;
    color: var(--crafid-deep) !important;
    box-shadow: 0 7px 18px rgba(44, 29, 23, .08);
    font-size: 14px !important;
}

html body .nav .btn-light:hover {
    border-color: var(--crafid-champagne) !important;
    background: #FFFFFF !important;
    color: var(--crafid-primary) !important;
    transform: translateY(-1px);
}

html body .nav-toggle {
    border-color: rgba(214, 183, 149, .34) !important;
    background: rgba(254, 248, 238, .08) !important;
    color: var(--crafid-ivory) !important;
}

/* Shared content */
html body .main {
    padding: 42px 0 76px;
    background: transparent !important;
}

html body .container {
    width: min(1160px, calc(100% - 40px));
}

html body :where(.card, [class*="-card"], [class*="_card"]) {
    border-color: var(--crafid-border) !important;
}

html body .card {
    border-radius: var(--crafid-radius-lg);
    background: rgba(255, 252, 247, .96) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .page-head {
    margin-bottom: 28px;
}

html body .page-head h1 {
    margin-bottom: 8px;
}

html body .muted,
html body [class*="subtitle"],
html body [class*="description"],
html body [class*="summary"] {
    color: var(--crafid-muted) !important;
}

/* Buttons and links */
html body :where(.btn, a[class*="-btn"], button[class*="-btn"], span[class*="-btn"]) {
    min-height: 42px;
    border-radius: var(--crafid-radius-sm) !important;
    font-family: "DM Sans", Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

html body :where(.btn, a[class*="-btn"], button[class*="-btn"]):hover {
    transform: translateY(-1px);
}

html body .btn-primary,
html body :where(a, button, span)[class*="btn"][class~="dark"],
html body button[type="submit"][class*="btn"]:not([class*="danger"]),
html body [class*="button"][class*="primary"],
html body [class*="cta"][class*="primary"] {
    border-color: var(--crafid-primary) !important;
    background: linear-gradient(135deg, #8B5B38, var(--crafid-primary)) !important;
    color: var(--crafid-ivory) !important;
    box-shadow: 0 11px 26px rgba(124, 78, 44, .18) !important;
}

html body .btn-primary:hover,
html body :where(a, button)[class*="btn"][class~="dark"]:hover,
html body button[type="submit"][class*="btn"]:not([class*="danger"]):hover {
    background: linear-gradient(135deg, var(--crafid-primary), var(--crafid-primary-hover)) !important;
}

html body .btn-light,
html body .btn-secondary {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    color: var(--crafid-deep) !important;
}

html body .btn-danger {
    color: var(--crafid-danger) !important;
}

/* Forms */
html body :where(input, select, textarea) {
    min-height: 46px;
    border: 1px solid var(--crafid-border) !important;
    border-radius: var(--crafid-radius-sm) !important;
    background: var(--crafid-paper) !important;
    color: var(--crafid-ink) !important;
    font-size: 15px !important;
}

html body textarea {
    min-height: 120px;
}

html body :where(input, select, textarea):focus {
    border-color: var(--crafid-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(214, 183, 149, .22) !important;
}

html body label {
    color: var(--crafid-deep);
    font-size: 14px !important;
    font-weight: 700;
}

/* Statuses */
html body :where(.badge, [class*="-chip"], [class*="-pill"]) {
    min-height: 26px;
    padding: 6px 10px;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html body :where(.badge-published, .badge-paid, .badge-success, [class*="active"][class*="chip"]) {
    background: #E6F2EC !important;
    color: var(--crafid-success) !important;
}

html body :where(.badge-pending, .badge-waiting) {
    background: #F8EBD9 !important;
    color: var(--crafid-warning) !important;
}

html body :where(.badge-rejected, .badge-cancelled) {
    background: #F9E4E1 !important;
    color: var(--crafid-danger) !important;
}

/* Premium dark surfaces */
html body :where(.plan-banner, .payment-box[class*="dark"], section[class*="-current"], [class*="hero-card"], [class*="project-card"], [class*="wedding-card"]) {
    border-color: rgba(254, 248, 238, .12) !important;
    background:
        radial-gradient(circle at 88% 5%, rgba(226, 200, 171, .16), transparent 30%),
        linear-gradient(145deg, #805233 0%, var(--crafid-deep) 62%, var(--crafid-espresso) 100%) !important;
    color: var(--crafid-ivory) !important;
    box-shadow: var(--crafid-shadow-md) !important;
}

html body :where(.plan-banner, section[class*="-current"], [class*="hero-card"], [class*="project-card"], [class*="wedding-card"]) :where(h1, h2, h3, strong) {
    color: var(--crafid-ivory) !important;
}

html body :where(.plan-banner, section[class*="-current"], [class*="hero-card"], [class*="project-card"], [class*="wedding-card"]) :where(p, small, .muted, [class*="label"]) {
    color: rgba(254, 248, 238, .76) !important;
}

/* Pricing page */
html body .c48 {
    color: var(--crafid-ink) !important;
}

html body .c48-hero {
    padding-top: clamp(18px, 3vw, 40px);
}

html body .c48-hero h1 {
    max-width: 840px;
    margin-inline: auto;
    color: var(--crafid-espresso) !important;
    font-size: clamp(2.55rem, 5vw, 4rem) !important;
}

html body .c48-hero p,
html body .c48-summary {
    color: var(--crafid-muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

html body .c48-current {
    border: 1px solid rgba(254, 248, 238, .12) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(226, 200, 171, .16), transparent 26%),
        linear-gradient(135deg, #805233, var(--crafid-deep) 60%, var(--crafid-espresso)) !important;
    box-shadow: var(--crafid-shadow-md) !important;
}

html body .c48-plan {
    border: 1px solid var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .c48-plan.featured {
    border-color: var(--crafid-champagne) !important;
    box-shadow: 0 20px 50px rgba(124, 78, 44, .15) !important;
}

html body .c48-price {
    color: var(--crafid-primary) !important;
    font-size: clamp(1.9rem, 3vw, 2.3rem) !important;
}

html body .c48-cap {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-ivory-soft) !important;
}

html body .c48-chip.popular {
    background: var(--crafid-primary) !important;
    color: var(--crafid-ivory) !important;
}

html body .c48-table-wrap,
html body .table-wrap {
    border-radius: var(--crafid-radius-md);
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper);
}

/* Tables, empty states, guest and utility panels */
html body :where(.data-table, table) th {
    color: var(--crafid-primary) !important;
    font-size: 12px !important;
    letter-spacing: .075em;
}

html body :where(.data-table, table) td {
    border-color: var(--crafid-border) !important;
    color: var(--crafid-ink);
    font-size: 14px !important;
}

html body :where(.empty-box, .personal-url, .payment-box, [class*="empty-state"], [class*="soft-panel"]) {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-ivory-soft) !important;
}

html body :where(.guest-item, .gift-admin-item, .gallery-admin-item, [class*="list-item"]) {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    box-shadow: 0 5px 18px rgba(75, 48, 38, .045);
}

html body :where(.stat-number, .payment-number, [class*="metric-value"], [class*="stat-value"]) {
    color: var(--crafid-primary) !important;
    font-family: "Playfair Display", Georgia, serif !important;
}

/* Dashboard family: Usage, subscription and related account screens */
html body :where(.crafid-v40-sidebar, [class*="v40-sidebar"], [class*="dashboard-sidebar"]) {
    background:
        radial-gradient(circle at 24% 0%, rgba(254, 248, 238, .08), transparent 28%),
        linear-gradient(180deg, var(--crafid-deep) 0%, var(--crafid-espresso) 100%) !important;
    border-color: rgba(254, 248, 238, .08) !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-side-brand {
    min-height: 82px;
    padding: 18px 16px !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-side-brand::before {
    content: "";
    display: block;
    width: 172px;
    height: 54px;
    flex: 0 0 172px;
    background: url('/images/brand/crafid-logo.png') left center / contain no-repeat;
}

html body .v40-brand-mark,
html body .v40-brand-copy strong {
    display: none !important;
}

html body .v40-brand-copy {
    display: none !important;
}

html body .v40-nav-group > :where(small, span:first-child) {
    color: rgba(254, 248, 238, .55) !important;
}

html body .v40-nav-item {
    min-height: 42px;
    color: rgba(254, 248, 238, .76) !important;
    font-family: "DM Sans", Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

html body .v40-nav-item:hover {
    background: rgba(254, 248, 238, .07) !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-nav-item.active {
    background: linear-gradient(135deg, #F2DFC2, var(--crafid-champagne)) !important;
    color: var(--crafid-deep) !important;
    box-shadow: 0 10px 28px rgba(44, 29, 23, .2) !important;
}

html body .saas-main {
    background:
        radial-gradient(circle at 86% 5%, rgba(214, 183, 149, .14), transparent 28%),
        var(--crafid-ivory-soft) !important;
}

html body .saas-page-head h1 {
    color: var(--crafid-espresso) !important;
    font-size: clamp(2.2rem, 4vw, 3.25rem) !important;
}

html body .saas-page-head p {
    color: var(--crafid-muted) !important;
    font-size: 15px !important;
}

html body .saas-card {
    border-color: var(--crafid-border) !important;
    border-radius: var(--crafid-radius-lg) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .saas-stat-number {
    color: var(--crafid-primary) !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(1.8rem, 3vw, 2.25rem) !important;
}

html body .saas-btn,
html body .saas-btn-dark {
    min-height: 44px;
    border-radius: var(--crafid-radius-sm) !important;
    font-family: "DM Sans", Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

html body .saas-btn-dark {
    border-color: var(--crafid-primary) !important;
    background: linear-gradient(135deg, #8B5B38, var(--crafid-primary)) !important;
    color: var(--crafid-ivory) !important;
}

/* Guest CRM, RSVP analytics and Split Invitation workspaces */
html body header[class*="topbar"] {
    min-height: 78px;
    padding: 12px 22px !important;
    border-bottom: 1px solid rgba(254, 248, 238, .12) !important;
    background:
        radial-gradient(circle at 14% -30%, rgba(214, 183, 149, .18), transparent 40%),
        linear-gradient(135deg, var(--crafid-deep), var(--crafid-espresso)) !important;
    box-shadow: 0 12px 32px rgba(44, 29, 23, .15) !important;
    color: var(--crafid-ivory) !important;
}

html body .brand:has(.brand-mark),
html body .brand:has(.mark) {
    min-width: 250px;
    color: var(--crafid-ivory) !important;
}

html body .brand:has(.brand-mark)::before,
html body .brand:has(.mark)::before {
    content: "";
    display: block;
    width: 160px;
    height: 50px;
    flex: 0 0 160px;
    background: url('/images/brand/crafid-logo.png') left center / contain no-repeat;
}

html body .brand:has(.brand-mark) .brand-mark,
html body .brand:has(.brand-mark) strong,
html body .brand:has(.mark) .mark,
html body .brand:has(.mark) strong {
    display: none !important;
}

html body .brand:has(.brand-mark) small,
html body .brand:has(.mark) small {
    color: rgba(254, 248, 238, .7) !important;
    font-size: 12px !important;
}

html body header[class*="topbar"] .top-actions .btn,
html body header[class*="topbar"] .actions .btn {
    border-color: rgba(214, 183, 149, .32) !important;
    background: rgba(254, 248, 238, .96) !important;
    color: var(--crafid-deep) !important;
}

html body header[class*="topbar"] .top-actions .btn-dark,
html body header[class*="topbar"] .actions .btn-dark {
    border-color: var(--crafid-champagne) !important;
    background: linear-gradient(135deg, #9A6742, var(--crafid-primary)) !important;
    color: var(--crafid-ivory) !important;
}

html body :where(.crm-shell, .rsvp-shell, .analytics-shell, .split-shell) {
    color: var(--crafid-ink) !important;
    background:
        radial-gradient(circle at 88% 4%, rgba(214, 183, 149, .13), transparent 28%),
        var(--crafid-ivory-soft) !important;
    font-family: "DM Sans", Inter, sans-serif !important;
}

html body :where(.crm-page, .rsvp-page, .analytics-page, .split-page) {
    background: transparent !important;
}

html body :where(.crm-page, .rsvp-page, .analytics-page, .split-page) .hero h1 {
    color: var(--crafid-espresso) !important;
    font-size: clamp(2.35rem, 4vw, 3.4rem) !important;
}

html body :where(.plan-pill, .stat, .workspace, .analytics-card, .split-card, .funnel-card) {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .stat strong {
    color: var(--crafid-primary) !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(1.9rem, 3vw, 2.35rem) !important;
}

html body .workspace {
    border-radius: var(--crafid-radius-lg) !important;
}

html body .bulkbar,
html body table thead th {
    background: var(--crafid-ivory-soft) !important;
}

html body .segment {
    min-height: 34px;
    padding: 7px 11px !important;
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    color: var(--crafid-muted) !important;
    font-size: 11px !important;
}

html body .segment.active {
    border-color: var(--crafid-primary) !important;
    background: var(--crafid-primary) !important;
    color: var(--crafid-ivory) !important;
}

html body .personal-url {
    color: var(--crafid-deep) !important;
    font-size: 11px !important;
}

/* WhatsApp campaign workspace */
html body:has(.wrap > .top) {
    background:
        radial-gradient(circle at 88% 4%, rgba(214, 183, 149, .15), transparent 30%),
        var(--crafid-ivory-soft) !important;
    padding: 0 !important;
    overflow-x: hidden;
}

html body:has(.wrap > .top) .wrap {
    width: min(1240px, calc(100% - 40px));
    color: var(--crafid-ink) !important;
    font-family: "DM Sans", Inter, sans-serif !important;
}

html body:has(.wrap > .top) .wrap > .top {
    min-height: 108px;
    margin: 18px 0 22px;
    padding: 20px 24px !important;
    border: 1px solid rgba(254, 248, 238, .12) !important;
    border-radius: var(--crafid-radius-lg);
    background:
        radial-gradient(circle at 90% 8%, rgba(226, 200, 171, .16), transparent 28%),
        linear-gradient(135deg, var(--crafid-deep), var(--crafid-espresso)) !important;
    box-shadow: var(--crafid-shadow-md);
    color: var(--crafid-ivory) !important;
}

html body:has(.wrap > .top) .wrap > .top::before {
    content: "";
    display: block;
    width: 190px;
    height: 58px;
    flex: 0 0 190px;
    background: url('/images/brand/crafid-logo.png') left center / contain no-repeat;
}

html body:has(.wrap > .top) .wrap > .top > div:first-child {
    margin-right: auto;
}

html body:has(.wrap > .top) .wrap > .top h1 {
    margin: 0 0 4px;
    color: var(--crafid-ivory) !important;
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
}

html body:has(.wrap > .top) .wrap > .top :where(p, small, [class*="eyebrow"]) {
    color: rgba(254, 248, 238, .7) !important;
}

html body:has(.wrap > .top) .wrap > .top .btn {
    border-color: rgba(214, 183, 149, .32) !important;
    background: rgba(254, 248, 238, .96) !important;
    color: var(--crafid-deep) !important;
}

html body:has(.wrap > .top) .card {
    border-color: var(--crafid-border) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body:has(.wrap > .top) .card > .head {
    border-color: var(--crafid-border) !important;
    background: linear-gradient(180deg, #FFFDF9, var(--crafid-ivory-soft)) !important;
}

html body:has(.wrap > .top) .card > .head strong {
    color: var(--crafid-primary) !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 1.15rem !important;
}

html body * {
    scrollbar-color: var(--crafid-champagne) transparent;
}

html body ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--crafid-champagne) !important;
}

html body ::-webkit-scrollbar-thumb:hover {
    background: var(--crafid-primary) !important;
}

@media (max-width: 900px) {
    html body .container {
        width: min(100% - 32px, 1160px);
    }

    html body .c48-hero h1 {
        font-size: clamp(2.4rem, 7vw, 3.5rem) !important;
    }
}

@media (max-width: 760px) {
    html body .nav-inner {
        min-height: 68px;
    }

    html body .brand img {
        width: 150px;
        max-width: 58vw;
    }

    html body .nav-actions {
        border-color: var(--crafid-border) !important;
        background: rgba(255, 252, 247, .98) !important;
        box-shadow: 0 24px 60px rgba(44, 29, 23, .22) !important;
    }

    html body .main {
        padding: 28px 0 54px;
    }

    html body .container {
        width: min(100% - 24px, 1160px);
    }

    html body .card {
        padding: 20px;
        border-radius: 20px;
    }

    html body h1,
    html body .c48-hero h1 {
        font-size: clamp(2.15rem, 10vw, 3rem) !important;
    }

    html body :where(.btn, a[class*="-btn"], button[class*="-btn"], span[class*="-btn"]) {
        min-height: 44px;
        font-size: 14px !important;
    }

    html body .c48-hero p,
    html body .c48-summary {
        font-size: 14px !important;
    }

    html body :where(.crafid-v40-sidebar, [class*="v40-sidebar"], [class*="dashboard-sidebar"]) {
        border-bottom-color: rgba(254, 248, 238, .1) !important;
    }

    html body .v40-side-brand::before {
        width: 148px;
        height: 46px;
        flex-basis: 148px;
    }

    html body header[class*="topbar"] {
        align-items: flex-start;
        padding: 11px 14px !important;
    }

    html body .brand:has(.brand-mark),
    html body .brand:has(.mark) {
        min-width: 0;
    }

    html body .brand:has(.brand-mark)::before,
    html body .brand:has(.mark)::before {
        width: 142px;
        height: 44px;
        flex-basis: 142px;
    }

    html body header[class*="topbar"] .top-actions,
    html body header[class*="topbar"] .actions {
        width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

    html body :where(.crm-page, .rsvp-page, .analytics-page, .split-page) .hero h1 {
        font-size: clamp(2.1rem, 10vw, 2.75rem) !important;
    }

    html body:has(.wrap > .top) .wrap {
        width: min(100% - 24px, 1240px);
    }

    html body:has(.wrap > .top) .wrap > .top {
        align-items: flex-start;
        padding: 18px !important;
        flex-wrap: wrap;
    }

    html body:has(.wrap > .top) .wrap > .top::before {
        width: 150px;
        height: 46px;
        flex-basis: 150px;
    }

    html body:has(.wrap > .top) .wrap > .top .actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    html body .container {
        width: min(100% - 20px, 1160px);
    }

    html body .brand img {
        width: 142px;
    }

    html body h1,
    html body .c48-hero h1 {
        font-size: clamp(2rem, 11vw, 2.55rem) !important;
    }
}

/*
|--------------------------------------------------------------------------
| Brand discipline refinement — quieter navigation, stronger hierarchy
|--------------------------------------------------------------------------
*/

html body {
    background: #F7F2EA !important;
}

html body :where(h1, h2, h3, .display-title, .page-title, .hero-title) {
    letter-spacing: -.032em !important;
}

html body h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.55rem) !important;
}

html body :where(p, li, td, label, .muted, [class*="subtitle"], [class*="description"], [class*="summary"]) {
    color: var(--crafid-muted) !important;
    line-height: 1.65;
}

html body :where(small, .help, [class*="eyebrow"], [class*="kicker"]) {
    color: var(--crafid-muted) !important;
    font-weight: 600;
}

html body :where([class*="eyebrow"], [class*="kicker"]) {
    letter-spacing: .12em !important;
}

html body .nav,
html body header[class*="topbar"] {
    background: var(--crafid-espresso) !important;
    box-shadow: none !important;
}

html body .nav-inner {
    min-height: 72px;
}

html body .brand img {
    width: 176px;
    max-width: min(42vw, 176px);
}

html body .nav-user {
    display: none !important;
}

html body .nav-actions {
    gap: 2px !important;
}

html body .nav .nav-actions > a.btn-light,
html body .nav .nav-actions > form .btn-light {
    min-height: 40px;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(254, 248, 238, .78) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

html body .nav .nav-actions > a.btn-light:hover,
html body .nav .nav-actions > form .btn-light:hover,
html body .nav .nav-actions > a.btn-light[aria-current="page"] {
    background: rgba(254, 248, 238, .07) !important;
    color: var(--crafid-ivory) !important;
}

html body .nav .nav-actions > a[href$="/dashboard"] { order: -4; }
html body .nav .nav-actions > a[href$="/paket"] { order: -3; }
html body .nav .nav-actions > a[href$="/pesanan"] { order: -2; }
html body .nav .nav-actions > a[href$="/admin"] { order: -1; }

html body .main {
    padding: 50px 0 84px;
}

html body .card,
html body .saas-card,
html body :where(.plan-pill, .stat, .workspace, .analytics-card, .split-card, .funnel-card),
html body:has(.wrap > .top) .card {
    border: 1px solid var(--crafid-border) !important;
    border-radius: var(--crafid-radius-lg) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body :where(.btn, a[class*="-btn"], button[class*="-btn"], span[class*="-btn"]) {
    box-shadow: none !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease !important;
}

html body :where(.btn, a[class*="-btn"], button[class*="-btn"]):hover {
    transform: none !important;
}

html body .btn-primary,
html body .btn.btn-dark,
html body button.btn-dark,
html body a.btn-dark,
html body .saas-btn-dark,
html body button[type="submit"][class*="btn"]:not([class*="danger"]) {
    border-color: var(--crafid-primary) !important;
    background: var(--crafid-primary) !important;
    color: var(--crafid-ivory) !important;
    box-shadow: none !important;
}

html body .btn-primary:hover,
html body .btn.btn-dark:hover,
html body button.btn-dark:hover,
html body a.btn-dark:hover,
html body .saas-btn-dark:hover {
    border-color: var(--crafid-primary-hover) !important;
    background: var(--crafid-primary-hover) !important;
}

html body :where(.plan-banner, .payment-box[class*="dark"], section[class*="-current"], [class*="hero-card"], [class*="project-card"], [class*="wedding-card"]),
html body .c48-current {
    background: var(--crafid-deep) !important;
    box-shadow: none !important;
}

html body :where(.plan-banner, section[class*="-current"], [class*="hero-card"], [class*="project-card"], [class*="wedding-card"]) :where(p, small, .muted, [class*="label"]) {
    color: rgba(254, 248, 238, .84) !important;
}

html body .c48-hero {
    padding-top: clamp(30px, 5vw, 60px);
    padding-bottom: clamp(30px, 5vw, 56px);
}

html body .c48-plan,
html body .c48-plan.featured {
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .c48-plan.featured {
    border-width: 1.5px !important;
}

html body :where(.data-table, table) th {
    color: var(--crafid-deep) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .065em;
}

html body :where(.data-table, table) td {
    color: var(--crafid-ink) !important;
    font-size: 14px !important;
}

html body :where(.guest-item, .gift-admin-item, .gallery-admin-item, [class*="list-item"]) {
    box-shadow: none !important;
}

/* Dashboard sidebar and line-icon system */
html body :where(.crafid-v40-sidebar, [class*="v40-sidebar"], [class*="dashboard-sidebar"]) {
    background: var(--crafid-espresso) !important;
}

html body .v40-side-brand {
    min-height: 78px;
    padding: 16px 14px !important;
    background-image: none !important;
}

html body .v40-side-brand::before {
    width: 160px;
    height: 50px;
    flex-basis: 160px;
}

html body .v40-nav-group > :where(small, span:first-child) {
    color: rgba(254, 248, 238, .66) !important;
}

html body .v40-nav-item {
    min-height: 42px;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 7px !important;
    color: rgba(254, 248, 238, .80) !important;
}

html body .v40-nav-item:hover {
    background: rgba(254, 248, 238, .055) !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-nav-item.active {
    border-left-color: var(--crafid-champagne) !important;
    background: rgba(214, 183, 149, .13) !important;
    color: var(--crafid-ivory) !important;
    box-shadow: none !important;
}

html body :where(.v40-nav-item.disabled, .v40-nav-item[aria-disabled="true"], span.v40-nav-item) {
    color: rgba(254, 248, 238, .72) !important;
    opacity: .76 !important;
}

html body .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%3E%3Ccircle%20cx='12'%20cy='12'%20r='7'/%3E%3C/svg%3E");
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    overflow: hidden;
    background: currentColor !important;
    font-size: 0 !important;
    -webkit-mask: var(--crafid-nav-icon) center / contain no-repeat;
    mask: var(--crafid-nav-icon) center / contain no-repeat;
}

html body .v40-nav-item[href$="/dashboard"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%3E%3Crect%20x='3.5'%20y='3.5'%20width='6'%20height='6'%20rx='1'/%3E%3Crect%20x='14.5'%20y='3.5'%20width='6'%20height='6'%20rx='1'/%3E%3Crect%20x='3.5'%20y='14.5'%20width='6'%20height='6'%20rx='1'/%3E%3Crect%20x='14.5'%20y='14.5'%20width='6'%20height='6'%20rx='1'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="#wedding-projects"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%208.7c0%205-8%209.3-8%209.3S4%2013.7%204%208.7C4%205.6%206.2%204%208.5%204c1.5%200%202.8.8%203.5%202%20.7-1.2%202-2%203.5-2C17.8%204%2020%205.6%2020%208.7Z'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/builder"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m14.5%205.5%204%204M4%2020l1.2-4.8L16.7%203.7a1.5%201.5%200%200%201%202.1%200l1.5%201.5a1.5%201.5%200%200%201%200%202.1L8.8%2018.8%204%2020Z'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/crm/guests"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='17'%20cy='9'%20r='2.3'/%3E%3Cpath%20d='M3.5%2019c.5-3.3%202.5-5%205.5-5s5%201.7%205.5%205M14%2015c3.6-.5%205.7.8%206.5%203.5'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/crm/rsvp"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='m8%2012%202.5%202.5L16%209'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/check-in"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%3E%3Cpath%20d='M4%209V4h5M15%204h5v5M20%2015v5h-5M9%2020H4v-5'/%3E%3Crect%20x='8'%20y='8'%20width='8'%20height='8'%20rx='1'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/crm/whatsapp"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2018.5%203.5%2021l3.4-1a8.6%208.6%200%201%200-1.9-1.5Z'/%3E%3Cpath%20d='M8.5%2012h7M8.5%208.5h7'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/dashboard/usage"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/paket"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203%2021%2010l-9%2011L3%2010l9-7Z'/%3E%3Cpath%20d='m3%2010%209%203%209-3M12%2013v8'/%3E%3C/svg%3E");
}

html body .v40-nav-item[href*="/pesanan"] .v40-nav-icon {
    --crafid-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M6%203h12v18l-3-2-3%202-3-2-3%202V3Z'/%3E%3Cpath%20d='M9%208h6M9%2012h6'/%3E%3C/svg%3E");
}

html body .saas-main,
html body :where(.crm-shell, .rsvp-shell, .analytics-shell, .split-shell),
html body:has(.wrap > .top) {
    background: #F7F2EA !important;
}

html body .saas-page-head h1,
html body :where(.crm-page, .rsvp-page, .analytics-page, .split-page) .hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.15rem) !important;
}

html body .saas-card,
html body .workspace {
    border-radius: var(--crafid-radius-lg) !important;
}

html body .saas-stat-number,
html body .stat strong {
    font-size: clamp(1.75rem, 2.5vw, 2.15rem) !important;
}

/* Dashboard command center follows the same restrained system */
html body .v40-topbar {
    min-height: 72px;
    border-bottom: 1px solid rgba(254, 248, 238, .12) !important;
    background: var(--crafid-espresso) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html body .v40-topbar-copy strong {
    color: var(--crafid-ivory) !important;
}

html body .v40-topbar-copy span {
    color: rgba(254, 248, 238, .78) !important;
    font-size: 12px !important;
}

html body .v40-top-actions {
    gap: 2px !important;
}

html body .v40-top-actions .v40-btn:not(.dark) {
    padding-inline: 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(254, 248, 238, .80) !important;
}

html body .v40-top-actions .v40-btn:not(.dark):hover {
    background: rgba(254, 248, 238, .07) !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-top-actions .v40-btn.dark {
    border-color: var(--crafid-champagne) !important;
    background: var(--crafid-champagne) !important;
    color: var(--crafid-espresso) !important;
}

html body .v40-content {
    padding: clamp(36px, 4vw, 64px) !important;
}

html body .v40-welcome {
    margin-bottom: 38px !important;
}

html body .v40-welcome p {
    color: var(--crafid-muted) !important;
    font-size: 15px !important;
}

html body .v40-plan,
html body .v40-card,
html body .v40-module {
    border: 1px solid var(--crafid-border) !important;
    border-radius: var(--crafid-radius-lg) !important;
    background: var(--crafid-paper) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
    backdrop-filter: none !important;
}

html body .v40-wedding-card {
    border-color: rgba(254, 248, 238, .14) !important;
    background: var(--crafid-deep) !important;
    box-shadow: none !important;
}

html body .v40-wedding-card::after {
    display: none !important;
}

html body .v40-wedding-card :where(p, span, small) {
    color: rgba(254, 248, 238, .82) !important;
}

html body .v40-wedding-card .v40-btn:not(.dark) {
    border-color: rgba(254, 248, 238, .30) !important;
    background: transparent !important;
    color: var(--crafid-ivory) !important;
}

html body .v40-wedding-card .v40-btn.dark {
    border-color: var(--crafid-champagne) !important;
    background: var(--crafid-champagne) !important;
    color: var(--crafid-espresso) !important;
}

html body .v40-next {
    border-top-width: 1px !important;
    background: var(--crafid-paper) !important;
}

html body .v40-module {
    min-height: 174px;
    padding: 22px !important;
}

html body .v40-module:hover {
    transform: none !important;
    border-color: var(--crafid-champagne) !important;
    box-shadow: var(--crafid-shadow-sm) !important;
}

html body .v40-module-icon {
    --crafid-module-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%3E%3Ccircle%20cx='12'%20cy='12'%20r='7'/%3E%3C/svg%3E");
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--crafid-primary) !important;
    color: transparent !important;
    font-size: 0 !important;
    -webkit-mask: var(--crafid-module-icon) center / contain no-repeat;
    mask: var(--crafid-module-icon) center / contain no-repeat;
}

html body .v40-module[href*="/crm/guests"] .v40-module-icon {
    --crafid-module-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='17'%20cy='9'%20r='2.3'/%3E%3Cpath%20d='M3.5%2019c.5-3.3%202.5-5%205.5-5s5%201.7%205.5%205M14%2015c3.6-.5%205.7.8%206.5%203.5'/%3E%3C/svg%3E");
}

html body .v40-module[href*="/crm/whatsapp"] .v40-module-icon {
    --crafid-module-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M5%2018.5%203.5%2021l3.4-1a8.6%208.6%200%201%200-1.9-1.5Z'/%3E%3Cpath%20d='M8.5%2012h7M8.5%208.5h7'/%3E%3C/svg%3E");
}

html body .v40-module[href*="/crm/rsvp"] .v40-module-icon {
    --crafid-module-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='m8%2012%202.5%202.5L16%209'/%3E%3C/svg%3E");
}

html body .v40-module[href*="/check-in"] .v40-module-icon {
    --crafid-module-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%3E%3Cpath%20d='M4%209V4h5M15%204h5v5M20%2015v5h-5M9%2020H4v-5'/%3E%3Crect%20x='8'%20y='8'%20width='8'%20height='8'%20rx='1'/%3E%3C/svg%3E");
}

html body .v40-module p {
    color: var(--crafid-muted) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

html body .v40-module > span:last-child {
    color: var(--crafid-muted) !important;
    font-size: 12px !important;
}

/* Guest/RSVP header: links, not a wall of pill buttons */
html body header[class*="topbar"] {
    min-height: 72px;
    padding: 11px max(20px, calc((100vw - 1440px) / 2)) !important;
}

html body .brand:has(.brand-mark),
html body .brand:has(.mark) {
    gap: 14px;
    min-width: 230px;
}

html body .brand:has(.brand-mark)::before,
html body .brand:has(.mark)::before {
    width: 154px;
    height: 48px;
    flex-basis: 154px;
}

html body .brand:has(.brand-mark) small,
html body .brand:has(.mark) small,
html body header[class*="topbar"] :where(.muted, p, small) {
    color: rgba(254, 248, 238, .82) !important;
}

html body header[class*="topbar"] .top-actions,
html body header[class*="topbar"] .actions {
    gap: 2px !important;
}

html body header[class*="topbar"] .top-actions .btn:not(.btn-dark),
html body header[class*="topbar"] .actions .btn:not(.btn-dark) {
    min-height: 40px;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(254, 248, 238, .80) !important;
    font-size: 13px !important;
}

html body header[class*="topbar"] .top-actions .btn:not(.btn-dark):hover,
html body header[class*="topbar"] .actions .btn:not(.btn-dark):hover {
    background: rgba(254, 248, 238, .07) !important;
    color: var(--crafid-ivory) !important;
}

html body header[class*="topbar"] .top-actions .btn-dark,
html body header[class*="topbar"] .actions .btn-dark {
    min-height: 40px;
    padding: 9px 14px !important;
    border-color: var(--crafid-champagne) !important;
    background: var(--crafid-champagne) !important;
    color: var(--crafid-espresso) !important;
}

/* WhatsApp workspace uses the same restrained brand bar */
html body:has(.wrap > .top) .wrap {
    width: min(1160px, calc(100% - 40px));
}

html body:has(.wrap > .top) .wrap > .top {
    width: 100vw;
    min-height: 76px;
    margin: 0 0 46px calc(50% - 50vw);
    padding: 11px max(20px, calc((100vw - 1160px) / 2)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(254, 248, 238, .12) !important;
    border-radius: 0 !important;
    background: var(--crafid-espresso) !important;
    box-shadow: none !important;
}

html body:has(.wrap > .top) .wrap > .top::before {
    width: 160px;
    height: 50px;
    flex-basis: 160px;
}

html body:has(.wrap > .top) .wrap > .top h1 {
    font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important;
}

html body:has(.wrap > .top) .wrap > .top :where(p, small, [class*="eyebrow"]) {
    color: rgba(254, 248, 238, .82) !important;
}

html body:has(.wrap > .top) .wrap > .top .btn {
    min-height: 40px;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(254, 248, 238, .82) !important;
}

html body:has(.wrap > .top) .wrap > .top .btn:hover {
    background: rgba(254, 248, 238, .07) !important;
    color: var(--crafid-ivory) !important;
}

html body:has(.wrap > .top) .card > .head {
    background: var(--crafid-paper) !important;
}

/* Responsive layout contract: desktop, tablet, mobile */
@media (max-width: 1100px) {
    html body .v40-content {
        padding: 36px 28px 56px !important;
    }

    html body .v40-command {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .v40-wedding-card,
    html body .v40-next {
        width: 100%;
        min-width: 0;
    }

    html body .v40-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    html body .v40-content {
        padding: 30px 20px 52px !important;
    }

    html body .v40-welcome {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .v40-plan {
        width: 100%;
        min-width: 0;
    }

    html body .v40-lower {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .v40-mobile-nav {
        max-width: 100vw;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    html body .v40-mobile-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 760px) {
    html body {
        overflow-x: hidden;
    }

    html body .v40-content {
        width: 100%;
        padding: 24px 14px 46px !important;
    }

    html body .v40-welcome {
        gap: 18px !important;
        margin-bottom: 24px !important;
    }

    html body .v40-welcome h1 {
        max-width: 100%;
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        line-height: 1.02 !important;
    }

    html body .v40-welcome p {
        margin-top: 12px;
        font-size: 14px !important;
    }

    html body .v40-command {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    html body .v40-wedding-card {
        min-height: 0 !important;
        padding: 22px !important;
        overflow: hidden;
    }

    html body .v40-wedding-card h2 {
        max-width: 100%;
        font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
        line-height: .98 !important;
        overflow-wrap: anywhere;
    }

    html body .v40-wedding-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body .v40-wedding-actions .v40-btn {
        width: 100%;
        min-width: 0;
    }

    html body .v40-wedding-actions .v40-btn:first-child {
        grid-column: 1 / -1;
    }

    html body .v40-project-stats {
        position: static !important;
        inset: auto !important;
        width: 100%;
        margin-top: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .v40-mini-stat {
        min-width: 0;
    }

    html body .v40-next {
        min-height: 0 !important;
        padding: 22px !important;
    }

    html body .v40-next h3 {
        font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
    }

    html body .v40-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body .v40-module {
        min-width: 0;
        min-height: 0 !important;
        padding: 18px !important;
    }

    html body .v40-project-row,
    html body .v40-project-actions,
    html body .v40-section-head {
        min-width: 0;
    }

    html body .nav .nav-actions > a.btn-light,
    html body .nav .nav-actions > form,
    html body .nav .nav-actions > form .btn-light {
        width: 100%;
    }

    html body .nav .nav-actions > a.btn-light,
    html body .nav .nav-actions > form .btn-light {
        justify-content: flex-start;
        border-bottom: 1px solid var(--crafid-border) !important;
        border-radius: 0 !important;
        color: var(--crafid-deep) !important;
    }

    html body header[class*="topbar"] {
        padding: 10px 14px !important;
    }

    html body header[class*="topbar"] .top-actions,
    html body header[class*="topbar"] .actions {
        gap: 0 !important;
    }

    html body:has(.wrap > .top) .wrap {
        width: min(100% - 24px, 1160px);
    }

    html body:has(.wrap > .top) .wrap > .top {
        width: 100vw;
        margin: 0 0 32px calc(50% - 50vw);
        padding: 12px !important;
    }
}

@media (max-width: 520px) {
    html body .v40-content {
        padding: 20px 12px 42px !important;
    }

    html body .v40-mobile-nav {
        gap: 7px !important;
        padding: 10px 12px !important;
    }

    html body .v40-mobile-nav a {
        min-height: 38px;
        padding: 8px 13px !important;
        font-size: 12px !important;
    }

    html body .v40-module-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .v40-module {
        padding: 18px !important;
    }

    html body .v40-wedding-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .v40-wedding-actions .v40-btn:first-child {
        grid-column: auto;
    }

    html body .v40-top-actions .v40-btn.dark {
        min-height: 40px;
        padding: 9px 12px !important;
        font-size: 13px !important;
    }

    html body :where(.card, .saas-card, .workspace, .analytics-card, .funnel-card) {
        border-radius: 14px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Premium SaaS finishing pass — accessible contrast and responsive nav rail
|--------------------------------------------------------------------------
*/

html body :where(input, select, textarea)::placeholder {
    color: #756359 !important;
    opacity: 1;
}

html body :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(124, 78, 44, .30) !important;
    outline-offset: 2px !important;
}

html body :where(.progress, .category-bar, [class*="progress-track"]) {
    background: #E8DED3 !important;
}

html body :where(.progress, .category-bar, [class*="progress-track"]) > span {
    background: var(--crafid-primary) !important;
}

html body :where(.data-table, table) tbody tr:hover > td {
    background: rgba(214, 183, 149, .10) !important;
}

@media (max-width: 900px) {
    /*
     * Standalone Guest CRM, RSVP and event-day pages keep every destination
     * available without turning the brand header into a wall of buttons.
     */
    html body header[class*="topbar"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0 !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    html body header[class*="topbar"] > .brand {
        width: 100%;
        min-width: 0;
        padding: 10px 14px 8px;
    }

    html body header[class*="topbar"] .top-actions,
    html body header[class*="topbar"] .actions {
        display: flex !important;
        width: 100%;
        max-width: 100vw;
        align-items: center;
        gap: 2px !important;
        margin: 0;
        padding: 7px 10px 10px !important;
        overflow-x: auto !important;
        border-top: 1px solid rgba(254, 248, 238, .10);
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    html body header[class*="topbar"] .top-actions::-webkit-scrollbar,
    html body header[class*="topbar"] .actions::-webkit-scrollbar {
        display: none;
    }

    html body header[class*="topbar"] .top-actions .btn,
    html body header[class*="topbar"] .actions .btn,
    html body header[class*="topbar"] .top-actions .btn:not(.btn-dark),
    html body header[class*="topbar"] .actions .btn:not(.btn-dark) {
        display: inline-flex !important;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 7px 10px !important;
        scroll-snap-align: start;
        font-size: 12px !important;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    html body .brand:has(.brand-mark)::before,
    html body .brand:has(.mark)::before {
        width: 132px;
        height: 42px;
        flex-basis: 132px;
    }

    html body header[class*="topbar"] .brand small {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}