/* ==========================================================================
   Frasus Business Support — Material Design
   Red / blue / white. Single stylesheet, no build step.

   Roboto is referenced first but not downloaded: it ships with Android, which
   is most of this audience, and the fallback stack is near-identical
   elsewhere. A web-font request would cost a round trip on a slow mobile
   connection for a typeface most users already have.
   ========================================================================== */

:root {
    /* ---- Material colour roles ------------------------------------- */
    --md-primary:            #1565c0;   /* Blue 800  */
    --md-primary-hover:      #0d47a1;   /* Blue 900  */
    --md-primary-light:      #1e88e5;   /* Blue 600  */
    --md-on-primary:         #ffffff;
    --md-primary-container:  #e3f2fd;   /* Blue 50   */
    --md-on-primary-container:#0d47a1;

    --md-secondary:          #d32f2f;   /* Red 700   */
    --md-secondary-hover:    #b71c1c;   /* Red 900   */
    --md-on-secondary:       #ffffff;
    --md-secondary-container:#ffebee;   /* Red 50    */
    --md-on-secondary-container:#b71c1c;

    --md-error:              #d32f2f;
    --md-error-container:    #ffebee;
    --md-on-error-container: #b71c1c;

    --md-success:            #2e7d32;
    --md-success-container:  #e8f5e9;
    --md-on-success-container:#1b5e20;

    --md-warning:            #ef6c00;
    --md-warning-container:  #fff3e0;
    --md-on-warning-container:#e65100;

    --md-surface:            #ffffff;
    --md-surface-1:          #f8fafd;
    --md-surface-2:          #f1f5fb;
    --md-surface-variant:    #eef2f7;
    --md-background:         #f5f7fa;

    --md-on-surface:         #1a1c1e;
    --md-on-surface-variant: #43474e;
    --md-outline:            #73777f;
    --md-outline-variant:    #dde2e8;

    /* ---- Elevation (Material tonal shadows) ------------------------ */
    --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
    --md-elev-soft: 0 1px 2px rgba(21,101,192,.06), 0 2px 8px rgba(21,101,192,.06);

    /* ---- Shape ------------------------------------------------------ */
    --md-shape-xs:   4px;
    --md-shape-sm:   8px;
    --md-shape-md:  12px;
    --md-shape-lg:  16px;
    --md-shape-xl:  28px;
    --md-shape-full: 999px;

    --md-font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --md-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Legacy aliases so existing markup keeps working */
    --brand: var(--md-primary);
    --ink: var(--md-on-surface);
    --ink-3: var(--md-on-surface-variant);
    --line: var(--md-outline-variant);
    --surface: var(--md-surface);
    --bg: var(--md-background);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--md-font);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .00714em;
    color: var(--md-on-surface);
    background: var(--md-background);
    -webkit-font-smoothing: antialiased;
}

/* ---- Material type scale ------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 8px; color: var(--md-on-surface); }
h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 400; letter-spacing: 0; }
h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; letter-spacing: 0; }
h3 { font-size: 1rem;     line-height: 1.5rem;  font-weight: 500; letter-spacing: .00938em; }
h4 { font-size: .875rem;  line-height: 1.25rem; font-weight: 500; letter-spacing: .00714em; }
p  { margin: 0 0 16px; }

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .small { font-size: .75rem; line-height: 1rem; letter-spacing: .03333em; }
.muted   { color: var(--md-on-surface-variant); }
.muted-2 { color: var(--md-outline); }
.mono    { font-family: var(--md-mono); font-size: .9em; }
.nowrap  { white-space: nowrap; }
.right   { text-align: right; }
.center  { text-align: center; }
.strong  { font-weight: 500; }

/* ---- Layout --------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---- App bar (Material top app bar) --------------------------------- */
.topbar {
    background: var(--md-primary);
    color: var(--md-on-primary);
    position: sticky; top: 0; z-index: 40;
    box-shadow: var(--md-elev-2);
}
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 64px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--md-on-primary); }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 36px; height: 36px; border-radius: var(--md-shape-sm);
    background: var(--md-secondary); color: #fff;
    display: grid; place-items: center;
    font-size: 1rem; font-weight: 500;
}
.brand-name { font-size: 1.125rem; font-weight: 500; letter-spacing: .0125em; line-height: 1.2; }
.brand-name span { display: block; font-size: .688rem; font-weight: 400; opacity: .82; letter-spacing: .05em; text-transform: uppercase; }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
    position: relative;
    padding: 8px 16px; border-radius: var(--md-shape-full);
    color: rgba(255,255,255,.88); font-size: .875rem; font-weight: 500;
    letter-spacing: .00714em; transition: background .15s ease;
}
.nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(255,255,255,.20); color: #fff; }

