@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

/*
  Sticky-trap yellow (mockup C, Nov 2026).
  One loud colour taken from the thing every gnat owner has seen, black ink,
  3px rules, condensed uppercase headings. No gradients, shadows or rounded pills.
*/
:root {
    --y: #f2dc1b;
    --y-pale: #fdf6c4;
    --k: #111;
    --ink-2: #2b2b2b;
    --muted: #5e5e5e;
    --line: #111;
    --rule: #d6d6d6;
    --white: #fff;
    --warn: #c8261b;
    --warn-pale: #fbe6e3;
    --font: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --measure: 740px;
    --wide: 1180px;

    /* Old names still referenced from page markup and inline diagrams */
    --serif: var(--font);
    --mono: var(--font);
    --paper: var(--white);
    --paper-2: var(--y-pale);
    --card: var(--white);
    --ink: var(--k);
    --rule-dark: var(--k);
    --leaf: var(--k);
    --leaf-dark: var(--k);
    --leaf-pale: var(--y-pale);
    --soil: #6b4a2b;
    --soil-pale: #efe4cf;
    --rust: var(--warn);
    --rust-pale: var(--warn-pale);
    --emerald: var(--k);
    --emerald-dark: var(--k);
    --emerald-light: var(--y-pale);
    --lime: var(--k);
    --amber: #a9780d;
    --red: var(--warn);
    --red-warn: var(--warn);
    --slate-900: var(--k);
    --slate-800: var(--k);
    --slate-700: var(--ink-2);
    --slate-500: var(--muted);
    --slate-300: var(--rule);
    --slate-100: var(--y-pale);
    --green-dark: var(--k);
    --green-mid: var(--k);
    --green-light: var(--k);
    --green-pale: var(--y-pale);
    --text: var(--k);
    --text-light: var(--muted);
    --bg: var(--white);
    --yellow-trap: var(--y);
    --brown: var(--soil);
    --brown-light: var(--amber);
    --cream: var(--y-pale);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 1001;
    padding: 8px 16px;
    background: var(--k);
    color: var(--y);
    text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--y); }

body {
    font-family: var(--font);
    font-stretch: 100%;
    color: var(--k);
    background: var(--white);
    line-height: 1.58;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font); line-height: 1.15; color: var(--k); font-weight: 700; }

/* Condensed uppercase display type */
h1, h2.section-title, .nav-logo, .toc h3, .step-list li::before, .cond,
.comparison-table th, footer h3, .sources h2, .stamp {
    font-stretch: 68%;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    word-spacing: 0.12em;
    line-height: 0.95;
}

a {
    color: var(--k);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a:hover { background: var(--y); color: var(--k); }

/* Navigation */
nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--white);
    border-bottom: 3px solid var(--line);
    z-index: 1000;
}

