/* _content/DokuSolver/Components/Footer.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The footer that closes every page. Quiet: it is a place to find
   a link, not a second navigation.
   --------------------------------------------------------------- */

.site-footer[b-nwiatykc8i] {
    --ink: #0b1f3a;
    --ink-3: #1d4ed8;
    --muted: #5b6b80;
    --line: rgba(11, 31, 58, .09);

    margin-top: 3.5rem;
    padding: 2.25rem 0 1.5rem;
    background: #fff;
    border-top: 1px solid var(--line);
}

.footer-brand[b-nwiatykc8i] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .5rem;
}

.footer-brand span[b-nwiatykc8i] { color: var(--ink-3); }

.footer-note[b-nwiatykc8i] {
    max-width: 44ch;
    margin-bottom: 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--muted);
}

.footer-head[b-nwiatykc8i] {
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink);
}

.footer-link[b-nwiatykc8i] {
    display: block;
    padding: .15rem 0;
    font-size: .85rem;
    color: var(--muted);
    text-decoration: none;
}

.footer-link:hover[b-nwiatykc8i] {
    color: var(--ink-3);
    text-decoration: underline;
}

.footer-feedback[b-nwiatykc8i] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.footer-feedback:hover[b-nwiatykc8i],
.footer-feedback:focus-visible[b-nwiatykc8i] {
    border-color: rgba(29, 78, 216, .35);
    background: rgba(29, 78, 216, .05);
    color: var(--ink-3);
}

.footer-base[b-nwiatykc8i] {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .footer-feedback[b-nwiatykc8i] { transition: none; }
}
/* _content/DokuSolver/Components/Layout/MainLayout.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The application shell: the header, its mega-menu, and the error
   strip. The width and gutters come from .app-shell in app.css, so
   nothing here sets a page margin of its own.
   --------------------------------------------------------------- */

#blazor-error-ui[b-sk5uc4o4h3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sk5uc4o4h3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------------------------------------------------------------
   "All PDF Tools" - a flat panel rather than a scrolling column.
   Eighteen tools in one list is something to hunt through; laid out
   in four labelled groups, the whole range is readable at a glance.
   --------------------------------------------------------------- */

.mega[b-sk5uc4o4h3] {
    /* Popper is switched off for this one (data-bs-display="static"), so the
       panel is placed with ordinary CSS and behaves the same at every width. */
    right: 0;
    left: auto;
    width: 900px;
    max-width: calc(100vw - 1.5rem);
    margin-top: .6rem;
    border-radius: .85rem;
    overflow: hidden;
}

.mega-grid[b-sk5uc4o4h3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem 1.25rem;
    padding: 1.15rem 1.35rem 1rem;
}

.mega-head[b-sk5uc4o4h3] {
    margin: 0 0 .55rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #e9ecef;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6c757d;
}

.mega-item[b-sk5uc4o4h3] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .5rem;
    margin: 0 -.5rem;
    border-radius: .45rem;
    font-size: .88rem;
    font-weight: 500;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

.mega-item:hover[b-sk5uc4o4h3],
.mega-item:focus-visible[b-sk5uc4o4h3] {
    background: #f1f5fb;
    color: #0d6efd;
    transform: translateX(2px);
}

.mega-item i[b-sk5uc4o4h3] {
    font-size: 1rem;
    flex: 0 0 auto;
}

/* the flagship tool gets its own strip rather than a line in a column */
.mega-feature[b-sk5uc4o4h3] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.35rem;
    background: linear-gradient(120deg, #0b1f3a 0%, #16325c 60%, #1d4ed8 100%);
    color: #fff;
    text-decoration: none;
    transition: filter .16s ease;
}

.mega-feature:hover[b-sk5uc4o4h3],
.mega-feature:focus-visible[b-sk5uc4o4h3] {
    color: #fff;
    filter: brightness(1.12);
}

.mega-feature strong[b-sk5uc4o4h3] {
    display: block;
    font-size: .95rem;
    line-height: 1.2;
}

.mega-feature small[b-sk5uc4o4h3] {
    display: block;
    font-size: .76rem;
    color: rgba(255, 255, 255, .72);
}

.mega-feature-icon[b-sk5uc4o4h3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: .55rem;
    background: rgba(240, 180, 41, .22);
    color: #f0b429;
    font-size: 1.05rem;
}