main { padding: 24px 0 64px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--md-on-surface-variant); font-size: .875rem; margin-top: 4px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Grid ----------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 340px; }

@media (max-width: 1000px) {
    .grid-3, .grid-4, .grid-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
    .wrap, .wrap-narrow { padding: 0 16px; }
    .nav { display: none; }
    .nav.open {
        display: flex; position: absolute; top: 64px; left: 0; right: 0;
        background: var(--md-primary); flex-direction: column; align-items: stretch;
        padding: 8px 16px 16px; box-shadow: var(--md-elev-3); gap: 2px;
    }
    .nav.open a { border-radius: var(--md-shape-sm); }
    .topbar-inner { height: 56px; }
}

/* ---- Card (Material elevated / filled card) -------------------------- */
.card {
    background: var(--md-surface);
    border-radius: var(--md-shape-md);
    box-shadow: var(--md-elev-soft);
    border: 1px solid var(--md-outline-variant);
    overflow: hidden;
}
.card-pad { padding: 24px; }
.card-head {
    padding: 16px 24px; border-bottom: 1px solid var(--md-outline-variant);
    display: flex; align-items: center; gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.card-head .actions { margin-left: auto; }
.card-body { padding: 24px; }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--md-outline-variant); background: var(--md-surface-1); }

/* ---- Stat tiles ------------------------------------------------------ */
.stat {
    background: var(--md-surface);
    border-radius: var(--md-shape-md);
    border: 1px solid var(--md-outline-variant);
    box-shadow: var(--md-elev-soft);
    padding: 20px;
}
.stat-label {
    font-size: .688rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--md-on-surface-variant); font-weight: 500;
}
.stat-value { font-size: 1.75rem; font-weight: 400; letter-spacing: 0; margin-top: 8px; color: var(--md-on-surface); }
.stat-value.sm { font-size: 1.25rem; }
.stat-note { font-size: .75rem; color: var(--md-on-surface-variant); margin-top: 6px; }
.stat-accent { border-top: 4px solid var(--md-primary); }
.stat-accent-red { border-top: 4px solid var(--md-secondary); }

/* ---- Chips (Material assist / filter chip) --------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px; border-radius: var(--md-shape-sm);
    font-size: .75rem; font-weight: 500; letter-spacing: .03em;
    background: var(--md-surface-variant); color: var(--md-on-surface-variant);
    border: none; white-space: nowrap;
}
.badge--success { background: var(--md-success-container); color: var(--md-on-success-container); }
.badge--warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.badge--danger  { background: var(--md-error-container);   color: var(--md-on-error-container); }
.badge--info    { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.badge--muted   { background: var(--md-surface-variant);   color: var(--md-on-surface-variant); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--md-success); }
.dot--warn { background: var(--md-warning); }
.dot--critical { background: var(--md-error); }

/* ---- Buttons (Material filled / tonal / outlined / text) ------------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 24px;
    border: none; border-radius: var(--md-shape-full);
    background: var(--md-primary); color: var(--md-on-primary);
    font: inherit; font-size: .875rem; font-weight: 500; letter-spacing: .00714em;
    cursor: pointer; text-decoration: none;
    box-shadow: var(--md-elev-1);
    transition: box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: var(--md-primary-hover); box-shadow: var(--md-elev-2); text-decoration: none; color: #fff; }
.btn:active { box-shadow: var(--md-elev-1); }
.btn:focus-visible { outline: 3px solid var(--md-primary-light); outline-offset: 2px; }
.btn[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; }

/* Ripple */
.btn .ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(255,255,255,.45); pointer-events: none;
    animation: md-ripple .5s linear;
}
.btn--ghost .ripple, .btn--link .ripple { background: rgba(21,101,192,.22); }
@keyframes md-ripple { to { transform: scale(3.2); opacity: 0; } }