.nav-inner {
    max-width: var(--wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 24px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 30px;
    color: var(--k);
    text-decoration: none;
    white-space: nowrap;
}
.nav-logo:hover { background: none; }
/* A tiny sticky trap with three gnats on it */
.nav-logo::before {
    content: '';
    flex: none;
    width: 26px;
    height: 26px;
    border: 3px solid var(--k);
    background:
        radial-gradient(circle, var(--k) 0 2.2px, transparent 2.6px) 5px 4px / 8px 8px no-repeat,
        radial-gradient(circle, var(--k) 0 1.8px, transparent 2.2px) 11px 11px / 8px 8px no-repeat,
        radial-gradient(circle, var(--k) 0 1.6px, transparent 2px) 2px 12px / 8px 8px no-repeat,
        var(--y);
}

.nav-links {
    display: flex;
    gap: 4px 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.nav-links a {
    color: var(--k);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 2px;
}
.nav-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-links a.active { background: var(--y); }

.mobile-toggle {
    display: none;
    background: var(--y);
    border: 3px solid var(--k);
    color: var(--k);
    font: 700 18px/1 var(--font);
    padding: 6px 10px;
    cursor: pointer;
}

/* Homepage hero: yellow band, text left, live sticky trap right */
.hero {
    background: var(--y);
    border-bottom: 3px solid var(--line);
    position: relative;
    overflow: hidden;
}
.hero-in {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}
.hero-txt {
    padding: 56px 40px 52px 0;
    border-right: 3px solid var(--line);
    position: relative;
    z-index: 2;
}
.hero h1 { font-size: clamp(50px, 6.6vw, 90px); margin: 0 0 22px; max-width: 13ch; }
.hero .subtitle { font-size: 21px; font-weight: 500; max-width: 28em; margin: 0 0 28px; }
.hero .cta-row { display: flex; gap: 14px 24px; align-items: center; flex-wrap: wrap; }

.hero-trap {
    position: relative;
    background: var(--white);
    min-height: 420px;
    margin-right: calc(-24px - max(0px, (100vw - var(--wide)) / 2));
}
.hero-trap svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gnat-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}
.trap-count {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 4;
    max-width: 13.5em;
    background: var(--white);
    border: 3px solid var(--k);
    padding: 8px 12px 7px;
    transform: rotate(-2deg);
    min-width: 9.5em;
}
.trap-count .stamp { font-size: 26px; display: block; }
.trap-count small { display: block; font-size: 14px; font-weight: 600; margin-top: 4px; }
.trap-count .replay {
    display: none;
    margin-top: 6px;
    font: 600 14px var(--font);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
    color: var(--k);
}
.trap-count.done .replay { display: inline; }

.cta-btn {
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}
.cta-primary { background: var(--k); color: var(--y); padding: 14px 22px; }
.cta-primary:hover { background: #333; color: var(--y); }
.cta-secondary { color: var(--k); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-secondary:hover { background: var(--white); }

/* Subpage header: a full-bleed yellow band without extra markup.
   The black shadow is the 3px rule underneath; neither widens the page. */
.page-header {
    max-width: var(--measure);
    margin: 0 auto 3px;
    padding: 48px 24px 34px;
    background: var(--y);
    border-image: conic-gradient(var(--y) 0 0) fill 0 / / 0 100vmax;
    box-shadow: 0 3px 0 100vmax var(--k);
    clip-path: inset(0 -100vmax -3px);
    position: relative;
}
.page-header h1 { font-size: clamp(44px, 7vw, 80px); margin-bottom: 14px; }
.page-header .subtitle { font-size: 20px; font-weight: 500; margin: 0; }

.breadcrumbs {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 18px 24px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs span { margin: 0 6px; }

/* Sections */
.section { max-width: var(--measure); margin: 0 auto; padding: 44px 24px; }
.section-wide { max-width: 1060px; margin: 0 auto; padding: 44px 24px; }

.section-alt { background: var(--y-pale); border-top: 3px solid var(--line); border-bottom: 3px solid var(--line); }
.section-dark { background: transparent; }
.section-warn { background: var(--warn-pale); }

.section-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 8px;
}

h2.section-title { font-size: clamp(38px, 5.4vw, 58px); margin: 0 0 18px; }
.section > h2.section-title:not(:first-child) { margin-top: 52px; }

.section-subtitle { font-size: 19px; font-weight: 500; color: var(--ink-2); margin-bottom: 26px; }

h3 { font-size: 22px; font-stretch: 90%; }
h4 { font-size: 18px; }

/* Content */
p { margin-bottom: 16px; }
.lead { font-size: 21px; font-weight: 500; line-height: 1.5; }
ul, ol { margin: 0 0 22px 1.3em; }
li { margin-bottom: 8px; padding-left: 4px; }
li::marker { color: var(--k); font-weight: 700; }
strong { font-weight: 700; }

blockquote {
    border-left: 8px solid var(--y);
    padding: 4px 0 4px 22px;
    margin: 30px 0;
    font-size: 21px;
    font-weight: 500;
}
blockquote p:last-child { margin-bottom: 0; }
.section-dark blockquote { font-size: 24px; line-height: 1.4; margin: 0; }

/* Boxes */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 24px 0 30px; }
.section-wide .card-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; }

.card {
    background: var(--white);
    border: 3px solid var(--line);
    padding: 22px 24px;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 17px; }
.card p:last-child { margin-bottom: 0; }
.card ul { font-size: 17px; margin-bottom: 0; }

.card-highlight { background: var(--y-pale); }
.section-alt .card-highlight { background: var(--white); }
#short-version .card-success, .card-highlight.loud { background: var(--y); }
.card .photo-figure { margin: 16px 0 0; max-width: 520px; }
.card .photo-figure img { max-height: 320px; object-fit: cover; }
.card .photo-caption { font-size: 14px; }
.card .photo-attribution { font-size: 12px; }

/* Warning: hazard stripe across the top */
.card-warning {
    background: var(--white);
    border-top: 0;
    padding-top: 36px;
    background-image: repeating-linear-gradient(-45deg, var(--k) 0 10px, var(--y) 10px 20px);
    background-size: 100% 14px;
    background-repeat: no-repeat;
    border-top: 3px solid var(--line);
}
.card-warning h3 { color: var(--k); }
.card-success { background: var(--y-pale); }

/* Product card */
.product-card { background: var(--white); border: 3px solid var(--line); padding: 28px; margin: 30px 0; }
.product-card h3 { font-size: 30px; font-stretch: 68%; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.product-card .product-tag {
    display: inline-block;
    background: var(--k);
    color: var(--y);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    margin-bottom: 14px;
}
.product-card .price-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.product-card .price-option { padding: 12px 18px; border: 3px solid var(--line); }
.product-card .price-option .size { font-size: 15px; color: var(--muted); font-weight: 600; }
.product-card .price-option .price { font-size: 30px; font-stretch: 68%; font-weight: 800; }
.product-card .price-option .per-oz { font-size: 13px; color: var(--muted); }
.product-card .price-option.recommended { background: var(--y); }
.product-card .price-option.recommended .badge { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }

/* Tables */
.comparison-table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 16px; }
.comparison-table th {
    text-align: left;
    font-size: 21px;
    padding: 10px 12px 8px 0;
    border-bottom: 3px solid var(--line);
    vertical-align: bottom;
}
.comparison-table td { padding: 10px 12px 10px 0; border-bottom: 2px solid var(--rule); vertical-align: top; }

.rating-high, .rating-med, .rating-low { font-weight: 700; }
.rating-high { font-weight: 800; }
.rating-low { color: var(--warn); }

/* Step list */
.step-list { counter-reset: step; list-style: none; margin: 0 0 24px; padding: 0; }
.step-list li {
    counter-increment: step;
    position: relative;
    padding: 18px 0 18px 66px;
    margin: 0;
    border-top: 3px solid var(--line);
}
.step-list li:last-child { border-bottom: 3px solid var(--line); }
.step-list li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 16px;
    font-size: 46px;
}
.step-list li h4 { margin-bottom: 6px; font-size: 19px; }