/* narrower screens: two groups across, then one */
@media (max-width: 991.98px) {
    .mega-grid[b-sk5uc4o4h3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    /* the button sits at the right edge, so anchoring the panel's right edge and
       giving it the viewport's width lands it neatly inside the screen */
    .mega[b-sk5uc4o4h3] {
        width: calc(100vw - 1.5rem);
        max-height: 76vh;
        overflow-y: auto;
    }

    .mega-grid[b-sk5uc4o4h3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .1rem .75rem;
        padding: .85rem .9rem .7rem;
    }

    .mega-item[b-sk5uc4o4h3] {
        font-size: .82rem;
        padding: .38rem .4rem;
        gap: .4rem;
    }

    .mega-head[b-sk5uc4o4h3] { font-size: .62rem; }
    .mega-feature small[b-sk5uc4o4h3] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mega-item[b-sk5uc4o4h3], .mega-feature[b-sk5uc4o4h3] { transition: none; }
    .mega-item:hover[b-sk5uc4o4h3] { transform: none; }
}

/* The margin drawings sit behind everything at z-index 0, so the page itself
   has to claim a layer above them. */
main[b-sk5uc4o4h3],
[b-sk5uc4o4h3] .site-footer {
    position: relative;
    z-index: 1;
}
/* _content/DokuSolver/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-aj6mer3obb] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-aj6mer3obb] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-aj6mer3obb] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-aj6mer3obb] {
    font-size: 1.1rem;
}

.bi[b-aj6mer3obb] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-aj6mer3obb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-aj6mer3obb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-aj6mer3obb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-aj6mer3obb] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-aj6mer3obb] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-aj6mer3obb] {
        padding-bottom: 1rem;
    }

    .nav-item[b-aj6mer3obb]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-aj6mer3obb]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-aj6mer3obb]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-aj6mer3obb] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-aj6mer3obb] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-aj6mer3obb] {
        display: none;
    }

    .nav-scrollable[b-aj6mer3obb] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/DokuSolver/Components/PageMotifs.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The margins.

   Past about 1400px the shell leaves a wide band of empty grey down
   each side. These two drawings live there: a bundle being put
   together on the left, a page being numbered on the right - the two
   things this application is for. They are pinned to the viewport so
   they stay put while the page scrolls, drawn at a contrast that is
   noticed rather than read, and they never take a click.
   --------------------------------------------------------------- */

.page-motifs[b-0xr4n45suj] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.motif[b-0xr4n45suj] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* the gutter either side of the 1240px shell */
    width: calc((100vw - 1240px) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.motif-left[b-0xr4n45suj]  { left: 0; }
.motif-right[b-0xr4n45suj] { right: 0; }

.motif svg[b-0xr4n45suj] {
    width: 168px;
    max-width: 62%;
    height: auto;
}

.motif svg rect[b-0xr4n45suj],
.motif svg line[b-0xr4n45suj] {
    stroke: #0b1f3a;
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
    opacity: .16;
}

.motif svg text[b-0xr4n45suj] {
    fill: #b7791f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    opacity: .5;
}

/* ---------- left: the bundle coming together ---------- */

.sheet[b-0xr4n45suj] {
    transform-box: view-box;
    animation: sheet-in-b-0xr4n45suj 14s ease-in-out infinite;
    opacity: 0;
}

.sheet-1[b-0xr4n45suj] { animation-delay: 0s; }
.sheet-2[b-0xr4n45suj] { animation-delay: .9s; }
.sheet-3[b-0xr4n45suj] { animation-delay: 1.8s; }
.sheet-4[b-0xr4n45suj] { animation-delay: 2.7s; }

@keyframes sheet-in-b-0xr4n45suj {
    0%          { opacity: 0; transform: translate(26px, 14px); }
    12%, 76%    { opacity: 1; transform: translate(0, 0); }
    88%, 100%   { opacity: 0; transform: translate(-10px, -8px); }
}

.spine[b-0xr4n45suj] {
    transform-box: view-box;
    transform-origin: 31px 124px;
    transform: scaleY(0);
    animation: spine-draw-b-0xr4n45suj 14s ease-in-out infinite;
}

@keyframes spine-draw-b-0xr4n45suj {
    0%, 26%    { transform: scaleY(0); }
    38%, 76%   { transform: scaleY(1); }
    88%, 100%  { transform: scaleY(0); }
}

.tab[b-0xr4n45suj] {
    transform-box: view-box;
    opacity: 0;
    animation: tab-in-b-0xr4n45suj 14s ease-in-out infinite;
}

@keyframes tab-in-b-0xr4n45suj {
    0%, 42%    { opacity: 0; transform: translateX(-10px); }
    52%, 76%   { opacity: 1; transform: translateX(0); }
    88%, 100%  { opacity: 0; transform: translateX(-10px); }
}

/* ---------- right: page after page, each numbered ---------- */

.numbered[b-0xr4n45suj] {
    transform-box: view-box;
    opacity: 0;
    animation: page-turn-b-0xr4n45suj 12s ease-in-out infinite;
}

.numbered-1[b-0xr4n45suj] { animation-delay: 0s; }
.numbered-2[b-0xr4n45suj] { animation-delay: 4s; }
.numbered-3[b-0xr4n45suj] { animation-delay: 8s; }

@keyframes page-turn-b-0xr4n45suj {
    0%        { opacity: 0; transform: translateY(20px); }
    6%, 27%   { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-20px); }
}

/* the stamp lands a beat after the sheet settles */
.numbered text[b-0xr4n45suj] {
    animation: stamp-b-0xr4n45suj 12s ease-in-out infinite;
    animation-delay: inherit;
}

@keyframes stamp-b-0xr4n45suj {
    0%, 8%    { opacity: 0; }
    12%, 27%  { opacity: .5; }
    33%, 100% { opacity: 0; }
}

/* ---------- only where there is room, only when motion is welcome ---------- */

@media (max-width: 1439.98px) {
    .page-motifs[b-0xr4n45suj] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet[b-0xr4n45suj],
    .spine[b-0xr4n45suj],
    .tab[b-0xr4n45suj],
    .numbered[b-0xr4n45suj],
    .numbered text[b-0xr4n45suj] {
        animation: none;
    }

    .sheet[b-0xr4n45suj],
    .tab[b-0xr4n45suj] { opacity: 1; transform: none; }

    .spine[b-0xr4n45suj] { transform: none; }

    /* one still page rather than three stacked on top of each other */
    .numbered-1[b-0xr4n45suj] { opacity: 1; transform: none; }
    .numbered-2[b-0xr4n45suj],
    .numbered-3[b-0xr4n45suj] { display: none; }
}
/* _content/DokuSolver/Components/Pages/CourtBundle.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The bundle builder. The sections on screen are the sections of
   the filing, in the order they will be filed, so arranging a
   bundle is a matter of saying what each document is.
   --------------------------------------------------------------- */

.bundle-page[b-27emsz111g] {
    --ink: #0b1f3a;
    --ink-3: #1d4ed8;
    --gold: #b7791f;
    --green: #0f7a4d;
    --muted: #5b6b80;
    --line: rgba(11, 31, 58, .09);
}

/* ---------- the two tabs ---------- */

.bundle-tabs .nav-link[b-27emsz111g] {
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-right: .5rem;
    padding: .45rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
}

.bundle-tabs .nav-link.active[b-27emsz111g] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ---------- a section of the bundle ---------- */

.bundle-section + .bundle-section[b-27emsz111g] {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.bundle-section-head[b-27emsz111g] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .6rem;
}

.bundle-section-dot[b-27emsz111g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-size: .95rem;
}

.bundle-dot-title[b-27emsz111g]      { background: rgba(11, 31, 58, .08);  color: var(--ink); }
.bundle-dot-index[b-27emsz111g]      { background: rgba(240, 180, 41, .16); color: var(--gold); }
.bundle-dot-appellant[b-27emsz111g]  { background: rgba(29, 78, 216, .10);  color: var(--ink-3); }
.bundle-dot-respondent[b-27emsz111g] { background: rgba(16, 133, 84, .12);  color: var(--green); }

.bundle-section-title[b-27emsz111g] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.bundle-section-note[b-27emsz111g] {
    margin: .1rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--muted);
}

