@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,450;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --bg: #F6F1E3;
    --surface: #FFFFFF;
    --surface-2: #EFE6CC;
    --surface-3: #E6D9B3;
    --ink: #16233F;
    --ink-soft: #56617E;
    --ink-faint: #8C93A9;
    --accent: #B27F12;
    --accent-strong: #8E640D;
    --accent-soft: #E9C878;
    --accent-ink: #453000;
    --on-accent: #1B1200;
    --border: #E0D3A9;
    --line: rgba(22,35,63,0.12);
    --shadow: rgba(22,35,63,0.16);
    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
}

h1 {
    font-size: clamp(2.15rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    line-height: 1.18;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.3;
}

p {
    margin: 0;
    color: var(--ink-soft);
}

a {
    color: inherit;
}

.num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

    .eyebrow::before {
        content: "";
        width: 1.3em;
        height: 1px;
        background: var(--accent-strong);
        display: inline-block;
    }

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.page-section {
    padding: 76px 0;
}

    .page-section.tight {
        padding: 56px 0;
    }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(246,241,227,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.brand-mark {
    flex-shrink: 0;
    color: var(--accent);
}

    .brand-mark img {
        display: block;
        height: 34px;
        width: auto;
    }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.brand-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

nav.primary-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 9px 14px;
    border-radius: var(--radius-s);
    position: relative;
    text-decoration: none;
    display: inline-block;
}

    .nav-link:hover {
        color: var(--ink);
        background: var(--surface-2);
    }

    .nav-link[aria-current="page"] {
        color: var(--ink);
        font-weight: 600;
    }

        .nav-link[aria-current="page"]::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 3px;
            height: 2px;
            background: var(--accent);
        }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--ink);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 0.94rem;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

    .btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.btn-gold {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

    .btn-gold:hover {
        background: var(--accent-strong);
    }

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

    .btn-ghost:hover {
        background: var(--surface-2);
    }

.btn-outline {
    background: transparent;
    color: var(--accent-strong);
    border-color: var(--accent-soft);
}

    .btn-outline:hover {
        background: var(--accent-soft);
    }

.btn-sm {
    padding: 9px 16px;
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
}

/* ---------- Language switcher (Google Website Translator) ---------- */
.gtranslate {
    display: flex;
    align-items: center;
    min-width: 40px;
}

    .gtranslate .goog-te-gadget {
        font-family: 'IBM Plex Sans', sans-serif !important;
        font-size: 0 !important;
        color: transparent !important;
    }

        .gtranslate .goog-te-gadget .goog-te-combo {
            font-size: 0.82rem !important;
            font-family: 'IBM Plex Sans', sans-serif !important;
            color: var(--ink) !important;
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius-s) !important;
            padding: 7px 8px !important;
            cursor: pointer;
            margin: 0 !important;
        }

        .gtranslate .goog-te-gadget img {
            display: none !important;
        }

.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-tooltip, .goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* ---------- Ledger ruled texture ---------- */
.ruled {
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 28px);
}

/* ---------- Hero ---------- */
.hero {
    padding: 64px 0 40px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .hero-copy p.lead {
        font-size: 1.08rem;
        max-width: 46ch;
    }

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

.hero-visual {
    position: relative;
}

.ledger-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: 0 18px 40px -20px var(--shadow);
    overflow: hidden;
}

.ledger-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ink);
    color: var(--bg);
}

    .ledger-card-head .dot-row {
        display: flex;
        gap: 6px;
    }

        .ledger-card-head .dot-row span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-soft);
            opacity: 0.85;
        }

    .ledger-card-head .title {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.85;
    }

table.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

    table.ledger th {
        text-align: left;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        font-weight: 600;
        padding: 12px 16px 8px;
        border-bottom: 1px solid var(--border);
    }

    table.ledger td {
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
    }

    table.ledger tr:last-child td {
        border-bottom: none;
    }

    table.ledger td.amt, table.ledger th.amt {
        text-align: right;
    }

.ledger-foot {
    padding: 12px 20px 16px;
    font-size: 0.76rem;
    color: var(--ink-faint);
    font-style: italic;
    border-top: 1px dashed var(--border);
}

.seal {
    position: absolute;
    right: -18px;
    bottom: -26px;
    z-index: 5;
}

.seal-ring {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    transform: rotate(-9deg);
    border: 2px dashed var(--accent);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 10px 24px -12px var(--shadow);
    position: relative;
}

    .seal-ring::before {
        content: "";
        position: absolute;
        inset: 7px;
        border: 1px solid var(--accent);
        border-radius: 50%;
        opacity: 0.6;
    }

.seal-symbol {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent-strong);
}

.seal-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-strong);
    text-align: center;
    line-height: 1.3;
}

/* ---------- Chips ---------- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
}

/* ---------- Illustrations ---------- */
.illus-banner {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 36px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
}

    .illus-banner svg {
        flex-shrink: 0;
    }

    .illus-banner .illus-copy {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .illus-banner .illus-copy h3 {
            font-size: 1.1rem;
        }

        .illus-banner .illus-copy p {
            font-size: 0.92rem;
        }

.illus-side {
    display: flex;
    align-items: center;
    gap: 36px;
}

    .illus-side.reverse {
        flex-direction: row-reverse;
    }

    .illus-side svg {
        flex-shrink: 0;
    }

    .illus-side .illus-copy {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

/* ---------- Feature grid ---------- */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 62ch;
    margin-bottom: 40px;
}

.grid-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-s);
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    flex-shrink: 0;
}

.feature-card h3 {
    font-size: 1.06rem;
}

.feature-card p {
    font-size: 0.92rem;
}

/* ---------- Steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: step;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 2px solid var(--border);
}

    .step .step-no {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.82rem;
        color: var(--accent-strong);
        font-weight: 600;
    }

    .step h3 {
        font-size: 1rem;
    }

    .step p {
        font-size: 0.88rem;
    }

/* ---------- CTA band ---------- */
.cta-band {
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius-l);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

    .cta-band h2 {
        color: var(--bg);
    }

    .cta-band p {
        color: rgba(246,241,227,0.7);
    }

.cta-band-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 46ch;
}

/* ---------- Alt sections ---------- */
.section-alt {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ---------- About page ---------- */
.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.who-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
}

    .who-list li {
        list-style: none;
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }

    .who-list .who-no {
        font-family: 'IBM Plex Mono', monospace;
        color: var(--ink-faint);
        font-size: 0.8rem;
    }

    .who-list strong {
        color: var(--ink);
    }

    .who-list span.desc {
        color: var(--ink-soft);
        font-size: 0.92rem;
    }

