/* Maxxwave Encoder - site styles
   Family-matched to DabMan: same typography, Bootstrap base, same nav and footer shapes.
   Differentiated by weight and palette: Maxxwave blue structure, Maxxwave red accent,
   darker sections than DabMan's utility look. */

:root {
    --mw-blue: #0080ff;          /* logo blue */
    --mw-blue-deep: #0a4e9b;
    --mw-blue-dark: #082f5e;
    --mw-red: #e01010;           /* logo red, very slightly deepened for text use */
    --mw-red-dark: #b00b0b;
    --mw-ink: #10151c;
    --mw-ink-soft: #2a3340;
    --mw-body: #3d4753;
    --mw-muted: #6d7785;
    --mw-line: #e2e6ec;
    --mw-tint: #f5f8fc;
    --mw-dark-bg: #0d1b2a;
    --mw-dark-bg-2: #102538;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mw-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 { font-family: 'IBM Plex Sans', sans-serif; color: var(--mw-ink); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 2.6rem; line-height: 1.18; font-weight: 700; }
h2 { font-size: 1.95rem; line-height: 1.25; margin-bottom: 1.1rem; }
h3 { font-size: 1.35rem; margin-bottom: .7rem; }
h4 { font-size: 1.1rem; margin-bottom: .5rem; }
p  { margin-bottom: 1.1rem; }
a  { color: var(--mw-blue-deep); text-decoration: none; }
a:hover { color: var(--mw-red); text-decoration: underline; }
code, .mono { font-family: 'JetBrains Mono', monospace; font-size: .92em; }

/* ---------- navigation ---------- */
.navbar { border-bottom: 1px solid var(--mw-line); padding: .6rem 0; }
.brand-name { font-weight: 700; font-size: 1.28rem; color: var(--mw-ink); line-height: 1.1; letter-spacing: -.02em; }
.brand-tagline { font-size: .74rem; color: var(--mw-muted); letter-spacing: .06em; text-transform: uppercase; }
.navbar .nav-link { font-weight: 500; color: var(--mw-ink-soft); padding: .5rem .85rem !important; }
.navbar .nav-link:hover { color: var(--mw-blue-deep); }
.navbar .nav-link.active { color: var(--mw-blue-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--mw-red); }
.btn-login { background: var(--mw-blue-deep); border-color: var(--mw-blue-deep); font-weight: 500; }
.btn-login:hover { background: var(--mw-blue-dark); border-color: var(--mw-blue-dark); }

/* ---------- buttons ---------- */
.btn { font-weight: 500; border-radius: .35rem; padding: .62rem 1.35rem; }
.btn-primary { background: var(--mw-blue-deep); border-color: var(--mw-blue-deep); }
.btn-primary:hover, .btn-primary:focus { background: var(--mw-blue-dark); border-color: var(--mw-blue-dark); }
.btn-accent { background: var(--mw-red); border-color: var(--mw-red); color: #fff; }
.btn-accent:hover { background: var(--mw-red-dark); border-color: var(--mw-red-dark); color: #fff; }
.btn-outline-light-mw { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn-outline-light-mw:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- hero ---------- */
.hero {
    background: linear-gradient(160deg, var(--mw-dark-bg) 0%, var(--mw-dark-bg-2) 55%, #143451 100%);
    color: #fff; padding: 5rem 0 4.5rem;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero .hero-sub { font-size: 1.25rem; color: #c6d4e3; max-width: 52ch; margin-top: 1.4rem; }
.hero-rule { width: 64px; height: 4px; background: var(--mw-red); border: 0; opacity: 1; margin: 0 0 1.9rem; }
.page-head { background: var(--mw-tint); border-bottom: 1px solid var(--mw-line); padding: 3rem 0 2.6rem; }
.page-head h1 { font-size: 2.2rem; }
.page-head p { color: var(--mw-muted); font-size: 1.15rem; margin: .6rem 0 0; max-width: 62ch; }

/* ---------- sections ---------- */
section { padding: 3.6rem 0; }
section.tint { background: var(--mw-tint); }
section.dark { background: var(--mw-dark-bg); color: #c6d4e3; }
section.dark h2, section.dark h3, section.dark h4 { color: #fff; }
section.dark a { color: #7fc0ff; }
.lead-narrow { max-width: 68ch; }
.section-rule { border: 0; border-top: 1px solid var(--mw-line); margin: 0; }

/* ---------- benefit strip ---------- */
.benefit { border-left: 3px solid var(--mw-red); padding-left: 1.15rem; height: 100%; }
.benefit h3 { font-size: 1.16rem; color: var(--mw-ink); margin-bottom: .45rem; }
.benefit p { color: var(--mw-body); margin: 0; font-size: 1rem; }

/* ---------- cards / panels ---------- */
.panel { background: #fff; border: 1px solid var(--mw-line); border-radius: .5rem; padding: 1.6rem; }
.panel-fill { height: 100%; }   /* only for equal-height card grids, never for stacked panels */
.panel h3 { font-size: 1.12rem; }
.panel { overflow-wrap: anywhere; }
.panel p:last-child { margin-bottom: 0; }
.panel-accent { border-top: 3px solid var(--mw-blue); }
.check-item { border-left: 3px solid var(--mw-blue); padding-left: 1.15rem; margin-bottom: 1.6rem; }
.check-item:last-child { margin-bottom: 0; }
.step { display: flex; gap: 1.1rem; margin-bottom: 1.5rem; }
.step-n { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mw-blue-deep); color: #fff;
         display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .98rem; }
.step p:last-child { margin-bottom: 0; }
.step > div:last-child { min-width: 0; }
.panel .step { margin-bottom: 1.1rem; }
.panel .step:last-of-type { margin-bottom: 1rem; }

/* ---------- diagrams and figures ---------- */
figure.diagram { margin: 2rem 0; }
figure.diagram img, figure.diagram object { width: 100%; height: auto; display: block; }
figure.diagram figcaption { font-size: .92rem; color: var(--mw-muted); margin-top: .7rem; }
.figure-wide img { width: 100%; height: auto; border: 1px solid var(--mw-line); border-radius: .35rem; }
.file-pill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--mw-line);
             border-radius: .35rem; padding: .55rem 1rem; margin: .3rem .5rem .3rem 0; background: #fff;
             font-size: .95rem; color: var(--mw-ink-soft); }
.file-pill span.mono { color: var(--mw-muted); }

/* ---------- tables ---------- */
.table-mw { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1rem; }
.table-mw th, .table-mw td { border: 1px solid var(--mw-line); padding: .72rem .9rem; text-align: left; font-size: 1rem; }
.table-mw thead th { background: var(--mw-tint); font-weight: 600; color: var(--mw-ink); }
.table-mw tbody th { background: var(--mw-tint); font-weight: 600; color: var(--mw-ink); }
.rate-list dt { font-weight: 600; color: var(--mw-ink); margin-top: 1rem; }
.rate-list dd { margin: .15rem 0 0; color: var(--mw-body); }

/* ---------- pricing ---------- */
.price-figure { font-size: 3rem; font-weight: 700; color: var(--mw-ink); line-height: 1; letter-spacing: -.03em; }
.price-figure small { font-size: 1rem; font-weight: 400; color: var(--mw-muted); display: block; margin-top: .5rem; letter-spacing: 0; }
.includes li { margin-bottom: .55rem; }

/* ---------- forms ---------- */
.form-label { font-weight: 500; color: var(--mw-ink-soft); }
.form-control, .form-select { border-color: var(--mw-line); padding: .6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--mw-blue); box-shadow: 0 0 0 .2rem rgba(0,128,255,.12); }

/* ---------- on-page sub navigation ---------- */
.subnav { background: #fff; border-bottom: 1px solid var(--mw-line); position: sticky; top: 64px; z-index: 900; }
.subnav .nav-link { font-size: .93rem; padding: .7rem .8rem; color: var(--mw-muted); font-weight: 500; }
.subnav .nav-link:hover { color: var(--mw-blue-deep); }

/* ---------- footer ---------- */
.footer { background: var(--mw-dark-bg); color: #9fb0c2; padding: 3.2rem 0 1.6rem; margin-top: 0; }
.footer-heading { color: #fff; font-size: 1rem; margin-bottom: .9rem; font-weight: 600; }
.footer a, .footer .footer-links a { color: #9fb0c2; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer-links li { margin-bottom: .45rem; font-size: .95rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.4rem; padding-top: 1.3rem; }
.footer .text-muted { color: #8395a8 !important; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    h1 { font-size: 2.05rem; }
    h2 { font-size: 1.62rem; }
    .hero { padding: 3.4rem 0 3rem; }
    .hero .hero-sub { font-size: 1.1rem; }
    section { padding: 2.6rem 0; }
    .subnav { position: static; }
}
@media (max-width: 575.98px) {
    body { font-size: 1rem; }
    h1 { font-size: 1.8rem; }
    .price-figure { font-size: 2.3rem; }
}