.bundle-section-count[b-27emsz111g] {
    margin-left: auto;
    white-space: nowrap;
    font-size: .75rem;
    color: var(--muted);
}

.bundle-section-empty[b-27emsz111g] {
    margin: 0 0 0 2.75rem;
    font-size: .8rem;
    font-style: italic;
    color: var(--muted);
}

.bundle-table > tbody > tr > td[b-27emsz111g] {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.index-preview thead th[b-27emsz111g] {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 575.98px) {
    .bundle-section-count[b-27emsz111g] { margin-left: 0; width: 100%; }
    .bundle-section-head[b-27emsz111g] { flex-wrap: wrap; }
}
/* _content/DokuSolver/Components/Pages/Feedback.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The feedback page. Deliberately plain - one card, one column,
   nothing between the person and the box they came here to type in.
   --------------------------------------------------------------- */

.thanks-icon[b-p7dagjus7r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(16, 133, 84, .12);
    color: #0f7a4d;
    font-size: 1.6rem;
}

.feedback-page textarea.form-control[b-p7dagjus7r] {
    line-height: 1.6;
    resize: vertical;
}
/* _content/DokuSolver/Components/Pages/Home.razor.rz.scp.css */
/* ---------------------------------------------------------------
   Front page.

   The motion is deliberately restrained and it is not decoration:
   the hero animates the one thing DokuSolver does that nothing else
   does - a court document being tenth-lined - so the first thing a
   visitor sees is the product working.

   Everything here honours prefers-reduced-motion. A person who has
   asked their machine to stop moving things gets a still page, not
   a broken one.
   --------------------------------------------------------------- */

.page[b-me09qjqyqw] {
    --ink: #0b1f3a;
    --ink-2: #16325c;
    --ink-3: #1d4ed8;
    --gold: #f0b429;
    --gold-deep: #b7791f;
    --green: #0f7a4d;
    --red: #b42318;
    --info: #0e7490;
    --muted: #5b6b80;
    --line: rgba(11, 31, 58, .09);
}

/* ---------- hero ---------- */

.hero[b-me09qjqyqw] {
    position: relative;
    isolation: isolate;
    background: linear-gradient(125deg, #0b1f3a 0%, #16325c 45%, #1d4ed8 100%);
    background-size: 180% 180%;
    animation: hero-drift-b-me09qjqyqw 24s ease-in-out infinite;
    color: #fff;
}

@keyframes hero-drift-b-me09qjqyqw {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* soft light that moves across the panel, so the surface is never flat */
.hero[b-me09qjqyqw]::after {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(240, 180, 41, .20), transparent 70%);
    animation: hero-glow-b-me09qjqyqw 18s ease-in-out infinite;
}

@keyframes hero-glow-b-me09qjqyqw {
    0%, 100% { transform: translate(-18%, -10%) scale(1); }
    50%      { transform: translate(22%, 12%) scale(1.25); }
}

.hero-eyebrow[b-me09qjqyqw] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .8rem;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
}

.hero-title[b-me09qjqyqw] {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    margin: .85rem 0 .75rem;
}

.hero-title .accent[b-me09qjqyqw] {
    color: var(--gold);
    position: relative;
    white-space: nowrap;
}

/* the underline draws itself once, like a pen stroke */
.hero-title .accent[b-me09qjqyqw]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.12em;
    height: 3px;
    border-radius: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    animation: stroke-in-b-me09qjqyqw .9s cubic-bezier(.22, 1, .36, 1) .5s forwards;
}