/* ---------- Pricing ---------- */
.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    overflow: hidden;
}

    .price-table thead th {
        background: var(--ink);
        color: var(--bg);
        text-align: left;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
        padding: 16px 22px;
    }

        .price-table thead th.amt, .price-table td.amt {
            text-align: right;
        }

    .price-table tbody td {
        padding: 20px 22px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    .price-table tbody tr:last-child td {
        border-bottom: none;
    }

    .price-table .item-name {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--ink);
    }

    .price-table .item-note {
        font-size: 0.84rem;
        color: var(--ink-soft);
        margin-top: 4px;
        display: block;
    }

    .price-table .item-amt {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
    }

    .price-table .item-tag {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent-strong);
        display: block;
        margin-top: 6px;
    }

    .price-table tr.total td {
        background: var(--surface-2);
    }

    .price-table tr.total .item-amt {
        font-size: 1.4rem;
    }

    .price-table tr.renewal td {
        background: var(--accent-soft);
        border-top: 2px dashed var(--accent);
    }

.includes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

    .includes ul {
        list-style: none;
        margin: 10px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .includes li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 0.92rem;
        color: var(--ink-soft);
    }

        .includes li svg {
            flex-shrink: 0;
            margin-top: 3px;
            color: var(--accent-strong);
        }

/* ---------- Contact ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 32px;
    align-items: start;
}

.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

    .contact-row .ic {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-s);
        background: var(--accent-soft);
        color: var(--accent-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .contact-row .label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-bottom: 3px;
    }

    .contact-row .value {
        font-size: 0.98rem;
        color: var(--ink);
        font-weight: 500;
    }

        .contact-row .value a {
            text-decoration: none;
            border-bottom: 1px solid var(--border);
        }

            .contact-row .value a:hover {
                border-color: var(--accent);
                color: var(--accent-strong);
            }

.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .hours-table td {
        padding: 6px 0;
        color: var(--ink-soft);
    }

        .hours-table td:last-child {
            text-align: right;
            color: var(--ink);
            font-weight: 500;
            font-family: 'IBM Plex Mono', monospace;
        }

.whatsapp-quick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-m);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    text-decoration: none;
    color: var(--accent-ink);
}

    .whatsapp-quick strong {
        display: block;
        font-size: 0.94rem;
    }

    .whatsapp-quick span {
        font-size: 0.8rem;
        opacity: 0.85;
    }

.enquiry-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 30px;
}

.form-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr will not shrink below an input's
       own default width, which is what makes a two-column form burst out of a
       narrow card. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field.full {
        grid-column: 1 / -1;
    }

    .field label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--ink);
    }

    .field .opt {
        font-weight: 400;
        color: var(--ink-faint);
    }

    .field input, .field select, .field textarea {
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 0.94rem;
        padding: 11px 13px;
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        background: var(--bg);
        color: var(--ink);
    }

    .field textarea {
        resize: vertical;
        min-height: 90px;
    }

.form-error {
    font-size: 0.82rem;
    color: #B3261E;
    min-height: 1.1em;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-top: 12px;
}

.send-status {
    font-size: 0.86rem;
    color: var(--accent-strong);
    margin-top: 12px;
    min-height: 1.2em;
}

/* ---------- Footer ---------- */
footer.site-footer {
    background: var(--ink);
    color: var(--bg);
    padding: 52px 0 28px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
}
@media (max-width: 1000px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 34ch;
}

    .footer-brand .brand-name {
        color: var(--bg);
    }

    .footer-brand p {
        color: rgba(246,241,227,0.65);
        font-size: 0.9rem;
    }

.footer-col h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246,241,227,0.55);
    margin: 0 0 14px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a, .footer-col button {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: rgba(246,241,227,0.85);
    font-size: 0.9rem;
    font-family: inherit;
}

    .footer-col a:hover, .footer-col button:hover {
        color: var(--accent-soft);
    }

.footer-bottom {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(246,241,227,0.18);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: rgba(246,241,227,0.55);
}

@media (max-width: 900px) {
    nav.primary-nav {
        position: fixed;
        inset: 62px 16px auto 16px;
        flex-direction: column;
        align-items: stretch;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-m);
        padding: 8px;
        box-shadow: 0 18px 40px -14px var(--shadow);
        display: none;
        gap: 2px;
    }

        nav.primary-nav.open {
            display: flex;
        }

    .nav-link {
        text-align: left;
        padding: 12px 14px;
    }

        .nav-link[aria-current="page"]::after {
            display: none;
        }

        .nav-link[aria-current="page"] {
            background: var(--accent-soft);
            border-radius: var(--radius-s);
        }

    .nav-toggle {
        display: flex;
    }

    .header-actions .btn-gold.header-cta {
        display: none;
    }

    .hero-grid, .grid-two, .contact-grid, .includes {
        grid-template-columns: 1fr;
    }

    .grid-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .seal {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cta-band {
        flex-direction: column;
        align-items: flex-start;
    }

    .illus-side, .illus-side.reverse {
        flex-direction: column;
    }

    .illus-banner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .grid-features {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .page-section {
        padding: 52px 0;
    }
}

/* ============================================================
   Real product screenshots.
   Framed like a browser window so a visitor reads them as
   "this is the actual software", not as an illustration.
   ============================================================ */
.shots {
    display: grid;
    gap: 28px;
    margin-top: 28px;
}

@media (min-width: 900px) {
    .shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
        /* The first shot is the persuasive one -- give it the full width. */
        .shots .shot:first-child {
            grid-column: 1 / -1;
        }
}

.shot {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow);
}

    .shot img {
        display: block;
        width: 100%;
        height: auto;
        border-bottom: 1px solid var(--border);
        /* The screenshots are light-on-light; a hairline keeps the window edge
     visible against the cream page background. */
    }

    .shot figcaption {
        padding: 16px 18px 18px;
        font-size: 0.94rem;
        line-height: 1.55;
        color: var(--ink-soft);
    }

        .shot figcaption strong {
            display: block;
            color: var(--ink);
            font-size: 1.02rem;
            margin-bottom: 4px;
        }

/* Telugu word used as a small tag beside an English heading. */
.te-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ============================================================
   "Three ways the data gets in" — each route is a small
   left-to-right flow diagram over an explanation. A diagram is
   the right visual here rather than a screenshot: the point is
   the JOURNEY (paper -> camera -> filled grid), which no single
   screen can show.
   ============================================================ */
.routes {
    display: grid;
    gap: 22px;
    margin-top: 28px;
}

