.elementor-1686 .elementor-element.elementor-element-ubpasc1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1686 .elementor-element.elementor-element-ubpasc3{--display:flex;}.elementor-1686 .elementor-element.elementor-element-ubpasc2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ubpasw1 *//* =========================================================
   HERO SECTION - RESPONSIVE FIX
   Paste this AFTER your existing CSS
   ========================================================= */

/* Prevent padding/borders from creating unwanted width */
.hero,
.hero * {
    box-sizing: border-box;
}

.hero {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.hero .container {
    width: 100%;
    max-width: 100%;
}

/* Allow grid/flex children to actually shrink */
.hero-grid > *,
.pcc,
.pcc-main,
.pcc-header > *,
.pcc-stats > *,
.pcc-tx > * {
    min-width: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* Change desktop two-column hero to one column */
    .hero .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 60px !important;
        width: 100% !important;
    }

    /* Text section */
    .hero .h-display {
        max-width: 800px;
    }

    .hero-sub {
        max-width: 720px;
    }

    /* Policy demo card */
    .pcc {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .pcc-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Side statistic cards should no longer sit outside card */
    .pcc-side,
    .pcc-side.top,
    .pcc-side.bottom {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    /* -----------------------------------------------------
       HERO SPACING
       ----------------------------------------------------- */

    .hero {
        padding-top: 30px !important;
        padding-bottom: 50px !important;
        min-height: auto !important;
    }

    .hero .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero .hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 45px !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       EYEBROW
       ----------------------------------------------------- */

    .hero-eyebrow {
        display: flex !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        white-space: normal !important;
        overflow: visible !important;

        font-size: 11px !important;
        line-height: 1.6 !important;
        letter-spacing: 0.12em !important;
    }

    .hero-eyebrow .dot {
        flex: 0 0 auto;
        margin-top: 6px;
    }


    /* -----------------------------------------------------
       MAIN HEADING
       ----------------------------------------------------- */

    .hero .h-display {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 24px !important;
        margin-bottom: 22px !important;

        font-size: clamp(42px, 12vw, 64px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.04em !important;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero .h-display em {
        display: inline;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    .hero-sub {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 17px !important;
        line-height: 1.7 !important;

        margin-bottom: 28px !important;

        overflow-wrap: break-word;
    }


    /* -----------------------------------------------------
       CTA BUTTONS
       ----------------------------------------------------- */

    .hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;

        width: 100% !important;
    }

    .hero-ctas .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 54px !important;

        padding: 15px 22px !important;

        text-align: center !important;
        white-space: normal !important;
    }

    .hero-ctas .arrow-svg {
        flex: 0 0 auto;
    }


    /* -----------------------------------------------------
       HERO TAGS
       ----------------------------------------------------- */

    .hero-tags {
        display: flex !important;
        flex-wrap: wrap !important;

        gap: 9px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 28px !important;
    }

    .hero-tag {
        flex: 0 1 auto !important;

        max-width: 100% !important;

        padding: 7px 13px !important;

        font-size: 11px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       HERO STATS
       ----------------------------------------------------- */

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 24px 18px !important;

        margin-top: 38px !important;
    }

    .hero-stats > div {
        min-width: 0 !important;
    }

    .hero-stats > div:last-child {
        grid-column: 1 / -1;
    }

    .stat-num {
        font-size: 31px !important;
        line-height: 1.1 !important;
        white-space: nowrap;
    }

    .stat-label {
        margin-top: 5px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        overflow-wrap: break-word;
    }


    /* =====================================================
       POLICY CARD
       ===================================================== */

    .pcc {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        gap: 14px !important;

        overflow: visible !important;
    }


    /* Main policy box */
    .pcc-main {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       TOP BROWSER BAR
       ----------------------------------------------------- */

    .pcc-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;

        align-items: center !important;

        gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 12px !important;
    }

    .pcc-bar .dots {
        display: flex !important;
        flex-shrink: 0 !important;
    }

    .pcc-bar .url {
        min-width: 0 !important;

        font-size: 10px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .pcc-bar .status {
        flex-shrink: 0 !important;

        font-size: 9px !important;

        padding: 5px 8px !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       POLICY HEADER
       ----------------------------------------------------- */

    .pcc-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 18px !important;

        width: 100% !important;

        padding: 20px 16px !important;
    }

    .pcc-header .lhs,
    .pcc-header .rhs {
        width: 100% !important;
        max-width: 100% !important;

        text-align: left !important;
    }

    .pcc-header .rhs {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .plabel,
    .stat-lbl {
        font-size: 9px !important;
        line-height: 1.4 !important;
    }

    .pnum {
        max-width: 100% !important;

        font-size: 19px !important;
        line-height: 1.2 !important;

        overflow-wrap: anywhere !important;
    }

    .pholder {
        max-width: 100% !important;

        font-size: 11px !important;
        line-height: 1.5 !important;

        overflow-wrap: break-word;
    }

    .stat-val {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }


    /* -----------------------------------------------------
       POLICY MINI STATS
       ----------------------------------------------------- */

    .pcc-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        gap: 8px !important;

        padding: 0 16px 16px !important;
    }

    .pcc-stat {
        width: 100% !important;
        min-width: 0 !important;

        padding: 12px 10px !important;
    }

    .pcc-stat .l {
        font-size: 8px !important;
        line-height: 1.3 !important;
    }

    .pcc-stat .v {
        font-size: 15px !important;
        line-height: 1.15 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       SAMPLE NOTE
       ----------------------------------------------------- */

    .mock-note {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        font-size: 9px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: break-word;
    }


    /* -----------------------------------------------------
       TRANSACTION LOG TITLE
       ----------------------------------------------------- */

    .pcc-log-title {
        padding-left: 16px !important;
        padding-right: 16px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       TRANSACTION ITEMS
       ----------------------------------------------------- */

    .pcc-log {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 12px 14px !important;
    }

    .pcc-tx {
        display: grid !important;

        grid-template-columns: 28px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon content"
            "icon amount"
            "icon date" !important;

        column-gap: 10px !important;
        row-gap: 4px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 12px 10px !important;
    }

    .pcc-tx .tx-ic {
        grid-area: icon !important;

        align-self: start !important;

        width: 22px !important;
        height: 22px !important;

        flex-shrink: 0 !important;
    }

    .pcc-tx > div:nth-child(2) {
        grid-area: content !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .tx-name {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 11px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .tx-meta {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 3px !important;

        font-size: 8px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tx-amt {
        grid-area: amount !important;

        justify-self: start !important;

        font-size: 10px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
    }

    .tx-date {
        grid-area: date !important;

        justify-self: start !important;

        font-size: 8px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       PCC SIDE CARDS
       ----------------------------------------------------- */

    .pcc-side,
    .pcc-side.top,
    .pcc-side.bottom {
        position: relative !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        transform: none !important;

        padding: 18px !important;
    }

    .pcc-side .val {
        font-size: 30px !important;
    }

    .pcc-side .sub {
        font-size: 11px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
    }


    /* -----------------------------------------------------
       DECORATIVE BACKGROUND
       ----------------------------------------------------- */

    .hero-mesh,
    .hero-grid-bg {
        max-width: 100% !important;
    }

    .glow-orb {
        pointer-events: none;
    }
}


/* =========================================================
   SMALL MOBILE - iPhone SE / 360px / 375px
   ========================================================= */

@media screen and (max-width: 480px) {

    .hero .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero .h-display {
        font-size: clamp(38px, 12.5vw, 52px) !important;
        line-height: 1 !important;
    }

    .hero-sub {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }


    /* One statistic per row on very small phones */
    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .hero-stats > div:last-child {
        grid-column: auto !important;
    }


    /* Tags remain wrapped */
    .hero-tags {
        gap: 7px !important;
    }

    .hero-tag {
        padding: 6px 11px !important;
        font-size: 10px !important;
    }


    /* Card */
    .pcc-header {
        padding: 18px 13px !important;
    }

    .pcc-stats {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .mock-note,
    .pcc-log-title {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .pcc-log {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }


    /* Still use 2 columns here but make text smaller */
    .pcc-stat {
        padding: 10px 8px !important;
    }

    .pcc-stat .v {
        font-size: 14px !important;
    }


    /* Browser bar */
    .pcc-bar {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    /* Put Sample below/next line if phone is extremely narrow */
    .pcc-bar .status {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    .pcc-tx {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        column-gap: 8px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media screen and (max-width: 360px) {

    .hero .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero .h-display {
        font-size: 38px !important;
    }

    /* Policy stat boxes become one column */
    .pcc-stats {
        grid-template-columns: 1fr !important;
    }

    .pcc-stat {
        min-height: auto !important;
    }
}

/* =========================================================
   UNDERWRITER WORKSPACE - RESPONSIVE CSS
   Paste this AFTER your existing CSS
   ========================================================= */

.workspace,
.workspace * {
    box-sizing: border-box;
}

.workspace {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.workspace .container {
    width: 100%;
    max-width: 100%;
}

/* Important:
   Allows grid/flex children to shrink instead of overflowing */
.workspace .section-head > *,
.workspace .ws-grid > *,
.workspace .ws-row > *,
.workspace .ws-panel-head > * {
    min-width: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* ---------------------------------------------
       SECTION HEADING
       --------------------------------------------- */

    .workspace .section-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .workspace .section-head .left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .workspace .section-head > p {
        width: 100% !important;
        max-width: 700px !important;

        margin: 0 !important;
    }


    /* ---------------------------------------------
       MAIN WORKSPACE GRID
       --------------------------------------------- */

    .workspace .ws-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 45px !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* ---------------------------------------------
       MOCKUP
       --------------------------------------------- */

    .workspace .ws-mockup {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    /* =====================================================
       SECTION
       ===================================================== */

    .workspace {
        padding-top: 60px !important;
        padding-bottom: 60px !important;

        overflow-x: hidden !important;
    }

    .workspace .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    /* =====================================================
       SECTION HEADER
       ===================================================== */

    .workspace .section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 32px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 40px !important;
    }


    /* -----------------------------------------------------
       EYEBROW
       ----------------------------------------------------- */

    .workspace .eyebrow {
        display: flex !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        white-space: normal !important;

        font-size: 11px !important;
        line-height: 1.5 !important;
        letter-spacing: 0.14em !important;
    }

    .workspace .eyebrow .dot {
        flex: 0 0 auto;

        margin-top: 5px !important;
    }


    /* -----------------------------------------------------
       HEADING
       ----------------------------------------------------- */

    .workspace .h-display {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 22px !important;
        margin-bottom: 0 !important;

        font-size: clamp(39px, 11vw, 56px) !important;
        line-height: 1.02 !important;

        letter-spacing: -0.04em !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .workspace .h-display em {
        display: inline !important;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    .workspace .section-head > p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 17px !important;
        line-height: 1.55 !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       MAIN GRID
       ===================================================== */

    .workspace .ws-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 42px !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .workspace .ws-grid > div {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* =====================================================
       BULLET LIST
       ===================================================== */

    .workspace .ws-bullets {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .workspace .ws-bullets li {
        display: grid !important;

        grid-template-columns: 22px minmax(0, 1fr) !important;

        align-items: start !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 18px 0 !important;

        white-space: normal !important;
    }

    .workspace .ws-bullets li svg {
        width: 18px !important;
        height: 18px !important;

        margin-top: 2px !important;

        flex-shrink: 0 !important;
    }

    .workspace .ws-bullets li > span {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        font-size: 15px !important;
        line-height: 1.55 !important;

        white-space: normal !important;

        overflow: visible !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .workspace .ws-bullets li strong {
        font-weight: 600 !important;
    }


    /* =====================================================
       WORKSPACE MOCKUP
       ===================================================== */

    .workspace .ws-mockup {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        overflow: hidden !important;
    }


    /* =====================================================
       TABS
       ===================================================== */

    .workspace .ws-tabs {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 6px !important;

        padding: 10px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .workspace .ws-tabs::-webkit-scrollbar {
        display: none;
    }

    .workspace .ws-tab {
        flex: 0 0 auto !important;

        min-width: max-content !important;

        padding: 9px 14px !important;

        font-size: 11px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       PANEL HEADING
       ===================================================== */

    .workspace .ws-panel-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 18px 14px !important;
    }

    .workspace .ws-panel-head > div {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .workspace .ws-panel-head .ttl {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 17px !important;
        line-height: 1.3 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }

    .workspace .ws-panel-head .sub {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 5px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }

    .workspace .ws-panel-head .badge {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        align-self: flex-start !important;

        padding: 6px 10px !important;

        font-size: 9px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ROWS WRAPPER
       ===================================================== */

    .workspace .ws-rows {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 12px 14px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       EACH POLICY ROW
       ===================================================== */

    .workspace .ws-row {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) auto !important;

        grid-template-areas:
            "info status"
            "info amount" !important;

        column-gap: 10px !important;
        row-gap: 6px !important;

        align-items: start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 14px 12px !important;

        margin-bottom: 7px !important;

        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       POLICY INFO
       ----------------------------------------------------- */

    .workspace .ws-row .info {
        grid-area: info !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .workspace .ws-row .info .n {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }

    .workspace .ws-row .info .m {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 3px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       STATUS BADGE
       ----------------------------------------------------- */

    .workspace .ws-row .stat {
        grid-area: status !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: end !important;

        max-width: 95px !important;

        padding: 5px 8px !important;

        font-size: 8px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       AMOUNT
       ----------------------------------------------------- */

    .workspace .ws-row .amt {
        grid-area: amount !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: end !important;

        font-size: 10px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       SAMPLE NOTE
       ===================================================== */

    .workspace .mock-note {
        width: 100% !important;
        max-width: 100% !important;

        margin: 20px 0 5px !important;

        padding: 0 8px !important;

        font-size: 8px !important;
        line-height: 1.5 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }
}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
   ========================================================= */

@media screen and (max-width: 480px) {

    .workspace {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .workspace .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* Heading */

    .workspace .h-display {
        font-size: clamp(36px, 11.5vw, 48px) !important;
        line-height: 1.04 !important;
    }

    .workspace .section-head > p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }


    /* Bullets */

    .workspace .ws-bullets li {
        grid-template-columns: 20px minmax(0, 1fr) !important;

        gap: 10px !important;

        padding: 16px 0 !important;
    }

    .workspace .ws-bullets li > span {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* Mockup */

    .workspace .ws-tabs {
        padding: 8px !important;
    }

    .workspace .ws-tab {
        padding: 8px 12px !important;

        font-size: 10px !important;
    }

    .workspace .ws-panel-head {
        padding: 16px 12px !important;
    }

    .workspace .ws-panel-head .ttl {
        font-size: 16px !important;
    }


    /* Rows */

    .workspace .ws-rows {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .workspace .ws-row {
        grid-template-columns: minmax(0, 1fr) !important;

        grid-template-areas:
            "info"
            "status"
            "amount" !important;

        gap: 7px !important;

        padding: 13px 11px !important;
    }

    .workspace .ws-row .stat,
    .workspace .ws-row .amt {
        justify-self: start !important;
    }

    .workspace .ws-row .info .n {
        font-size: 13px !important;
    }

    .workspace .ws-row .info .m {
        font-size: 9px !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   360px AND BELOW
   ========================================================= */

@media screen and (max-width: 360px) {

    .workspace .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .workspace .h-display {
        font-size: 36px !important;
    }

    .workspace .eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
    }

    .workspace .section-head > p {
        font-size: 15px !important;
    }

    .workspace .ws-bullets li > span {
        font-size: 13.5px !important;
    }

    .workspace .ws-panel-head .ttl {
        font-size: 15px !important;
    }
}/* End custom CSS */