.btn--secondary { background: var(--md-secondary); }
.btn--secondary:hover { background: var(--md-secondary-hover); }

/* Tonal */
.btn--tonal {
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    box-shadow: none;
}
.btn--tonal:hover { background: #d3e7fb; color: var(--md-on-primary-container); box-shadow: var(--md-elev-1); }

/* Outlined */
.btn--ghost {
    background: transparent; color: var(--md-primary);
    border: 1px solid var(--md-outline-variant); box-shadow: none;
}
.btn--ghost:hover { background: rgba(21,101,192,.08); color: var(--md-primary-hover); box-shadow: none; border-color: var(--md-primary); }

.btn--danger { background: var(--md-error); }
.btn--danger:hover { background: var(--md-secondary-hover); }

.btn--sm { height: 32px; padding: 0 16px; font-size: .8125rem; }
.btn--lg { height: 48px; padding: 0 32px; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn--link {
    background: none; color: var(--md-primary); box-shadow: none;
    height: auto; padding: 4px 8px; border-radius: var(--md-shape-xs);
}
.btn--link:hover { background: rgba(21,101,192,.08); color: var(--md-primary-hover); text-decoration: underline; box-shadow: none; }

/* ---- Text fields (Material outlined) --------------------------------- */
.field { margin-bottom: 20px; }
.field label {
    display: block; font-size: .875rem; font-weight: 500;
    color: var(--md-on-surface-variant); margin-bottom: 6px;
}
.field .hint { font-size: .75rem; color: var(--md-on-surface-variant); margin-top: 6px; letter-spacing: .03333em; }
.field .error { font-size: .75rem; color: var(--md-error); margin-top: 6px; font-weight: 500; }
.required { color: var(--md-error); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=search], select, textarea {
    width: 100%; height: 48px; padding: 0 16px;
    border: 1px solid var(--md-outline); border-radius: var(--md-shape-xs);
    font: inherit; font-size: .9375rem; color: var(--md-on-surface);
    background: var(--md-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { height: auto; min-height: 112px; padding: 14px 16px; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--md-on-surface); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: inset 0 0 0 1px var(--md-primary);
}
input[aria-invalid=true], select[aria-invalid=true] {
    border-color: var(--md-error); box-shadow: inset 0 0 0 1px var(--md-error);
}
input::placeholder, textarea::placeholder { color: var(--md-outline); }

select {
    appearance: none; cursor: pointer; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2343474e' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--md-on-surface-variant); }
.checkbox input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--md-primary); cursor: pointer; }

.field-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.input-prefix { position: relative; }
.input-prefix span {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--md-on-surface-variant); font-size: .9375rem; pointer-events: none;
}
.input-prefix input { padding-left: 34px; }

.otp-input {
    font-family: var(--md-mono); font-size: 1.75rem; letter-spacing: .6em;
    text-align: center; text-indent: .6em; height: 64px;
}

/* ---- Banners (Material banner) --------------------------------------- */
.alert {
    padding: 16px; border-radius: var(--md-shape-md);
    margin-bottom: 16px; font-size: .875rem;
    display: flex; gap: 12px; align-items: flex-start;
    border-left: 4px solid transparent;
}
.alert--success { background: var(--md-success-container); color: var(--md-on-success-container); border-left-color: var(--md-success); }
.alert--error   { background: var(--md-error-container);   color: var(--md-on-error-container);   border-left-color: var(--md-error); }
.alert--info    { background: var(--md-primary-container); color: var(--md-on-primary-container); border-left-color: var(--md-primary); }
.alert--warning { background: var(--md-warning-container); color: var(--md-on-warning-container); border-left-color: var(--md-warning); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* ---- Data table ------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th {
    text-align: left; padding: 12px 16px; height: 56px;
    font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--md-on-surface-variant); font-weight: 500;
    border-bottom: 1px solid var(--md-outline-variant); white-space: nowrap;
    background: var(--md-surface-1);
}
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .12s ease; }
table.data tbody tr:hover { background: rgba(21,101,192,.04); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty { padding: 48px 24px; text-align: center; color: var(--md-on-surface-variant); }
.empty h3 { color: var(--md-on-surface); margin-bottom: 4px; }

/* ---- Progress (Material linear progress) ----------------------------- */
.progress { height: 4px; background: var(--md-primary-container); border-radius: var(--md-shape-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--md-primary); border-radius: var(--md-shape-full); transition: width .3s ease; }

.steps { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.step { flex: 1; min-width: 60px; }
.step-bar { height: 4px; border-radius: var(--md-shape-full); background: var(--md-outline-variant); }
.step.done .step-bar { background: var(--md-primary); }
.step.current .step-bar { background: var(--md-secondary); }
.step-label { font-size: .688rem; color: var(--md-on-surface-variant); margin-top: 8px; letter-spacing: .03em; }

/* ---- Checklist ------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: .875rem;
}
.checklist li:last-child { border-bottom: none; }
.check {
    width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
    display: grid; place-items: center; font-size: .7rem; font-weight: 700;
    border: 2px solid var(--md-outline-variant); color: transparent;
}
.checklist li.done .check { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
.checklist li.done span.label { color: var(--md-on-surface-variant); }

/* ---- Product cards --------------------------------------------------- */
.product-card { display: flex; flex-direction: column; height: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { box-shadow: var(--md-elev-3); }
.product-icon {
    width: 48px; height: 48px; border-radius: var(--md-shape-md); display: grid; place-items: center;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    font-weight: 500; font-size: 1.25rem; margin-bottom: 16px;
}
.product-amount { font-size: 1.5rem; font-weight: 400; letter-spacing: 0; color: var(--md-on-surface); }
.product-meta { font-size: .8125rem; color: var(--md-on-surface-variant); }
.product-card .btn { margin-top: auto; }

/* ---- Timeline / list ------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
.timeline li:last-child { border-bottom: none; }
.timeline .tl-main { flex: 1; min-width: 0; }
.timeline .tl-title { font-size: .875rem; font-weight: 500; }
.timeline .tl-meta { font-size: .75rem; color: var(--md-on-surface-variant); margin-top: 2px; }
.timeline .tl-amount { font-variant-numeric: tabular-nums; font-weight: 500; font-size: .875rem; white-space: nowrap; }
.tl-amount.credit { color: var(--md-success); }
.tl-amount.debit  { color: var(--md-on-surface); }

/* ---- Tabs (Material primary tabs) ------------------------------------ */
.tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tabs a {
    padding: 14px 20px; font-size: .875rem; font-weight: 500; color: var(--md-on-surface-variant);
    border-bottom: 3px solid transparent; white-space: nowrap; letter-spacing: .00714em;
    transition: color .15s ease, background .15s ease;
}
.tabs a:hover { color: var(--md-primary); background: rgba(21,101,192,.06); text-decoration: none; }
.tabs a.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

/* ---- Definition list ------------------------------------------------- */
.dl { display: grid; grid-template-columns: minmax(130px, 36%) 1fr; gap: 0 16px; font-size: .875rem; }
.dl dt { color: var(--md-on-surface-variant); padding: 10px 0; border-bottom: 1px solid var(--md-outline-variant); }
.dl dd { margin: 0; padding: 10px 0; font-weight: 400; border-bottom: 1px solid var(--md-outline-variant); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: none; }

/* ---- Pagination ------------------------------------------------------ */
.pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border-radius: var(--md-shape-full); font-size: .875rem; font-weight: 500;
    color: var(--md-on-surface-variant); background: transparent;
}
.pagination a:hover { background: rgba(21,101,192,.08); color: var(--md-primary); text-decoration: none; }
.pagination .current { background: var(--md-primary); color: #fff; }
.pagination .disabled { opacity: .38; pointer-events: none; }

/* ---- Back office ----------------------------------------------------- */
body.admin { background: var(--md-surface-2); }
.admin-bar { background: var(--md-on-surface); }
.admin-bar .brand-mark { background: var(--md-secondary); }
.admin-bar .nav a { color: rgba(255,255,255,.80); }
.admin-bar .nav a:hover { background: rgba(255,255,255,.12); }
.admin-bar .nav a.active { background: rgba(255,255,255,.20); }
@media (max-width: 640px) { .admin-bar .nav.open { background: var(--md-on-surface); } }

.env-flag {
    font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
    padding: 4px 8px; border-radius: var(--md-shape-xs); background: var(--md-secondary); color: #fff;
}

/* ---- Misc ------------------------------------------------------------ */
.divider { height: 1px; background: var(--md-outline-variant); margin: 24px 0; border: none; }
.stack > * + * { margin-top: 16px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.footer { border-top: 1px solid var(--md-outline-variant); background: var(--md-surface); padding: 32px 0; margin-top: 64px; }
.footer .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .8125rem; color: var(--md-on-surface-variant); }
.footer a { color: var(--md-on-surface-variant); }
.footer a:hover { color: var(--md-primary); }
.footer .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }

.regulatory {
    font-size: .75rem; color: var(--md-on-surface-variant); line-height: 1.7;
    background: var(--md-surface-1); border-radius: var(--md-shape-md);
    border-left: 4px solid var(--md-secondary);
    padding: 16px; margin-top: 16px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 16px; top: 16px; z-index: 100; background: #fff; padding: 12px 20px;
    border-radius: var(--md-shape-sm); box-shadow: var(--md-elev-3); color: var(--md-primary);
}

.menu-toggle {
    display: none; margin-left: auto; background: transparent; border: none;
    color: #fff; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 1.25rem; transition: background .15s ease;
}
.menu-toggle:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) { .menu-toggle { display: block; } }

/* ---- Hero ------------------------------------------------------------ */
.hero { padding: 64px 0 48px; }
.hero h1 { font-size: 2.75rem; line-height: 1.15; max-width: 16ch; font-weight: 400; letter-spacing: -.015em; }
.hero h1 .accent { color: var(--md-secondary); }
.hero p.lead { font-size: 1.125rem; line-height: 1.6; color: var(--md-on-surface-variant); max-width: 52ch; }
@media (max-width: 640px) {
    .hero { padding: 32px 0 24px; }
    .hero h1 { font-size: 1.875rem; }
    .hero p.lead { font-size: 1rem; }
}

/* ---- FAB (Material floating action button) --------------------------- */
.fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 30;
    width: 56px; height: 56px; border-radius: var(--md-shape-lg);
    background: var(--md-secondary); color: #fff; border: none;
    display: grid; place-items: center; font-size: 1.5rem; cursor: pointer;
    box-shadow: var(--md-elev-3);
}
.fab:hover { background: var(--md-secondary-hover); text-decoration: none; color: #fff; }

@media print {
    .topbar, .footer, .btn, .nav, .tabs, .fab { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}