@media (min-width: 1000px) {
    .routes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.route {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
}

    .route h3 {
        margin: 18px 0 8px;
        font-size: 1.12rem;
        line-height: 1.3;
    }

    .route > p {
        color: var(--ink-soft);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0 0 14px;
    }

.route-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 18px 6px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

    .flow-step b {
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.25;
        color: var(--ink-soft);
        text-align: center;
    }

    .flow-step svg {
        display: block;
    }
/* Nudge the arrows onto the icons' vertical centre rather than the
   caption text below them. */
.flow-arrow {
    flex: 0 0 auto;
    padding-top: 18px;
    opacity: 0.9;
}

.route-points {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 9px;
}

    .route-points li {
        position: relative;
        padding-left: 20px;
        font-size: 0.9rem;
        line-height: 1.55;
        color: var(--ink-soft);
    }

        .route-points li::before {
            content: "";
            position: absolute;
            left: 3px;
            top: 0.55em;
            width: 7px;
            height: 7px;
            border-radius: 2px;
            background: var(--accent-soft);
        }

    .route-points strong {
        color: var(--ink);
    }

/* The honest caveat under each route — deliberately quieter than the
   selling points above it, but present. */
.route-note {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

/* ============================================================
   SIX-ITEM NAV
   Adding Videos and Demo pushes the header past its width on
   smaller laptops. Tighten the links a little before the
   mobile breakpoint takes over rather than letting them wrap.
   ============================================================ */
@media (max-width: 1150px) and (min-width: 901px) {
    .nav-link {
        padding: 9px 9px;
        font-size: 0.87rem;
    }

    .header-row {
        gap: 10px;
    }

    .gtranslate {
        min-width: 0;
    }
    /* Enquire Now goes first when space runs out: Contact is still in
     the nav, and every page carries its own Enquire button. The Live
     Demo button is the one that has to survive. */
    .header-actions .btn-gold.header-cta {
        display: none;
    }
}

/* The Live Demo button. Unlike Enquire Now it stays visible on a
   phone -- trying the software is the one thing a visitor can do
   immediately, and it is the reason the button exists. */
.btn-demo {
    background: var(--surface);
    color: var(--accent-strong);
    border-color: var(--accent);
    gap: 7px;
}

    .btn-demo:hover {
        background: var(--accent-soft);
        color: var(--accent-ink);
    }

    .btn-demo .live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #2E9E5B;
        flex-shrink: 0;
        box-shadow: 0 0 0 3px rgba(46,158,91,0.18);
    }

@media (max-width: 900px) {
    .header-actions .btn-demo {
        display: inline-flex;
    }
}

@media (max-width: 400px) {
    .header-actions .btn-demo .btn-demo-long {
        display: none;
    }
}
/* Smallest phones still in use (320px): the brand strapline and
   some button padding go, so the header never scrolls sideways. */
@media (max-width: 345px) {
    .brand-sub {
        display: none;
    }

    .header-actions .btn-demo {
        padding: 8px 12px;
    }

    .header-row {
        padding-left: 16px;
        padding-right: 16px;
        gap: 8px;
    }
}

/* ============================================================
   VIDEO PORTFOLIO
   The films are 1080x1920 vertical reels made for WhatsApp and
   Instagram, so each sits in a phone-shaped frame rather than a
   widescreen player -- a letterboxed 16:9 box around a vertical
   video looks like a mistake.

   Laid out as a portfolio: small cards, several to a row, so a
   growing library still fits on one screen. The timed rundown of
   what happens in a film is folded away behind a summary line,
   because it is what makes a card tall.
   ============================================================ */
.reels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    /* stretch, not start: every card in a row ends level with its
     neighbours, which is what makes a grid of them read as a
     portfolio rather than a ragged pile. */
    align-items: stretch;
}
/* Two to a row on a phone rather than one enormous one. */
@media (max-width: 560px) {
    .reels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .reel-phone {
        max-width: 118px;
        padding: 5px;
        border-radius: 13px;
    }

        .reel-phone video {
            border-radius: 9px;
        }

    .reel-media {
        padding: 10px 10px 9px;
    }

    .reel-body {
        padding: 11px 12px 13px;
        gap: 7px;
    }

    .reel-title h3 {
        font-size: 0.88rem;
    }

    .reel-actions .btn {
        padding: 6px 10px;
        font-size: 0.72rem;
    }
}

.reel {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: 0 10px 24px -18px var(--shadow);
}

.reel-media {
    display: flex;
    justify-content: center;
    padding: 14px 14px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
/* The phone frame: a dark bezel with a rounded screen inside. */
.reel-phone {
    position: relative;
    width: 100%;
    max-width: 125px;
    padding: 6px;
    background: var(--ink);
    border-radius: 16px;
    box-shadow: 0 8px 18px -10px var(--shadow);
}

    .reel-phone::before {
        content: "";
        position: absolute;
        top: 2.5px;
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 3px;
        border-radius: 999px;
        background: rgba(246,241,227,0.35);
    }

    .reel-phone video {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        border-radius: 11px;
        background: var(--ink);
    }

.reel-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    flex: 1;
}

.reel-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .reel-title h3 {
        font-size: 0.98rem;
        line-height: 1.25;
    }

.reel-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.reel-body > p {
    font-size: 0.84rem;
    line-height: 1.5;
    /* Three lines, then an ellipsis. One long description must not make
     its card twice the height of the ones beside it. The full text is
     still in the page for anyone reading it with a screen reader. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The rundown, folded away. Open one and the card grows; the rest
   of the row stays where it is, because the grid aligns to the top. */
.reel-more {
    margin: 0;
}

    .reel-more > summary {
        cursor: pointer;
        list-style: none;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent-strong);
        padding: 6px 0;
        border-top: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .reel-more > summary::-webkit-details-marker {
            display: none;
        }

        .reel-more > summary::after {
            content: "";
            width: 6px;
            height: 6px;
            margin-left: auto;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg) translate(-2px, -2px);
        }

    .reel-more[open] > summary::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .reel-more > summary:hover {
        color: var(--accent-ink);
    }