@keyframes stroke-in-b-me09qjqyqw {
    to { transform: scaleX(1); }
}

.hero-sub[b-me09qjqyqw] {
    max-width: 48ch;
    font-size: .975rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

.hero-actions .btn[b-me09qjqyqw] {
    border-radius: 999px;
    padding: .6rem 1.35rem;
    font-weight: 600;
}

.btn-gold[b-me09qjqyqw] {
    background: var(--gold);
    border-color: var(--gold);
    color: #3b2a05;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-gold:hover[b-me09qjqyqw],
.btn-gold:focus[b-me09qjqyqw] {
    background: #ffc53d;
    border-color: #ffc53d;
    color: #3b2a05;
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.2rem rgba(240, 180, 41, .32);
}

.btn-ghost[b-me09qjqyqw] {
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    background: transparent;
    transition: background .18s ease, transform .18s ease;
}

.btn-ghost:hover[b-me09qjqyqw],
.btn-ghost:focus[b-me09qjqyqw] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transform: translateY(-2px);
}

/* the three facts under the buttons */
.hero-facts[b-me09qjqyqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero-fact strong[b-me09qjqyqw] {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.hero-fact span[b-me09qjqyqw] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .62);
}

/* things in the hero arrive rather than appear */
.rise[b-me09qjqyqw] {
    opacity: 0;
    transform: translateY(14px);
    animation: rise-in-b-me09qjqyqw .7s cubic-bezier(.22, 1, .36, 1) forwards;
}

.rise-1[b-me09qjqyqw] { animation-delay: .05s; }
.rise-2[b-me09qjqyqw] { animation-delay: .16s; }
.rise-3[b-me09qjqyqw] { animation-delay: .27s; }
.rise-4[b-me09qjqyqw] { animation-delay: .38s; }

@keyframes rise-in-b-me09qjqyqw {
    to { opacity: 1; transform: none; }
}

/* ---------- the animated document ---------- */

.hero-art[b-me09qjqyqw] {
    width: 100%;
    max-width: 330px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}

/* the two pages behind the front sheet ease outward and settle */
.sheet-back[b-me09qjqyqw] {
    animation: sheet-settle-b-me09qjqyqw 7s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.sheet-back-2[b-me09qjqyqw] { animation-delay: .35s; }

@keyframes sheet-settle-b-me09qjqyqw {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    45%      { transform: translate(-7px, -5px) rotate(-2.2deg); }
}

/* each line of "text" wipes in from the left, like a page rendering */
.line[b-me09qjqyqw] {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: line-wipe-b-me09qjqyqw 7s ease-in-out infinite;
}

@keyframes line-wipe-b-me09qjqyqw {
    0%        { transform: scaleX(0); }
    16%, 82%  { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}

/* the tenth-line markers land down the right margin, one after another */
.marker[b-me09qjqyqw] {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: marker-land-b-me09qjqyqw 7s ease-in-out infinite;
}

@keyframes marker-land-b-me09qjqyqw {
    0%, 26%   { opacity: 0; transform: translateX(12px); }
    36%, 84%  { opacity: 1; transform: translateX(0); }
    94%, 100% { opacity: 0; transform: translateX(12px); }
}

/* a ruling line sweeps down the margin as the markers are placed */
.rule-sweep[b-me09qjqyqw] {
    transform-box: fill-box;
    transform-origin: top center;
    transform: scaleY(0);
    animation: rule-draw-b-me09qjqyqw 7s ease-in-out infinite;
}

@keyframes rule-draw-b-me09qjqyqw {
    0%, 18%   { transform: scaleY(0); }
    38%, 84%  { transform: scaleY(1); }
    94%, 100% { transform: scaleY(0); }
}

/* ---------- the search box ---------- */

.tool-search[b-me09qjqyqw] {
    position: relative;
    margin: 0 0 1.25rem;
}

.tool-search-input[b-me09qjqyqw] {
    width: 100%;
    padding: .8rem 2.75rem .8rem 2.9rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: #fff;
    font-size: .95rem;
    color: var(--ink);
    box-shadow: 0 .125rem .35rem rgba(11, 31, 58, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tool-search-input[b-me09qjqyqw]::placeholder {
    color: #93a1b3;
}

.tool-search-input:focus[b-me09qjqyqw] {
    outline: none;
    border-color: rgba(29, 78, 216, .45);
    box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .12);
}

/* the browser's own clear cross would sit on top of ours */
.tool-search-input[b-me09qjqyqw]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.tool-search-icon[b-me09qjqyqw] {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    color: #93a1b3;
    pointer-events: none;
}

.tool-search-clear[b-me09qjqyqw] {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 31, 58, .06);
    color: var(--muted);
    font-size: .75rem;
    cursor: pointer;
}

.tool-search-clear:hover[b-me09qjqyqw] {
    background: rgba(11, 31, 58, .12);
    color: var(--ink);
}

.tool-search-count[b-me09qjqyqw] {
    /* tucked under the box it belongs to */
    margin: -.75rem 0 1rem;
    font-size: .82rem;
    color: var(--muted);
}

.tool-search-empty[b-me09qjqyqw] {
    margin-bottom: 2rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed rgba(11, 31, 58, .18);
    border-radius: .9rem;
    text-align: center;
    color: var(--muted);
}

.tool-search-empty .fw-semibold[b-me09qjqyqw] {
    color: var(--ink);
}

/* ---------- section headings ---------- */

.section-head[b-me09qjqyqw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .6rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.section-head[b-me09qjqyqw]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 96px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tone, var(--ink-3)), transparent);
}

.section-title[b-me09qjqyqw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.section-dot[b-me09qjqyqw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    font-size: .95rem;
}

/* Every coloured thing on the page takes its colour from the one --tone the
   card or heading carries: the icon tile, the edge, the hover border and the
   rule under the heading. Five colours, applied the same way everywhere. */
.tone-blue[b-me09qjqyqw]  { --tone: #1d4ed8; --tone-ink: #1d4ed8; --tone-wash: rgba(29, 78, 216, .13);  --tone-wash-2: rgba(29, 78, 216, .05); }
.tone-gold[b-me09qjqyqw]  { --tone: #f0b429; --tone-ink: #a16207; --tone-wash: rgba(240, 180, 41, .22); --tone-wash-2: rgba(240, 180, 41, .08); }
.tone-green[b-me09qjqyqw] { --tone: #0f7a4d; --tone-ink: #0f7a4d; --tone-wash: rgba(16, 133, 84, .15);  --tone-wash-2: rgba(16, 133, 84, .05); }
.tone-red[b-me09qjqyqw]   { --tone: #b42318; --tone-ink: #b42318; --tone-wash: rgba(180, 35, 24, .13);  --tone-wash-2: rgba(180, 35, 24, .05); }
.tone-info[b-me09qjqyqw]  { --tone: #0e7490; --tone-ink: #0e7490; --tone-wash: rgba(14, 116, 144, .14); --tone-wash-2: rgba(14, 116, 144, .05); }

.section-dot[b-me09qjqyqw] {
    background: linear-gradient(135deg, var(--tone), var(--tone-ink));
    color: #fff;
    box-shadow: 0 .2rem .5rem var(--tone-wash);
}

.section-link[b-me09qjqyqw] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    white-space: nowrap;
}

.section-link i[b-me09qjqyqw] { transition: transform .2s ease; display: inline-block; }
.section-link:hover[b-me09qjqyqw] { text-decoration: underline; }
.section-link:hover i[b-me09qjqyqw] { transform: translateX(3px); }

/* ---------- the three legal cards ---------- */

.feature-card[b-me09qjqyqw] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 .125rem .35rem rgba(11, 31, 58, .05);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1),
                box-shadow .2s ease,
                border-color .2s ease;
}

/* a band of the tool's colour along the top edge */
.feature-card[b-me09qjqyqw]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tone, var(--ink-3));
}

.feature-card:hover[b-me09qjqyqw],
.feature-card:focus-visible[b-me09qjqyqw] {
    transform: translateY(-4px);
    border-color: var(--tone, rgba(29, 78, 216, .28));
    box-shadow: 0 .85rem 1.75rem rgba(11, 31, 58, .14);
}

.feature-icon[b-me09qjqyqw] {
    background: linear-gradient(135deg, var(--tone-wash), var(--tone-wash-2));
    box-shadow: inset 0 0 0 1px var(--tone-wash);
    color: var(--tone-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: .9rem;
    border-radius: .7rem;
    font-size: 1.3rem;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.feature-card:hover .feature-icon[b-me09qjqyqw] { transform: scale(1.07) rotate(-4deg); }

.feature-title[b-me09qjqyqw] {
    margin: 0 0 .45rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.feature-sub[b-me09qjqyqw] {
    margin: 0 0 1rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted);
}

.feature-go[b-me09qjqyqw] {
    margin-top: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tone-ink, var(--ink-3));
}

.feature-go i[b-me09qjqyqw] { transition: transform .2s ease; display: inline-block; }
.feature-card:hover .feature-go i[b-me09qjqyqw] { transform: translateX(4px); }

/* ---------- the small tool cards ---------- */

.tool-card[b-me09qjqyqw] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.1rem .75rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: #fff;
    color: inherit;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 .125rem .3rem rgba(11, 31, 58, .04);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1),
                box-shadow .2s ease,
                border-color .2s ease;
}

.tool-card[b-me09qjqyqw]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tone, var(--ink-3));
    opacity: .85;
}