/* What-doesn't-work rows */
.myth-box { padding: 20px 0; border-top: 3px solid var(--line); }
.myth-box:last-of-type { border-bottom: 3px solid var(--line); }
.myth-box h3 { margin-bottom: 8px; }
.myth-box p { margin-bottom: 0; }
.myth-label { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; margin-bottom: 6px; border: 2px solid var(--k); }
.myth-label-myth { color: var(--k); }
.myth-label-reality { background: var(--y); }

/* FAQ */
details { border-top: 3px solid var(--line); }
details:last-of-type { border-bottom: 3px solid var(--line); }
summary {
    padding: 16px 0 16px 46px;
    cursor: pointer;
    font-weight: 700;
    font-size: 19px;
    list-style: none;
    position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 13px;
    width: 30px;
    height: 30px;
    border: 3px solid var(--k);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
}
details[open] summary::before { content: '\2212'; background: var(--y); }
summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
details .faq-content { padding: 0 0 18px 46px; font-size: 17px; }

/* Homepage contents: bordered tiles */
.toc { margin: 0; }
.toc h3 { margin-bottom: 16px; font-size: 38px; }
.toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    border-left: 3px solid var(--line);
    border-top: 3px solid var(--line);
}
.toc li {
    counter-increment: toc;
    margin: 0;
    padding: 0;
    border-right: 3px solid var(--line);
    border-bottom: 3px solid var(--line);
    position: relative;
}
.toc li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 16px;
    top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    pointer-events: none;
}
.toc a {
    display: block;
    min-height: 104px;
    padding: 38px 16px 16px;
    font-size: 26px;
    font-stretch: 68%;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    color: var(--k);
}
.toc a:hover { background: var(--y); }