.beats {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .beats li {
        display: flex;
        gap: 10px;
        align-items: baseline;
        padding: 6px 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.79rem;
        color: var(--ink-soft);
        line-height: 1.45;
    }

        .beats li:last-child {
            border-bottom: none;
        }

    .beats .t {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.7rem;
        color: var(--accent-strong);
        font-weight: 600;
        flex-shrink: 0;
        min-width: 3em;
    }

    .beats strong {
        color: var(--ink);
        font-weight: 600;
    }

.reel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.reel-more {
    margin-top: auto;
}

    .reel-more + .reel-actions {
        margin-top: 0;
    }

.reel-actions .btn {
    padding: 7px 12px;
    font-size: 0.78rem;
}

/* ---------- One shelf per language ---------- */
.shelf {
    margin-bottom: 44px;
}

    .shelf:last-of-type {
        margin-bottom: 0;
    }

.shelf-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--border);
}

    .shelf-head h2 {
        font-size: 1.35rem;
    }

    .shelf-head .shelf-count {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    .shelf-head p {
        font-size: 0.88rem;
        width: 100%;
        margin-top: -4px;
    }

/* ---------- Print material row ---------- */
.print-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 760px) {
    .print-row {
        grid-template-columns: 1fr 1fr;
    }
}

.print-item {
    display: flex;
    gap: 20px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 20px 22px;
}

    .print-item img {
        width: 88px;
        height: auto;
        flex-shrink: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        background: var(--surface);
    }

    .print-item .print-copy {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .print-item h3 {
        font-size: 1rem;
    }

    .print-item p {
        font-size: 0.86rem;
    }

.print-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.85rem;
}

    .print-links a {
        color: var(--accent-strong);
        text-decoration: none;
        border-bottom: 1px solid var(--accent-soft);
    }

        .print-links a:hover {
            border-color: var(--accent-strong);
        }

/* ============================================================
   LIVE DEMO PAGE
   ============================================================ */
.demo-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    padding: 60px 0 20px;
}

@media (max-width: 900px) {
    .demo-hero {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

.demo-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* The credential card is styled to look like the login box the
   visitor is about to see, so the two read as the same thing. */
.cred-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: 0 18px 40px -20px var(--shadow);
}

.cred-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

    .cred-head .live-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #58C68A;
    }

.cred-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cred-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .cred-field .label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    .cred-field .value {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--ink);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-s);
        padding: 10px 14px;
        word-break: break-all;
    }

.cred-note {
    font-size: 0.83rem;
    color: var(--ink-faint);
    line-height: 1.55;
    border-top: 1px dashed var(--border);
    padding-top: 14px;
}

/* Numbered "things to try" list. */
.try-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
}

@media (min-width: 780px) {
    .try-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }
}

.try-list li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.try-list .n {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-strong);
    flex-shrink: 0;
    padding-top: 2px;
}

.try-list .try-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.try-list strong {
    color: var(--ink);
    font-size: 0.97rem;
}

.try-list span {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* What is in the sample data -- a plain table, because that is
   what a financier reading it will compare against his own book. */
.sample-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    overflow: hidden;
}

    .sample-table thead th {
        text-align: left;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.66rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--ink-faint);
        font-weight: 600;
        padding: 14px 20px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
    }

    .sample-table tbody td {
        padding: 14px 20px;
        border-bottom: 1px solid var(--line);
        font-size: 0.9rem;
        color: var(--ink-soft);
        vertical-align: top;
    }

    .sample-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sample-table td:first-child {
        color: var(--ink);
        font-weight: 500;
        white-space: nowrap;
    }

    .sample-table td.amt {
        text-align: right;
        font-family: 'IBM Plex Mono', monospace;
        color: var(--ink);
        white-space: nowrap;
    }

    .sample-table thead th.amt {
        text-align: right;
    }

.table-scroll {
    overflow-x: auto;
}

/* The honest warnings box. Deliberately plain, not alarming. */
.notice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-m);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .notice h3 {
        font-size: 1.02rem;
    }

    .notice ul {
        margin: 0;
        padding-left: 1.1em;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .notice li {
        font-size: 0.9rem;
        color: var(--ink-soft);
        line-height: 1.55;
    }

/* ---------- Two-card band: watch it, then try it ---------- */
.dual-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 800px) {
    .dual-cta {
        grid-template-columns: 1fr;
    }
}

.dual-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 28px 30px;
}

    .dual-card .dual-icon {
        color: var(--accent-strong);
    }

    .dual-card h3 {
        font-size: 1.1rem;
    }

    .dual-card p {
        font-size: 0.92rem;
    }

    .dual-card .btn {
        align-self: flex-start;
        margin-top: 6px;
    }

/* ============================================================
   TWO OLD OVERFLOW BUGS ON THE HOME PAGE
   Found while measuring the new six-item header. Neither is
   caused by the Videos/Demo work, but both make the home page
   scroll sideways, which on a phone looks broken.

   1. The rotated "Digital Passbook" seal is positioned outside
      its card (right: -18px) and the rotation makes it wider
      still, so it pushed past the right edge on laptop widths.
   2. The sample ledger table has five columns and could not
      shrink below about 424px, so on a 390px phone the whole
      hero was wider than the screen.
   ============================================================ */
@media (max-width: 1180px) {
    .seal {
        right: 10px;
    }
}

.hero-visual, .hero-copy {
    min-width: 0;
}

@media (max-width: 560px) {
    table.ledger {
        font-size: 0.76rem;
    }

        table.ledger th {
            padding: 10px 8px 7px;
        }

        table.ledger td {
            padding: 9px 8px;
        }

    .ledger-card-head, .ledger-foot {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ------------------------------------------------------------
   Three fixes found in the rendered pages.
   ------------------------------------------------------------ */

/* 1. Six nav items were wrapping onto two lines on a 1280px
      screen. Never let a nav label break, and start tightening
      the spacing earlier so nowrap cannot overflow instead. */
.nav-link {
    white-space: nowrap;
}

/* 2. A ghost button inside the dark CTA band was invisible:
      .btn-ghost paints ink-coloured text, and the band is that
      same ink colour. Light it up when it sits on the dark. */
.cta-band .btn-ghost {
    color: var(--bg);
    border-color: rgba(246,241,227,0.38);
}

    .cta-band .btn-ghost:hover {
        background: rgba(246,241,227,0.12);
        color: var(--bg);
    }

/* 3. The Live Demo button put the flex gap between "Try" and
      "the Demo" as well as after the dot, so the label read with
      a hole in it. Keep the label as one flex child. */
.btn-demo .btn-demo-label {
    display: inline;
}

/* The hero's sample ledger has five columns; below about 340px it
   cannot shrink any further, so let it scroll inside its own card
   rather than dragging the whole page sideways. */
.ledger-card .table-scroll {
    overflow-x: auto;
}

/* On a 320px phone the three-step flow diagram inside each "route"
   card could not shrink below 355px and pushed the page sideways.
   Let the steps wrap onto a second line there. */
@media (max-width: 380px) {
    .route {
        min-width: 0;
    }

    .route-flow {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
    }
}

/* Contact page at 320px: the two cards' 30px inner padding left
   their contents wider than the screen. Trim the padding rather
   than the content. */
@media (max-width: 380px) {
    .contact-card, .enquiry-card {
        padding: 20px 18px;
    }

    .contact-grid {
        gap: 20px;
    }
}

/* Three columns of prose squeezed into a 390px phone is unreadable.
   Keep the table at a legible width and let it scroll inside its
   own box instead, with a line telling the reader it does. */
@media (max-width: 700px) {
    .sample-table {
        min-width: 560px;
    }
}

.scroll-hint {
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin-top: 10px;
    font-style: italic;
}

@media (min-width: 701px) {
    .scroll-hint {
        display: none;
    }
}

/* A film with no still image beside it gets a cover panel instead of an
   empty dark rectangle: brand mark, the film's name, and a play circle.
   Pressing it starts the film and removes the cover. */
.reel-phone {
    position: relative;
}

.reel-cover {
    position: absolute;
    inset: 10px;
    border: 0;
    border-radius: 17px;
    cursor: pointer;
    background: linear-gradient(160deg, #1D2C4C 0%, #16233F 55%, #101A2F 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
}

    .reel-cover img {
        opacity: 0.9;
    }

.reel-cover-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--bg);
    max-width: 15ch;
}

.reel-cover-play {
    margin-top: 4px;
    line-height: 0;
}

.reel-cover:hover .reel-cover-play svg circle {
    fill: rgba(246,241,227,0.24);
}

.reel-cover:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: -4px;
}


