/* ============================================================
SLP EXPRESS — CRITICAL CSS
Loads synchronously (render-blocking) — kept intentionally small.
Contains ONLY what is needed to paint above-the-fold content:
tokens · reset · buttons · header · hero · nav · stat-bar
Every page links:
but the page CSS only handled overflow,
so these rendered as unstyled plain text. Scoped via .table-responsive
to win over guides.css `.guide-article__body table`. */
.table-responsive .compare-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
font-size: 15px;
color: var(--text);
}
.table-responsive .compare-table thead th {
background: var(--grad-primary);
color: var(--white);
font-weight: 700;
text-align: left;
padding: 13px 16px;
font-size: 14px;
letter-spacing: 0.2px;
vertical-align: middle;
}
.table-responsive .compare-table tbody th,
.table-responsive .compare-table tbody td {
padding: 12px 16px;
border-top: 1px solid var(--hairline);
text-align: left;
vertical-align: top;
line-height: 1.45;
}
.table-responsive .compare-table tbody th,
.table-responsive .compare-table tbody td:first-child {
font-weight: 700;
color: var(--primary);
}
.table-responsive .compare-table tbody tr:nth-child(even) th,
.table-responsive .compare-table tbody tr:nth-child(even) td {
background: var(--light);
}
.table-responsive .compare-table tbody tr:hover th,
.table-responsive .compare-table tbody tr:hover td {
background: #f7f0fb;
}
@media (max-width: 768px) {
/* Guide-page inline CSS forces min-width:640px on compare-table — override.
Also catches .pricing-table (domestic.html) and bare blog-article tables. */
.table-responsive .compare-table,
.table-responsive > table,
.pricing-table > table,
.blog-article__body table {
min-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
table-layout: auto;
font-size: 13px;
}
.table-responsive .compare-table th,
.table-responsive .compare-table td,
.pricing-table > table th,
.pricing-table > table td,
.blog-article__body table th,
.blog-article__body table td {
padding: 8px 6px !important;
word-break: break-word;
overflow-wrap: anywhere;
}
}
/* ============================================================
FOLD TIGHTENING (v2) — applies to every page
Appended last so it wins on equal specificity. Each rule
names the symptom it fixes; verified at 1440x900 and 390x844.
============================================================ */
/* The wordmark wrapped to three lines and pushed the header past 120px,
shoving the hero — and every CTA in it — down the page. */
.brand-text h2 { font-size: 15px; line-height: 1.16; margin: 0; }
.brand-text .brand-sub {
/* "A Brand of Sri Lakshmi Prasanna Enterprises" wrapped to two lines inside
the 268px brand block, making the wordmark three lines tall again and
pushing the header back to 97px. */
font-size: 9.5px;
letter-spacing: 0;
white-space: nowrap;
opacity: .78;
}
.header { padding: 10px 0; }
/* Hero variants were sized for a full screen of centred text, so the fold
carried a headline and nothing to act on. Reclaim the dead space. */
.hero--city,
.hero--general,
.hero--medicine,
.hero--documents { padding-top: 30px; padding-bottom: 38px; min-height: 0; }
.hero-eyebrow {
font-size: 12.5px;
padding: 7px 15px;
line-height: 1.3;
}
@media (max-width: 900px) {
/* 390px cannot fit "INTERNATIONAL COURIERS" on one line at 15px; this keeps
the wordmark to the two lines its