/* Previous / next */
.page-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 52px;
    padding-top: 18px;
    border-top: 3px solid var(--line);
    flex-wrap: wrap;
    font-weight: 700;
}
.page-nav .next { margin-left: auto; }

/* Sources */
.sources {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 30px 24px 44px;
    font-size: 15px;
}
.section .sources, .section-wide .sources { padding: 30px 0 0; }
.sources h2 { font-size: 30px; margin-bottom: 12px; padding-top: 14px; border-top: 3px solid var(--line); }
.sources ol { margin-left: 1.4em; }
.sources li { margin-bottom: 5px; }
.sources a { text-decoration-thickness: 1px; word-break: break-word; }

/* Footer */
footer {
    background: var(--k);
    color: #cfcfcf;
    padding: 36px 24px 28px;
    border-top: 3px solid var(--line);
}
footer > * { max-width: calc(var(--wide) - 48px); margin-left: auto; margin-right: auto; }
footer h3 { color: var(--y); margin-bottom: 14px; font-size: 34px; }
footer p { font-size: 14px; margin-bottom: 10px; max-width: 640px; margin-left: 0; }
footer a { color: var(--white); }
footer a:hover { background: var(--y); color: var(--k); }
.footer-links { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.footer-links a { font-size: 15px; font-weight: 600; text-decoration: none; }
footer .footer-bottom { margin-top: 18px; padding-top: 14px; border-top: 1px solid #444; font-size: 13px; }

/* Diagrams */
.svg-diagram,
.svg-diagram-wide { width: 100%; max-width: 900px; height: auto; margin: 34px auto 0; display: block; }
.svg-diagram-caption,
.diagram figcaption { font-size: 15px; color: var(--muted); margin: 10px 0 34px; }

/* Inline diagrams that may run wider than the text column */
.diagram {
    margin: 34px 0 0;
    width: min(960px, calc(100vw - 32px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.diagram figcaption { max-width: var(--measure); margin-left: auto; margin-right: auto; padding: 0 24px; }
.diagram svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.diagram .mono { font-family: var(--font); }
.diagram .narrow { display: none; }
.diagram .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 680px) {
    .diagram .pair { grid-template-columns: 1fr; gap: 28px; }
    .diagram figcaption { padding: 0; }
}
/* below ~940px the wide drawings scale text under 15px, so swap earlier */
@media (max-width: 940px) {
    .diagram .wide { display: none; }
    .diagram .narrow { display: block; }
    .diagram .narrow { max-width: 520px; margin: 0 auto; }
}

/* Photos */
.photo-figure { margin: 30px 0; max-width: 700px; }
.photo-figure img { width: 100%; height: auto; display: block; border: 3px solid var(--line); }
.photo-caption { font-size: 15px; font-weight: 500; margin-top: 8px; line-height: 1.45; }
.photo-attribution { font-size: 12px; color: var(--muted); margin-top: 2px; }
.photo-attribution a { color: var(--muted); text-decoration-thickness: 1px; }
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 30px 0;
    align-items: start;
}
.photo-grid .photo-figure { margin: 0; }

/* Responsive */
@media (max-width: 960px) {
    .nav-links { display: none; }
    .mobile-toggle { display: block; }
    nav.open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 4px 24px 12px;
        border-bottom: 3px solid var(--line);
    }
    nav.open .nav-links a { padding: 10px 0; font-size: 17px; border-bottom: 2px solid var(--rule); }
}

@media (max-width: 820px) {
    .hero-in { grid-template-columns: 1fr; padding: 0; }
    .hero-txt { border-right: 0; padding: 34px 16px 30px; }
    .hero-trap { border-top: 3px solid var(--line); min-height: 0; margin-right: 0; display: flex; flex-direction: column; }
    .trap-count { order: -1; position: relative; top: auto; left: auto; align-self: flex-start; margin: 16px 16px 0; transform: none; max-width: none; }
    .hero-trap svg.scene { position: relative; inset: auto; height: 330px; }
}

@media (max-width: 640px) {
    body { font-size: 17px; }
    .nav-logo { font-size: 26px; }
    .section, .section-wide { padding: 34px 16px; }
    .page-header { padding: 32px 16px 26px; }
    .breadcrumbs { padding: 14px 16px 0; }
    .sources { padding: 26px 16px 36px; }
    .nav-inner { padding: 10px 16px; }
    .hero .subtitle { font-size: 19px; }
    .trap-count .stamp { font-size: 22px; }
    .comparison-table { font-size: 15px; display: block; overflow-x: auto; }
    .page-nav { flex-direction: column; }
    .page-nav .next { margin-left: 0; }
    .product-card { padding: 20px; }
    .product-card .price-row { flex-direction: column; }
    .card { padding: 18px; }
    .step-list li { padding-left: 54px; }
    .step-list li::before { font-size: 38px; }
}

/* ---------- 3-week planner (treatment-guide) ---------- */
.planner { border: 3px solid var(--line); background: var(--y); padding: 20px; margin-top: 20px; }
.pl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; margin-bottom: 18px; }
.pl-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.pl-form select, .pl-form input { font: inherit; font-size: 17px; text-transform: none; letter-spacing: 0; font-weight: 400; padding: 9px 10px; border: 2px solid var(--k); background: var(--white); color: var(--k); border-radius: 0; min-width: 0; width: 100%; }
.pl-pair { display: flex; gap: 8px; }
.pl-pair input { flex: 0 0 90px; width: 90px; }
.pl-card { background: var(--white); border: 3px solid var(--k); padding: 20px 22px; }
.pl-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.pl-card h3 { margin: 0 0 10px; }
.pl-dose { font-size: 20px; margin: 0 0 8px; }
.pl-dose span { font-weight: 800; font-size: 30px; background: var(--y); padding: 0 6px; }
.pl-how, .pl-yield { font-size: 16px; margin: 0 0 8px; }
.pl-yield { color: var(--muted); }
.pl-dates { list-style: none; padding: 0; margin: 14px 0 10px; border-top: 2px solid var(--k); }
.pl-dates li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.pl-dates small { font-size: 14px; color: var(--muted); }
.pl-box { flex: 0 0 18px; height: 18px; border: 2px solid var(--k); margin-top: 3px; }
.pl-foot { font-size: 13px; color: var(--muted); margin: 0; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 16px; }
.pl-actions button { border: 0; cursor: pointer; font-family: inherit; }
.pl-actions .cta-secondary { background: none; padding: 14px 0; }
.cost-note { font-size: 14px; color: var(--muted); }

@media print {
  body.printing-plan * { visibility: hidden; }
  body.printing-plan #pl-card, body.printing-plan #pl-card * { visibility: visible; }
  body.printing-plan #pl-card { position: absolute; left: 0; top: 0; width: 100%; border: 2px solid #000; }
  body.printing-plan .pl-dose span { background: none; border-bottom: 3px solid #000; }
}
#plan { scroll-margin-top: 90px; }
.pl-dose small { font-size: 17px; white-space: nowrap; }
.diagram-img { max-width: 100%; }
.diagram-img img { border: 0; }
.season-strip { display: block; background: var(--k); color: var(--y); text-align: center; padding: 10px 16px; font-size: 16px; text-decoration: none; }
.season-strip[hidden] { display: none; }
.season-strip:hover { color: #fff; }