.tool-card:hover[b-me09qjqyqw],
.tool-card:focus-visible[b-me09qjqyqw] {
    transform: translateY(-4px);
    border-color: var(--tone, rgba(29, 78, 216, .25));
    box-shadow: 0 .75rem 1.5rem rgba(11, 31, 58, .12);
}

.tool-card:hover .tool-title[b-me09qjqyqw] { color: var(--tone-ink, var(--ink)); }

.tool-icon[b-me09qjqyqw] {
    background: linear-gradient(135deg, var(--tone-wash), var(--tone-wash-2));
    box-shadow: inset 0 0 0 1px var(--tone-wash);
    color: var(--tone-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .6rem;
    border-radius: 50%;
    font-size: 1.15rem;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.tool-card:hover .tool-icon[b-me09qjqyqw] { transform: scale(1.09) rotate(-4deg); }

.tool-title[b-me09qjqyqw] {
    transition: color .18s ease;
    margin: 0 0 .2rem;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.tool-sub[b-me09qjqyqw] {
    margin: 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--muted);
}

/* ---------- reveal on scroll ----------
   The cards are visible by default and the script hides them itself by
   adding .js-reveal before it starts observing. If the script never runs
   the page is complete, which is the one thing that must not fail. */

.reveal.js-reveal > .col[b-me09qjqyqw] {
    opacity: 0;
    transform: translateY(16px);
}

.reveal.js-reveal.is-visible > .col[b-me09qjqyqw] {
    animation: rise-in-b-me09qjqyqw .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

.reveal.is-visible > .col:nth-child(1)[b-me09qjqyqw] { animation-delay: .00s; }
.reveal.is-visible > .col:nth-child(2)[b-me09qjqyqw] { animation-delay: .06s; }
.reveal.is-visible > .col:nth-child(3)[b-me09qjqyqw] { animation-delay: .12s; }
.reveal.is-visible > .col:nth-child(4)[b-me09qjqyqw] { animation-delay: .18s; }
.reveal.is-visible > .col:nth-child(5)[b-me09qjqyqw] { animation-delay: .24s; }
.reveal.is-visible > .col:nth-child(6)[b-me09qjqyqw] { animation-delay: .30s; }
.reveal.is-visible > .col:nth-child(7)[b-me09qjqyqw] { animation-delay: .36s; }
.reveal.is-visible > .col:nth-child(8)[b-me09qjqyqw] { animation-delay: .42s; }

/* ---------- when the machine asks for stillness, give it ---------- */

@media (prefers-reduced-motion: reduce) {
    .hero[b-me09qjqyqw],
    .hero[b-me09qjqyqw]::after,
    .sheet-back[b-me09qjqyqw],
    .line[b-me09qjqyqw],
    .marker[b-me09qjqyqw],
    .rule-sweep[b-me09qjqyqw],
    .hero-title .accent[b-me09qjqyqw]::after,
    .rise[b-me09qjqyqw],
    .reveal.is-visible > .col[b-me09qjqyqw] {
        animation: none !important;
    }

    .rise[b-me09qjqyqw],
    .reveal.js-reveal > .col[b-me09qjqyqw] {
        opacity: 1;
        transform: none;
    }

    .line[b-me09qjqyqw],
    .rule-sweep[b-me09qjqyqw] { transform: none; }

    .marker[b-me09qjqyqw] { opacity: 1; transform: none; }

    .hero-title .accent[b-me09qjqyqw]::after { transform: scaleX(1); }

    .feature-card[b-me09qjqyqw],
    .feature-icon[b-me09qjqyqw],
    .tool-card[b-me09qjqyqw],
    .tool-icon[b-me09qjqyqw],
    .section-link i[b-me09qjqyqw],
    .feature-go i[b-me09qjqyqw],
    .btn-gold[b-me09qjqyqw],
    .btn-ghost[b-me09qjqyqw] { transition: none; }

    .feature-card:hover[b-me09qjqyqw],
    .tool-card:hover[b-me09qjqyqw] { transform: none; }
}

/* ---------------------------------------------------------------
   Phone. "without losing the evening" cannot hold together on one
   line at 390px, so below sm it wraps and keeps its colour instead
   of the drawn underline, which only makes sense on a single line.
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .hero-title[b-me09qjqyqw] {
        font-size: 1.5rem;
    }

    .hero-title .accent[b-me09qjqyqw] {
        white-space: normal;
    }

    .hero-title .accent[b-me09qjqyqw]::after {
        display: none;
    }

    .hero-sub[b-me09qjqyqw] {
        font-size: .92rem;
    }

    .hero-facts[b-me09qjqyqw] {
        gap: 1.1rem;
    }

    .section-head[b-me09qjqyqw] {
        align-items: center;
    }
}
/* _content/DokuSolver/Components/Pages/LegalTools.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The Legal & Page Numbering landing page: two choices, described
   well enough that you know which one you want before clicking.
   --------------------------------------------------------------- */

.legal-hub[b-uh58e5q9bc] {
    --ink: #0b1f3a;
    --ink-3: #1d4ed8;
    --gold: #f0b429;
}

.hub-head[b-uh58e5q9bc] {
    padding: 1.5rem 1.75rem;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(120deg, #0b1f3a 0%, #16325c 60%, #1d4ed8 100%);
}

.hub-eyebrow[b-uh58e5q9bc] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .78rem;
}

.hub-title[b-uh58e5q9bc] {
    margin: .7rem 0 .4rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.hub-sub[b-uh58e5q9bc] {
    max-width: 62ch;
    font-size: .93rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

/* ---------- the two choices ---------- */

.hub-card[b-uh58e5q9bc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.6rem;
    border: 1px solid rgba(11, 31, 58, .09);
    border-radius: .9rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 .125rem .35rem rgba(11, 31, 58, .05);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1),
                box-shadow .2s ease,
                border-color .2s ease;
}

.hub-card:hover[b-uh58e5q9bc],
.hub-card:focus-visible[b-uh58e5q9bc] {
    transform: translateY(-4px);
    border-color: rgba(29, 78, 216, .3);
    box-shadow: 0 .85rem 1.75rem rgba(11, 31, 58, .12);
}

.hub-icon[b-uh58e5q9bc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: .75rem;
    font-size: 1.4rem;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.hub-card:hover .hub-icon[b-uh58e5q9bc] {
    transform: scale(1.07) rotate(-4deg);
}

.hub-icon-blue[b-uh58e5q9bc] {
    background: rgba(29, 78, 216, .10);
    color: var(--ink-3);
}

.hub-icon-green[b-uh58e5q9bc] {
    background: rgba(16, 133, 84, .12);
    color: #0f7a4d;
}

.hub-icon-gold[b-uh58e5q9bc] {
    background: rgba(240, 180, 41, .16);
    color: #b7791f;
}

.hub-card-title[b-uh58e5q9bc] {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
}

.hub-card-sub[b-uh58e5q9bc] {
    font-size: .9rem;
    line-height: 1.6;
    color: #5b6b80;
}

.hub-points[b-uh58e5q9bc] {
    margin: .25rem 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: #5b6b80;
}

.hub-points li[b-uh58e5q9bc] {
    position: relative;
    padding: .2rem 0 .2rem 1.35rem;
}

.hub-points li[b-uh58e5q9bc]::before {
    content: '';
    position: absolute;
    left: .25rem;
    top: .7rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--gold);
}

.hub-go[b-uh58e5q9bc] {
    margin-top: auto;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-3);
}

.hub-go i[b-uh58e5q9bc] {
    transition: transform .2s ease;
}

.hub-card:hover .hub-go i[b-uh58e5q9bc] {
    transform: translateX(4px);
}

.hub-note[b-uh58e5q9bc] {
    font-size: .85rem;
    color: #5b6b80;
}

@media (prefers-reduced-motion: reduce) {
    .hub-card[b-uh58e5q9bc],
    .hub-icon[b-uh58e5q9bc],
    .hub-go i[b-uh58e5q9bc] { transition: none; }

    .hub-card:hover[b-uh58e5q9bc] { transform: none; }
    .hub-card:hover .hub-icon[b-uh58e5q9bc] { transform: none; }
    .hub-card:hover .hub-go i[b-uh58e5q9bc] { transform: none; }
}
/* _content/DokuSolver/Components/Pages/TenthLiningTool.razor.rz.scp.css */
/* ---------------------------------------------------------------
   M-Pesa payment column.

   Green is the signal that this panel takes money: it is the only
   place on the page that uses it, so the eye goes there once the
   document is ready. The wordmark is set as plain type rather than
   Safaricom's logo artwork - this is an integration, not a brand.
   --------------------------------------------------------------- */

.mpesa[b-pocwk5m5pj] {
    --mpesa: #00a950;
    --mpesa-dark: #007a39;
    --mpesa-deep: #0b3d22;
    --mpesa-tint: #e9f8f0;
    --mpesa-line: rgba(0, 169, 80, .28);
}

.mpesa.card[b-pocwk5m5pj] {
    border-color: var(--mpesa-line);
}

.mpesa .card-header[b-pocwk5m5pj] {
    background: linear-gradient(180deg, var(--mpesa) 0%, var(--mpesa-dark) 100%);
    border-bottom: 0;
    color: #fff;
}

.mpesa .card-header .badge[b-pocwk5m5pj] {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff;
}

.mpesa .wordmark[b-pocwk5m5pj] {
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---- amount ---- */

.mpesa .amount-panel[b-pocwk5m5pj] {
    background: var(--mpesa-tint);
    border: 1px solid var(--mpesa-line);
    border-radius: .5rem;
}

.mpesa .amount[b-pocwk5m5pj] {
    color: var(--mpesa-deep);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.mpesa .amount-basis[b-pocwk5m5pj] {
    color: var(--mpesa-dark);
}

/* ---- controls ---- */

.mpesa .form-control:focus[b-pocwk5m5pj] {
    border-color: var(--mpesa);
    box-shadow: 0 0 0 .2rem rgba(0, 169, 80, .2);
}

.mpesa .btn-mpesa[b-pocwk5m5pj] {
    background: var(--mpesa);
    border-color: var(--mpesa);
    color: #fff;
}

.mpesa .btn-mpesa:hover:not(:disabled)[b-pocwk5m5pj],
.mpesa .btn-mpesa:focus:not(:disabled)[b-pocwk5m5pj] {
    background: var(--mpesa-dark);
    border-color: var(--mpesa-dark);
    color: #fff;
}

.mpesa .btn-mpesa:disabled[b-pocwk5m5pj] {
    background: var(--mpesa);
    border-color: var(--mpesa);
    opacity: .45;
}

/* ---- waiting for the STK prompt ---- */

.mpesa .waiting[b-pocwk5m5pj] {
    background: var(--mpesa-tint);
    border: 1px dashed var(--mpesa-line);
    border-radius: .5rem;
    color: var(--mpesa-deep);
}

.mpesa .waiting .pulse[b-pocwk5m5pj] {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--mpesa);
    animation: mpesa-pulse-b-pocwk5m5pj 1.4s ease-in-out infinite;
}

@keyframes mpesa-pulse-b-pocwk5m5pj {
    50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .mpesa .waiting .pulse[b-pocwk5m5pj] { animation: none; }
}

/* ---- locked / paid ---- */

.mpesa .locked[b-pocwk5m5pj] {
    color: #6c757d;
}

.mpesa .paid[b-pocwk5m5pj] {
    background: var(--mpesa-tint);
    border: 1px solid var(--mpesa-line);
    border-radius: .5rem;
    color: var(--mpesa-deep);
}

.mpesa .receipt[b-pocwk5m5pj] {
    letter-spacing: .06em;
}

.mpesa .rate-card summary[b-pocwk5m5pj] {
    cursor: pointer;
}

.mpesa .rate-card tr.current[b-pocwk5m5pj] {
    background: var(--mpesa-tint);
    font-weight: 600;
}
/* _content/DokuSolver/Components/ToolHeader.razor.rz.scp.css */
/* ---------------------------------------------------------------
   The header band shared by every tool page. Same navy as the home
   hero and the Legal hub, so moving between pages feels like one
   application rather than seventeen.
   --------------------------------------------------------------- */

.tool-header[b-nexmkj8qya] {
    margin-bottom: 1.75rem;
    padding: 1.35rem 1.6rem 1.5rem;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(120deg, #0b1f3a 0%, #16325c 58%, #1d4ed8 100%);
}

.tool-header-row[b-nexmkj8qya] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.tool-header-icon[b-nexmkj8qya] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: .7rem;
    background: rgba(240, 180, 41, .2);
    color: #f0b429;
    font-size: 1.3rem;
}

.tool-header-title[b-nexmkj8qya] {
    margin: 0 0 .3rem;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.2;
}

.tool-header-sub[b-nexmkj8qya] {
    margin: 0;
    max-width: 68ch;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* breadcrumb sits inside the dark band, so it needs light colours */
.tool-header .breadcrumb[b-nexmkj8qya] {
    margin-bottom: .55rem;
}

.tool-header .breadcrumb-item[b-nexmkj8qya],
.tool-header .breadcrumb-item.active[b-nexmkj8qya] {
    color: rgba(255, 255, 255, .6);
}

.tool-header .breadcrumb-item a[b-nexmkj8qya] {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.tool-header .breadcrumb-item a:hover[b-nexmkj8qya] {
    color: #fff;
    text-decoration: underline;
}

.tool-header .breadcrumb-item + .breadcrumb-item[b-nexmkj8qya]::before {
    color: rgba(255, 255, 255, .35);
}

@media (max-width: 575.98px) {
    .tool-header[b-nexmkj8qya] {
        padding: 1.1rem 1.1rem 1.2rem;
    }

    .tool-header-icon[b-nexmkj8qya] {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.1rem;
    }
}