/* ============================================================
   NEW MODULE HELPER CLASSES (Loans & Collections)
   ============================================================ */

/* Light red background for clients whose loan end date is completed */
.bg-light-red {
    background-color: #ffe6e6 !important;
}

/* Custom Print Styles to make the run sheet look great on paper */
@media print {
    body {
        background-color: #fff;
    }

    .d-print-none {
        display: none !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .table {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

        .table th, .table td {
            border: 1px solid #000 !important;
            padding: 10px !important;
            font-size: 14px !important;
            color: #000 !important;
        }
    /* Make the writing box stand out on paper */
    .write-box {
        border: 2px solid #000 !important;
        height: 35px;
    }

    .print-header {
        display: block !important;
        margin-bottom: 20px;
        text-align: center;
    }
}

.print-header {
    display: none;
}

.write-box-screen {
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 10px;
    color: #aaa;
    text-align: center;
}

/* ---------- Enquiry form: the honeypot and the thank-you ----------
   The honeypot is a field only a bot can see. Hidden two ways on purpose:
   a browser or reader that ignores one still hides it, and a person never
   fills it in by accident. Not display:none, because some bots skip those. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

.form-sent {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px; padding: 16px 18px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-m);
}
.form-sent strong { color: var(--accent-ink); font-size: 1rem; }
.form-sent span { color: var(--accent-ink); font-size: 0.9rem; line-height: 1.5; opacity: 0.85; }

/* Several messages can come back at once, so give them room to breathe. */
.form-error div { padding: 2px 0; }

/* ============================================================
   WEBSITE ENQUIRIES (leads.php)
   Not linked from the site. Styled with the same parts as the
   rest of it so it does not feel like a different program.
   ============================================================ */
.lead-tools {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 24px;
}
.lead-tools input[type="search"] {
  flex: 1; min-width: 220px;
  font-family: inherit; font-size: 0.92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 10px 14px;
}
.lead-tools select {
  font-family: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 10px 12px;
}

.lead-list { display: flex; flex-direction: column; gap: 14px; }
.lead {
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m); padding: 18px 22px;
}
.lead.is-handled { border-left-color: var(--border); opacity: 0.72; }
.lead-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.lead-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lead-top h2 { font-size: 1.05rem; }
.lead-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-faint);
}
.lead-tag-new { background: var(--accent-soft); color: var(--accent-ink); }
.lead-when {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--ink-faint);
}
.lead-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.92rem; }
.lead-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
.lead-contact a:hover { color: var(--accent-strong); border-color: var(--accent); }
.lead-contact .lead-wa { color: var(--accent-strong); }
.lead-message {
  font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--surface-2); border-radius: var(--radius-s);
  padding: 10px 14px; margin-top: 2px;
  overflow-wrap: anywhere;
}
.lead-action { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.lead-action .btn { justify-content: center; white-space: nowrap; }
.lead-badnum { color: #B3261E; font-size: 0.9rem; }

/* WhatsApp's own green, so the button is recognised before it is read.
   The darker shade keeps white text readable, which #25D366 does not. */
.btn-wa { background: #128C7E; color: #FFFFFF; border-color: #128C7E; }
.btn-wa:hover { background: #0E6F63; border-color: #0E6F63; color: #FFFFFF; }
@media (max-width: 620px) {
  .lead { flex-direction: column; gap: 14px; }
  .lead-action { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .lead-action > * { flex: 1; min-width: 120px; }
  .lead-action .btn { width: 100%; }
}

/* ============================================================
   THE ENQUIRY SYSTEM
   leads.php, lead.php, leads_templates.php, leads_reports.php.
   Built from the same parts as the public site so it does not
   feel like a different program.
   ============================================================ */
.crm-nav { margin-left: auto; margin-right: 12px; }
.crumb { font-size: 0.88rem; margin-bottom: 16px; }
.crumb a { color: var(--accent-strong); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---------- The pipeline strip ---------- */
.pipeline { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pipe {
  display: flex; flex-direction: column; gap: 2px; min-width: 88px;
  padding: 12px 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); border-top: 3px solid var(--border);
}
.pipe:hover { border-color: var(--accent-soft); border-top-color: var(--accent-soft); }
.pipe.is-on { border-top-color: var(--accent); background: var(--surface-2); }
.pipe.is-won.is-on { border-top-color: #2E7D52; }
.pipe.is-lost.is-on { border-top-color: #B3261E; }
.pipe.is-due .pipe-n { color: #B3261E; }
.pipe-n { font-size: 1.3rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.pipe-l { font-size: 0.76rem; color: var(--ink-soft); }

/* ---------- A row in the list ---------- */
.lead-row { align-items: flex-start; }
.lead-row.is-due { border-left-color: #B3261E; }
.lead-row.is-won { border-left-color: #2E7D52; }
.lead-pick { padding-top: 2px; }
.lead-pick input { width: 16px; height: 16px; cursor: pointer; }
.lead-top h2 a { color: var(--ink); text-decoration: none; }
.lead-top h2 a:hover { color: var(--accent-strong); }
.lead-biz { color: var(--ink-soft); font-size: 0.9rem; }
.lead-tag-due { background: #FBE9E7; color: #B3261E; }
.stage-new { background: var(--accent-soft); color: var(--accent-ink); }
.stage-won { background: #DFF0E6; color: #1D5C3B; }
.stage-lost { background: #F2E7E6; color: #8C2C24; }

.bulk-bar {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px; padding: 12px 18px;
  background: var(--ink); border-radius: 999px;
  box-shadow: 0 12px 28px -14px var(--shadow);
}
.bulk-count { color: var(--bg); font-weight: 600; font-size: 0.9rem; }
.bulk-label { color: rgba(246,241,227,0.6); font-size: 0.82rem; }
.bulk-bar .btn-ghost { color: var(--bg); border-color: rgba(246,241,227,0.4); }
.bulk-bar .btn-ghost:hover { background: rgba(246,241,227,0.14); color: var(--bg); }

/* ---------- One enquiry ---------- */
.lead-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: start; }
@media (max-width: 980px) { .lead-detail { grid-template-columns: 1fr; } }
.lead-col { min-width: 0; }

.timeline { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { padding: 12px 0 12px 16px; border-left: 2px solid var(--border); position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -5px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.tl-whatsapp::before { background: #128C7E; }
.tl-email::before { background: var(--accent); }
.tl-status::before { background: var(--ink-faint); }
.tl-call::before { background: var(--accent-strong); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tl-head strong { font-size: 0.94rem; color: var(--ink); }
.tl-kind, .tl-when {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.tl-when { margin-left: auto; }
.tl-body {
  margin-top: 6px; font-size: 0.87rem; line-height: 1.55; color: var(--ink-soft);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 9em; overflow: auto;
}

.send-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.send-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-s);
}
.send-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.send-row-main strong { font-size: 0.92rem; }
.send-preview { font-size: 0.8rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-row .btn { margin-left: auto; flex-shrink: 0; }
.smtp-log {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 10px 12px; margin-top: 8px; max-height: 16em; overflow: auto; white-space: pre-wrap;
}

/* ---------- Templates ---------- */
.tpl-layout { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 22px; align-items: start; }
@media (max-width: 980px) { .tpl-layout { grid-template-columns: 1fr; } }
.tpl-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tpl-side { position: sticky; top: 88px; }
@media (max-width: 980px) { .tpl-side { position: static; } }

/* Find one / add one, side by side above the editor. Both are the same
   height so the pair reads as one bar rather than two stray cards. */
.tpl-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 760px) { .tpl-bar { grid-template-columns: 1fr; } }
.tpl-bar .enquiry-card { display: flex; flex-direction: column; padding: 18px 20px; }
.tpl-bar .form-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tpl-bar .form-actions { margin-top: auto; padding-top: 14px; }
.tpl-find select, .tpl-new select, .tpl-new input { width: 100%; }
.tpl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpl-name {
  flex: 1; min-width: 160px;
  font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 6px 8px;
}
.tpl-name:hover, .tpl-name:focus { background: var(--surface-2); border-color: var(--border); }
.tpl-onoff { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-soft); }
/* On a phone the name and the Hide-it box fight over one line. Give the name
   a line of its own, under the tag, rather than squeezing it to nothing. */
@media (max-width: 560px) {
  .tpl-head { row-gap: 8px; }
  .tpl-head .tpl-name { order: 3; flex: 1 0 100%; min-width: 0; padding-left: 0; }
  .tpl-head .tpl-onoff { margin-left: auto; }
}
.tag-wa { background: #D9EFEA; color: #0E5F55; }
.tag-email { background: var(--accent-soft); color: var(--accent-ink); }

.tpl-preview {
  margin-top: 14px; padding: 14px 16px;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-s);
}
.tpl-preview-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.tpl-preview pre {
  margin: 8px 0 0; font-family: inherit; font-size: 0.88rem; line-height: 1.6;
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}

.ph-group {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  margin: 18px 0 8px;
}
.ph-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem;
  background: var(--surface-2); color: var(--accent-strong);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 5px 8px; cursor: pointer;
}
.ph-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Reports ----------
   One hue for every bar: these are counts of the same thing, and a
   different colour per bar would imply a difference that is not there.
   Won and Lost get the status colours, and each carries a word as well
   as a colour so they are not told apart by colour alone. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat-row-tight { margin-bottom: 0; margin-top: 16px; }
.stat {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 20px;
}
.stat.is-warn { border-color: #E7C3BF; background: #FDF6F5; }
.stat-n { font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.05; }
.stat.is-warn .stat-n { color: #B3261E; }
.stat-l { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }

.report-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 26px 28px; margin-bottom: 20px;
}
.report-block h2 { font-size: 1.15rem; }
.report-sub { font-size: 0.95rem; margin: 22px 0 10px; }
.report-note, .report-empty { font-size: 0.88rem; margin-top: 8px; }
.report-empty { color: var(--ink-faint); font-style: italic; }
.report-warn { font-size: 0.88rem; margin-top: 14px; color: #B3261E; }
.report-warn a { color: #B3261E; }

/* Daily bars. Thin marks, rounded at the data end only, sitting on the
   baseline -- a zero day is a faint tick, not a gap you cannot see. */
/* A year of days is 365 bars; at 2px each that is wider than a phone. Let the
   strip scroll inside its own box rather than dragging the page sideways. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-top: 16px; overflow-x: auto; }
.spark-bar {
  flex: 1; min-width: 2px;
  height: max(2px, var(--h));
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}
.spark-bar.is-zero { background: var(--border); height: 2px; border-radius: 0; }
.spark-bar:hover { background: var(--accent-strong); }
.spark-axis {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--ink-faint);
}

.bar-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bar-table th {
  text-align: left; font-weight: 500; font-size: 0.9rem; color: var(--ink);
  padding: 7px 14px 7px 0; white-space: nowrap; width: 1%;
}
.bar-cell { padding: 7px 0; width: 100%; }
.bar {
  display: block; height: 12px; background: var(--accent);
  border-radius: 0 4px 4px 0; min-width: 2px;
}
.bar-good { background: #2E7D52; }
.bar-bad { background: #B3261E; }
.bar-n { padding: 7px 0 7px 14px; font-size: 0.9rem; color: var(--ink); text-align: right; white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; }
.dot-good { background: #2E7D52; }
.dot-bad { background: #B3261E; }

/* The browser hides [hidden] with display:none, but any rule of our own that
   sets display -- .field is a flex row, .bulk-bar is a flex bar -- outranks
   the browser's and the element comes back. This puts hidden back on top,
   which is what every "show this only when..." on the site depends on. */
[hidden] { display: none !important; }

/* On the narrowest phones the four stat tiles and the bar tables need less
   padding, or the numbers push the page sideways. */
@media (max-width: 400px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px 14px; }
  .stat-n { font-size: 1.5rem; }
  .report-block { padding: 20px 16px; }
  .bar-table th { font-size: 0.84rem; padding-right: 10px; white-space: normal; }
  .bar-n { padding-left: 10px; font-size: 0.84rem; }
  .spark { height: 64px; }
}
@media (max-width: 560px) { .spark { gap: 1px; } }

/* =====================================================================
   THE OFFICE: clients, invoices, money, reports
   ===================================================================== */

/* Two series, one meaning each: money in, money out. Checked with the
   palette validator against both the white and the cream surface --
   adjacent-pair CVD separation 10.6, normal vision 19.4, contrast over 3:1.
   Never used alone: every bar carries a legend and a printed figure. */
:root {
  --in: #0F8A76;
  --in-soft: #D7EFE9;
  --out: #B26A1F;
  --out-soft: #F4E3CC;
  --late: #B3261E;
}

/* ---------- who is signed in ---------- */
.who {
  font-size: 0.8rem; color: var(--ink-soft);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) { .who { display: none; } }

/* ---------- stat tiles ---------- */
.stat-sub { font-size: 0.74rem; color: var(--ink-faint); margin-top: 2px; display: block; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
}
.data-table th, .data-table td { padding: 10px 12px; text-align: left; vertical-align: top; }
.data-table thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 500;
}
.data-table tbody tr + tr { border-top: 1px solid var(--line); }
.data-table td.ta-r, .data-table th.ta-r { text-align: right; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-faint); }
.cell-sub { display: block; font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
.cell-sub.is-late { color: var(--late); }
.data-table .row-off td { opacity: 0.55; }
.data-table .row-in td:first-child { box-shadow: inset 3px 0 0 var(--in); }
.data-table .row-out td:first-child { box-shadow: inset 3px 0 0 var(--out); }
.data-table input[type="text"], .data-table input[type="number"], .data-table select {
  width: 100%; min-width: 70px; padding: 6px 8px; font-size: 0.86rem;
}
.data-table input.ta-r { text-align: right; }
.line-table input { min-width: 60px; }
.line-table td:first-child input { min-width: 160px; }

/* ---------- small lists inside a card ---------- */
.mini-list { display: flex; flex-direction: column; margin-top: 10px; }
.mini-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit;
}
.mini-row:first-child { border-top: 0; }
a.mini-row:hover { color: var(--accent-strong); }
.mini-main { display: flex; flex-direction: column; min-width: 0; }
.mini-sub { font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
.mini-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- invoice totals ---------- */
.totals-box {
  /* min() rather than a flat 340px: on a narrow phone a fixed width here is
     what pushes the whole page sideways. */
  margin-top: 16px; margin-left: auto; max-width: min(340px, 100%);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 12px 16px;
}
.tot-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.9rem; }
.tot-grand {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px;
  font-size: 1.05rem; font-weight: 600;
}
.tot-tax { width: 3.4em; padding: 2px 5px; font-size: 0.86rem; text-align: right; }

/* ---------- statuses ---------- */
.st-draft { background: var(--surface-3); color: var(--ink-soft); }
.st-open  { background: var(--accent-soft); color: var(--accent-ink); }
.st-part  { background: var(--out-soft); color: #6B3D07; }
.st-paid  { background: var(--in-soft); color: #07463C; }
.st-over  { background: #F6D9D6; color: #7A1811; }
.st-off   { background: var(--surface-3); color: var(--ink-faint); }
.stage-live { background: var(--in-soft); color: #07463C; }
.stage-settingup { background: var(--accent-soft); color: var(--accent-ink); }
.stage-onhold { background: var(--surface-3); color: var(--ink-soft); }
.stage-stopped { background: var(--surface-3); color: var(--ink-faint); }
.paid-note { font-size: 0.9rem; color: #07463C; font-weight: 500; }

/* ---------- two-column working screens ---------- */
.lead-layout, .money-layout {
  display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 22px; align-items: start;
}
/* A grid item is min-width:auto by default, so one wide table inside a card
   stretches its whole column and pushes the page sideways on a phone. This is
   the line that lets the table scroll on its own instead. */
.lead-layout > *, .money-layout > * { min-width: 0; }
@media (max-width: 980px) {
  .lead-layout, .money-layout { grid-template-columns: 1fr; }
}
.lead-side, .money-side { position: sticky; top: 88px; min-width: 0; }
@media (max-width: 980px) { .lead-side, .money-side { position: static; } }
.money-main { min-width: 0; }
.card-highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.crumb, .back-link { font-size: 0.86rem; margin-bottom: 14px; }
.field-hint { display: block; font-size: 0.76rem; color: var(--ink-faint); margin-top: 4px; }
.opt { color: var(--ink-faint); font-weight: 400; }
.span-2 { grid-column: 1 / -1; }
.check-block {
  border-top: 1px solid var(--line); padding-top: 14px;
}

/* ---------- money in / money out switch ---------- */
.seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.seg-opt { flex: 1; position: relative; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: block; text-align: center; padding: 9px 8px; font-size: 0.88rem;
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.seg-opt + .seg-opt span { border-left: 1px solid var(--border); }
.seg-opt input:checked + span { background: var(--ink); color: #fff; font-weight: 500; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- the toolbar above a list ---------- */
.tool-label { font-size: 0.82rem; color: var(--ink-soft); align-self: center; }

/* ---------- reports: bars ---------- */
.bar-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bar-table th[scope="row"] { text-align: left; font-weight: 500; padding: 7px 10px 7px 0; width: 30%; }
.bar-table td { padding: 7px 0 7px 10px; }
.bar-cell { width: 46%; }
.bar {
  display: block; height: 9px; border-radius: 0 4px 4px 0; min-width: 2px;
  background: var(--accent);
}
.bar-in { background: var(--in); }
.bar-out { background: var(--out); }
.pl-summary th[scope="row"] { width: auto; }
.pl-summary .pl-grand th, .pl-summary .pl-grand td {
  border-top: 1px solid var(--border); padding-top: 10px; font-size: 1.05rem; font-weight: 600;
}

/* ---------- reports: month by month ---------- */
.chart-legend { display: flex; gap: 16px; margin: 10px 0 14px; font-size: 0.82rem; color: var(--ink-soft); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lg-in { background: var(--in); }
.lg-out { background: var(--out); }
.month-chart {
  display: flex; gap: 10px; align-items: flex-end; overflow-x: auto;
  padding-bottom: 6px;
}
.mo { flex: 1 1 0; min-width: 42px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mo-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  height: 120px; width: 100%;
}
.mo-bar { width: 42%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; display: block; }
.mo-in { background: var(--in); }
.mo-out { background: var(--out); }
.mo-label { font-size: 0.72rem; color: var(--ink-soft); }
.mo-net { font-size: 0.66rem; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.mo-net.is-down { color: var(--late); }
@media (max-width: 640px) {
  .month-chart { gap: 6px; }
  .mo { min-width: 34px; }
  .mo-net { display: none; }
}

/* ---------- page heading with an action on the right ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 2px 0 0; }
.page-head p { margin-top: 6px; font-size: 0.95rem; color: var(--ink-soft); }
.card-title { font-size: 1.05rem; margin: 0; }

/* ---------- settings signposts ---------- */
.setting-list { display: flex; flex-direction: column; gap: 14px; }
.setting-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: inherit;
}
.setting-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px var(--shadow); }
.setting-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
}
.setting-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setting-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem; font-weight: 600; color: var(--ink);
}
.setting-what { font-size: 0.88rem; color: var(--ink-soft); }
.setting-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 3px;
}
.setting-go { color: var(--ink-faint); flex-shrink: 0; }
.setting-card:hover .setting-go { color: var(--accent-strong); }
@media (max-width: 520px) {
  .setting-card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .setting-go { display: none; }
}

/* ---------- the users table ---------- */
.person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-weight: 600; font-size: 0.92rem;
}
.person-text { display: flex; flex-direction: column; min-width: 0; }
.person-text a { text-decoration: none; color: var(--ink); }
.person-text a:hover { color: var(--accent-strong); }
.user-table td { vertical-align: middle; }
.tag-you { background: var(--surface-3); color: var(--ink-soft); }
.role-admin { background: var(--accent-soft); color: var(--accent-ink); }
.role-staff { background: #D9EFEA; color: #0E5F55; }
.warn-text { color: #B3261E; font-size: 0.84rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.76rem; color: var(--ink-soft); white-space: nowrap;
}

/* ---------- picking a role ---------- */
.role-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.role-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); cursor: pointer;
}
.role-opt:hover { border-color: var(--accent); }
.role-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.role-opt:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.role-opt input { margin-top: 3px; }
.role-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-name { font-weight: 600; font-size: 0.95rem; }
.role-what { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- the permission grid ---------- */
.perm-block { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.perm-block[hidden] { display: none !important; }
.perm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perm-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.perm-tools { display: flex; gap: 6px; }
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.perm-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}
.perm-opt:hover { border-color: var(--accent); }
.perm-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.perm-opt input { grid-row: 1 / 3; margin-top: 3px; width: 16px; height: 16px; }
.perm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.perm-what { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }
.perm-admin-note {
  margin-top: 18px; padding: 14px 16px;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-s);
  font-size: 0.88rem; color: var(--ink-soft);
}
.perm-admin-note[hidden] { display: none !important; }

/* The save bar. Deliberately not sticky: floating it over the page covered
   the last row of tickboxes, and the form is short enough to scroll. */
.form-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 20px; padding: 16px 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.form-bar .btn { margin: 0; }

/* ---------- the printable invoice ---------- */
.print-body { background: #F2F2F2; }
.print-sheet {
  background: #fff; color: #16233F; max-width: 760px; margin: 24px auto; padding: 40px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}
.print-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.print-brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.print-line { font-size: 0.86rem; color: #56617E; margin-top: 2px; }
.print-strong { font-size: 1rem; font-weight: 600; margin-top: 2px; }
.print-meta { text-align: right; }
.print-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8C93A9; margin-bottom: 6px;
}
.print-to { margin-top: 32px; }
.print-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8C93A9;
}
.print-period { margin-top: 14px; font-size: 0.88rem; color: #56617E; }
.print-table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 0.9rem; }
.print-table th, .print-table td { padding: 9px 8px; text-align: left; }
.print-table thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8C93A9;
  border-bottom: 1px solid #16233F; font-weight: 500;
}
.print-table tbody tr + tr td { border-top: 1px solid rgba(22,35,63,0.1); }
.print-table tfoot td { border-top: 1px solid rgba(22,35,63,0.1); }
.print-table tfoot .print-total td { border-top: 1px solid #16233F; font-weight: 600; font-size: 1rem; }
.print-notes { margin-top: 24px; font-size: 0.88rem; color: #56617E; }
.print-bank { margin-top: 24px; }
.print-foot {
  margin-top: 36px; padding-top: 14px; border-top: 1px solid rgba(22,35,63,0.1);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.78rem; color: #8C93A9;
}
@media print {
  .print-body { background: #fff; }
  .print-sheet { box-shadow: none; margin: 0; max-width: none; padding: 0; }
  .print-hide { display: none !important; }
}
@media (max-width: 560px) {
  .print-sheet { padding: 22px; margin: 10px; }
  .print-meta { text-align: left; }
  /* On a phone the four columns cannot fit; let the table scroll on its own
     rather than dragging the whole sheet sideways. Printing is unaffected. */
  .print-table { display: block; overflow-x: auto; white-space: nowrap; }
  .print-table td:first-child { white-space: normal; min-width: 150px; }
}

/* ---------- small buttons ---------- */
.btn-xs {
  font-size: 0.76rem; padding: 4px 9px; line-height: 1.4;
}


/* =====================================================================
   SOCIAL LINKS
   Drawn as plain line glyphs in the same hand as the rest of the site's
   icons, not as the platforms' own logos: those are trademarks, and this
   way the row stays in one visual voice. If you would rather use the real
   marks, each platform publishes them on its own brand-resources page --
   drop the files into assets/img/ and swap the <svg> for an <img>.
   ===================================================================== */
.social-list a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.social-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(246,241,227,0.28);
    color: inherit;
}
.social-list a:hover .social-ic {
    border-color: var(--accent-soft);
    background: rgba(233,200,120,0.14);
}

/* On the contact page the same links sit on a light card. */
.contact-social {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.contact-social .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}
.social-pill .social-ic {
    width: 28px;
    height: 28px;
    border-color: var(--border);
    color: var(--accent-strong);
}
.social-pill:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
}
.social-pill:hover .social-ic {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.social-note {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--ink-faint);
}