* into a card, and use the data-label attribute that site.js copies from the
* column header onto each cell to show "What it is: value" inline.
* The first cell stays as the card title (no label needed). Every other cell
* shows its column header as a left-aligned label and its value right-aligned.
*/
.mt-compare-wrap,
.mt-compare,
.mt-price-table,
.mt-prose .mt-rate-table {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.mt-compare table,
.mt-price-table table,
.mt-prose .mt-rate-table table {
display: block;
width: 100%;
min-width: 0;
font-size: 14px;
}
.mt-compare thead,
.mt-price-table thead,
.mt-prose .mt-rate-table thead { display: none; }
.mt-compare tbody,
.mt-price-table tbody,
.mt-prose .mt-rate-table tbody { display: block; }
.mt-compare tr,
.mt-price-table tr,
.mt-prose .mt-rate-table tr {
display: block;
background: #fff;
border: 1px solid var(--mt-line);
border-radius: 12px;
margin-bottom: 10px;
padding: 0;
overflow: hidden;
}
.mt-compare td,
.mt-price-table td,
.mt-prose .mt-rate-table td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 11px 18px;
font-size: 14px;
border-bottom: 1px solid var(--mt-line-2);
text-align: left;
min-height: 0;
}
.mt-compare tr td:last-child,
.mt-price-table tr td:last-child,
.mt-prose .mt-rate-table tr td:last-child { border-bottom: 0; }
/* First cell = card title, full-width bold */
.mt-compare td:first-child,
.mt-price-table td:first-child,
.mt-prose .mt-rate-table td:first-child {
display: block;
padding: 14px 18px 12px;
font-weight: 700;
font-size: 15px;
color: var(--mt-ink);
background: var(--mt-bg-soft);
border-bottom: 1px solid var(--mt-line);
}
/* Inline column-header label on every non-first cell.
Falls back gracefully if data-label isn't set (e.g. JS disabled). */
.mt-compare td:not(:first-child)::before,
.mt-price-table td:not(:first-child)::before,
.mt-prose .mt-rate-table td:not(:first-child)::before {
content: attr(data-label);
color: var(--mt-ink-3);
font-weight: 600;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: .04em;
flex-shrink: 0;
}
/* The "MyTaxFile" comparison column gets a primary-colour label */
.mt-compare td:nth-child(2)::before { color: var(--mt-primary); font-weight: 700; }
/* Last cell of every multi-column row gets a primary-colour value emphasis */
.mt-compare tr td:last-child:not(:first-child),
.mt-price-table tr td:last-child:not(:first-child),
.mt-prose .mt-rate-table tr td:last-child:not(:first-child) {
font-weight: 700;
color: var(--mt-primary);
font-size: 15px;
}
.mt-compare tr td:last-child:not(:first-child)::before,
.mt-price-table tr td:last-child:not(:first-child)::before,
.mt-prose .mt-rate-table tr td:last-child:not(:first-child)::before {
color: var(--mt-primary);
font-weight: 700;
}
/* When a cell has no label (data-label missing) collapse the ::before so
we don't leave a blank gap. */
.mt-compare td:not(:first-child):not([data-label])::before,
.mt-price-table td:not(:first-child):not([data-label])::before,
.mt-prose .mt-rate-table td:not(:first-child):not([data-label])::before { display: none; }
.mt-prose h2 { font-size: 1.2rem; margin: 28px 0 10px; }
.mt-prose h3 { font-size: 1rem; margin: 22px 0 8px; }
.mt-prose, body.mytaxfile .mt-prose p { font-size: 15px; }
/* Calculator stack */
.mt-calc-card, .mt-calc-result { padding: 22px; }
.mt-calc-result .big-price { font-size: 2.4rem; }
}
/* Very small (≤380px) — pixel-tight final fallback */
@media (max-width: 380px) {
.mt-container { padding: 0 14px; }
.mt-hero h1 { font-size: 1.7rem; }
.mt-package .price { font-size: 1.85rem; }
.mt-hero-card { padding: 18px; }
.mt-prose, body.mytaxfile .mt-prose p { font-size: 14.5px; }
}
/* Prevent any horizontal overflow site-wide */
html, body.mytaxfile { overflow-x: hidden; max-width: 100vw; }
img, svg, video, iframe { max-width: 100%; }
/* ============================================================
* ELEMENTOR WRAPPER NEUTRALISATION
* Elementor wraps every section in extra divs with default padding
* and applies its own heading/text styles. These rules force our
* custom design through, so the Elementor-rendered pages look
* pixel-identical to the custom-coded version.
* ============================================================ */
/* Apply our custom section padding (overriding Elementor's default + Elementor inline styles) */
body.mytaxfile .elementor-section.mt-section { padding: 88px 0 !important; }
body.mytaxfile .elementor-section.mt-hero { padding: 80px 0 64px !important; }
body.mytaxfile .elementor-section.mt-page-head { padding: 72px 0 32px !important; }
body.mytaxfile .elementor-section.mt-strip { padding: 28px 0 !important; }
body.mytaxfile .elementor-section.mt-section > .elementor-container,
body.mytaxfile .elementor-section.mt-hero > .elementor-container,
body.mytaxfile .elementor-section.mt-page-head > .elementor-container,
body.mytaxfile .elementor-section.mt-strip > .elementor-container {
max-width: none;
padding: 0;
margin: 0;
}
body.mytaxfile .mt-section .elementor-column-gap-default > .elementor-column,
body.mytaxfile .mt-hero .elementor-column-gap-default > .elementor-column,
body.mytaxfile .mt-page-head .elementor-column-gap-default > .elementor-column {
padding: 0;
}
body.mytaxfile .mt-section .elementor-widget,
body.mytaxfile .mt-hero .elementor-widget,
body.mytaxfile .mt-page-head .elementor-widget,
body.mytaxfile .mt-strip .elementor-widget {
margin-bottom: 0;
}
body.mytaxfile .mt-section .elementor-widget-html > .elementor-widget-container,
body.mytaxfile .mt-hero .elementor-widget-html > .elementor-widget-container,
body.mytaxfile .mt-page-head .elementor-widget-html > .elementor-widget-container,
body.mytaxfile .mt-strip .elementor-widget-html > .elementor-widget-container {
padding: 0;
}
/* Neutralise Elementor heading-widget styles so our h1/h2/h3 rules apply */
body.mytaxfile .elementor-widget-heading .elementor-heading-title {
color: inherit;
font-family: var(--mt-font);
font-weight: inherit;
line-height: inherit;
letter-spacing: -0.02em;
margin: 0 0 0.5em;
}
body.mytaxfile .elementor-widget-text-editor {
color: inherit;
font-family: var(--mt-font);
}
/* Force button styling to win against Elementor's default anchor styling */
body.mytaxfile .elementor-widget-html a.mt-btn,
body.mytaxfile a.mt-btn {
text-decoration: none !important;
}
/* Reset default link decoration inside HTML widgets (was striking through buttons in some themes) */
body.mytaxfile .elementor-widget-html a {
text-decoration: none;
}
/* Pricing card "from" label and other display text inside Elementor needs to keep proper sizing */
body.mytaxfile .elementor-widget-html h1,
body.mytaxfile .elementor-widget-html h2,
body.mytaxfile .elementor-widget-html h3 {
font-family: var(--mt-font);
}
/* Hero gradients — Elementor doesn't support multi-stop radial backgrounds via UI */
body.mytaxfile .elementor-section.mt-hero {
background:
radial-gradient(1200px 400px at 100% -10%, rgba(15,118,110,.10), transparent 60%),
radial-gradient(800px 360px at -10% 110%, rgba(245,158,11,.10), transparent 60%),
var(--mt-bg-cream) !important;
}
body.mytaxfile .elementor-section.mt-page-head {
background-color: var(--mt-bg-cream) !important;
border-bottom: 1px solid var(--mt-line);
}
body.mytaxfile .elementor-section.mt-section-soft {
background-color: var(--mt-bg-soft) !important;
}
body.mytaxfile .elementor-section.mt-strip {
background-color: #fff !important;
border-bottom: 1px solid var(--mt-line);
}
/* Hide WP admin bar offset shift (the admin bar pushes everything down 32px) */
html[lang] body.mytaxfile.admin-bar { padding-top: 0; }
/* ============================================================
* CONTACT FORM 7 — match our design tokens
* ============================================================ */
body.mytaxfile .mt-cf7-wrap .wpcf7-form { margin-top: 0; }
body.mytaxfile .mt-cf7-wrap p { margin: 0 0 10px; line-height: 1.3; }
body.mytaxfile .mt-cf7-wrap br { display: none; }
body.mytaxfile .mt-cf7-wrap label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mt-ink-2);
margin: 0 0 4px;
line-height: 1.3;
}
body.mytaxfile .mt-cf7-wrap label .req { color: var(--mt-danger); margin-left: 2px; }
body.mytaxfile .mt-cf7-wrap .wpcf7-form-control-wrap { display: block; }
body.mytaxfile .mt-cf7-wrap input[type="text"],
body.mytaxfile .mt-cf7-wrap input[type="email"],
body.mytaxfile .mt-cf7-wrap input[type="tel"],
body.mytaxfile .mt-cf7-wrap textarea,
body.mytaxfile .mt-cf7-wrap select {
width: 100%;
padding: 10px 14px;
font-size: 14px;
font-family: inherit;
border: 1.5px solid var(--mt-line);
border-radius: 10px;
background: #fff;
color: var(--mt-ink);
box-sizing: border-box;
display: block;
margin: 0;
}
body.mytaxfile .mt-cf7-wrap textarea { resize: vertical; min-height: 84px; }
body.mytaxfile .mt-cf7-wrap input:focus,
body.mytaxfile .mt-cf7-wrap textarea:focus,
body.mytaxfile .mt-cf7-wrap select:focus {
outline: none;
border-color: var(--mt-primary);
box-shadow: 0 0 0 3px var(--mt-primary-50);
}
body.mytaxfile .mt-cf7-wrap input.wpcf7-submit {
width: 100%;
padding: 14px 22px;
font-size: 16px;
font-weight: 700;
color: #fff !important;
background: var(--mt-primary);
border: 0;
border-radius: 12px;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
margin-top: 8px;
}
body.mytaxfile .mt-cf7-wrap input.wpcf7-submit:hover {
background: var(--mt-primary-700);
transform: translateY(-1px);
}
body.mytaxfile .mt-cf7-wrap .wpcf7-spinner { display: inline-block; }
body.mytaxfile .mt-cf7-wrap .wpcf7-not-valid-tip {
color: var(--mt-danger);
font-size: 13px;
margin-top: 4px;
display: block;
}
body.mytaxfile .mt-cf7-wrap .wpcf7-response-output {
margin: 16px 0 0;
padding: 14px 16px;
border-radius: 10px;
border: 1.5px solid var(--mt-line);
font-size: 14px;
}
body.mytaxfile .mt-cf7-wrap .wpcf7 form.sent .wpcf7-response-output {
border-color: var(--mt-success);
background: var(--mt-primary-50);
color: var(--mt-primary-900);
}
body.mytaxfile .mt-cf7-wrap .wpcf7 form.invalid .wpcf7-response-output,
body.mytaxfile .mt-cf7-wrap .wpcf7 form.failed .wpcf7-response-output {
border-color: var(--mt-danger);
background: #FEF2F2;
color: #991B1B;
}
body.mytaxfile .cf7-fineprint {
font-size: 12px;
color: var(--mt-ink-3);
margin-top: 10px;
}
/* ============================================================
* COOKIE BANNER
* ============================================================ */
.mt-cookie {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 720px;
margin: 0 auto;
background: var(--mt-ink);
color: #fff;
padding: 18px 22px;
border-radius: 14px;
box-shadow: 0 10px 40px rgba(0,0,0,.25);
display: none;
z-index: 9000;
font-size: 14px;
line-height: 1.5;
}
.mt-cookie.is-visible { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mt-cookie p { margin: 0; flex: 1 1 280px; color: rgba(255,255,255,.92); }
.mt-cookie a { color: var(--mt-accent); text-decoration: underline; }
.mt-cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-cookie button {
border: 0;
font-family: inherit;
font-weight: 600;
font-size: 14px;
padding: 10px 16px;
border-radius: 10px;
cursor: pointer;
transition: transform .12s ease, background .12s ease;
}
.mt-cookie button.accept {
background: var(--mt-accent);
color: var(--mt-ink);
}
.mt-cookie button.accept:hover { background: #FBBF24; }
.mt-cookie button.decline {
background: rgba(255,255,255,.10);
color: #fff;
}
.mt-cookie button.decline:hover { background: rgba(255,255,255,.18); }
@media (max-width: 600px) {
.mt-cookie { padding: 16px; bottom: 8px; left: 8px; right: 8px; }
.mt-cookie-buttons { width: 100%; }
.mt-cookie button { flex: 1; }
}
/* ============================================================
* TAX CALCULATOR
* ============================================================ */
.mt-calc-card {
background: #fff;
border: 1px solid var(--mt-line);
border-radius: var(--mt-radius-lg);
padding: 28px;
box-shadow: var(--mt-shadow);
}
.mt-calc-card h3 { font-size: 1.15rem; margin: 0 0 16px; }
.mt-calc-form label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--mt-ink-2);
margin: 14px 0 6px;
}
.mt-calc-form label:first-of-type { margin-top: 0; }
.mt-calc-input {
display: flex;
align-items: stretch;
border: 1.5px solid var(--mt-line);
border-radius: 10px;
background: #fff;
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease;
}
.mt-calc-input:focus-within {
border-color: var(--mt-primary);
box-shadow: 0 0 0 3px var(--mt-primary-50);
}
.mt-calc-input .prefix {
padding: 12px 14px;
background: var(--mt-bg-soft);
color: var(--mt-ink-2);
font-weight: 700;
border-right: 1.5px solid var(--mt-line);
font-size: 15px;
}
.mt-calc-input input {
flex: 1;
min-width: 0;
border: 0;
padding: 12px 14px;
font-size: 16px;
font-family: inherit;
background: transparent;
color: var(--mt-ink);
}
.mt-calc-input input:focus { outline: none; }
.mt-calc-note {
font-size: 12px;
color: var(--mt-ink-3);
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--mt-line-2);
line-height: 1.5;
}
.mt-calc-result {
background: linear-gradient(180deg, var(--mt-primary-900), var(--mt-primary));
color: #fff;
border-radius: var(--mt-radius-lg);
padding: 28px;
box-shadow: var(--mt-shadow-lg);
}
.mt-calc-result .from {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.75);
text-transform: uppercase;
letter-spacing: .04em;
}
.mt-calc-result .big-price {
font-size: clamp(2.4rem, 5vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1;
margin: 6px 0 12px;
letter-spacing: -.02em;
}
.mt-calc-result p { color: rgba(255,255,255,.85); margin: 0; font-size: 14px; }
.mt-calc-result p strong { color: #fff; }
.mt-calc-breakdown {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.18);
}
.mt-calc-breakdown .row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
color: rgba(255,255,255,.85);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.mt-calc-breakdown .row:last-child { border-bottom: 0; }
.mt-calc-breakdown .row strong { color: #fff; font-weight: 700; }
.mt-calc-breakdown .row.total {
margin-top: 6px;
padding-top: 14px;
border-top: 2px solid rgba(255,255,255,.30);
font-size: 16px;
font-weight: 700;
color: #fff;
}
.mt-calc-cta {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.18);
}
.mt-calc-cta p {
font-size: 12px;
color: rgba(255,255,255,.75);
margin: 0 0 12px;
}
/* Mid-page CTA (sits between calculator + educational content) */
.mt-mid-cta {
background: #fff;
border: 1.5px solid var(--mt-primary);
border-radius: var(--mt-radius-lg);
padding: 28px 32px;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
box-shadow: 0 4px 20px rgba(15,118,110,.08);
}
.mt-mid-cta-text { flex: 1 1 320px; }
.mt-mid-cta-text h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--mt-ink); }
.mt-mid-cta-text p { margin: 0; color: var(--mt-ink-2); font-size: 14.5px; }
.mt-mid-cta .mt-btn { white-space: nowrap; }
@media (max-width: 600px) {
.mt-mid-cta { padding: 24px; gap: 18px; }
.mt-mid-cta .mt-btn { width: 100%; justify-content: center; }
}
/* Rate tables inside .mt-prose calculator content */
.mt-prose .mt-rate-table {
margin: 18px 0 24px;
overflow-x: auto;
border: 1px solid var(--mt-line);
border-radius: var(--mt-radius);
}
.mt-prose .mt-rate-table table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
/* Only enforce a min-width on roomy viewports — on mobile the table reflows as cards. */
@media (min-width: 641px) {
.mt-prose .mt-rate-table table { min-width: 480px; }
}
.mt-prose .mt-rate-table th,
.mt-prose .mt-rate-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--mt-line-2);
}
.mt-prose .mt-rate-table thead th {
background: var(--mt-bg-soft);
font-weight: 700;
color: var(--mt-ink);
font-size: 13px;
}
.mt-prose .mt-rate-table tbody tr:last-child td { border-bottom: 0; }
.mt-prose .mt-rate-table tbody tr:hover { background: var(--mt-bg-soft); }
.mt-prose .mt-rate-table strong { color: var(--mt-primary); font-weight: 700; }
/* Calculator educational prose — slightly larger feel than legal pages */
.mt-section .mt-prose h2 {
font-size: 1.5rem;
margin: 0 0 14px;
color: var(--mt-ink);
}
.mt-section .mt-prose h2:not(:first-child) {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--mt-line);
}
.mt-section .mt-prose ol {
margin: 0 0 14px;
padding-left: 22px;
color: var(--mt-ink-2);
}
.mt-section .mt-prose ol li { margin-bottom: 6px; }
/* ============================================================
* LEGAL PAGE PROSE
* ============================================================ */
.mt-prose {
max-width: 760px;
margin: 0 auto;
color: var(--mt-ink);
line-height: 1.7;
font-size: 16px;
}
.mt-prose h2 {
font-size: 1.4rem;
margin: 36px 0 12px;
color: var(--mt-ink);
}
.mt-prose h3 {
font-size: 1.1rem;
margin: 28px 0 10px;
}
.mt-prose p { margin: 0 0 14px; color: var(--mt-ink-2); }
.mt-prose ul, .mt-prose ol { margin: 0 0 14px; padding-left: 22px; color: var(--mt-ink-2); }
.mt-prose li { margin-bottom: 6px; }
.mt-prose a { color: var(--mt-primary-700); text-decoration: underline; }
.mt-prose a:hover { color: var(--mt-primary-900); }
.mt-prose .meta {
font-size: 13px;
color: var(--mt-ink-3);
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mt-line);
}
/* ---------- DETAIL PAGE LAYOUT (service & audience) ---------- */
.mt-detail-grid {
display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 920px) { .mt-detail-grid { grid-template-columns: 1fr; gap: 28px; } }
/* In body sections (e.g. /contact/), top-align grid items so columns don't have empty space */
body.mytaxfile .mt-section .mt-detail-grid { align-items: start; }
.mt-price-card {
background: #fff;
border: 1.5px solid var(--mt-line);
border-radius: var(--mt-radius-lg);
padding: 28px;
box-shadow: var(--mt-shadow);
}
.mt-price-card .from { font-size: 13px; font-weight: 600; color: var(--mt-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.mt-price-card .big-price { font-size: 3rem; font-weight: 800; color: var(--mt-primary); line-height: 1; margin: 6px 0 12px; }
.mt-price-card p { font-size: 14px; color: var(--mt-ink-2); }
.mt-price-card .mt-btn { width: 100%; justify-content: center; margin-top: 8px; }
.mt-price-card-trust {
list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--mt-line);
font-size: 13px; color: var(--mt-ink-2);
}
.mt-price-card-trust li { padding: 4px 0; }
/* ---------- BENEFITS GRID (service detail) ---------- */
.mt-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .mt-benefits { grid-template-columns: 1fr; } }
.mt-benefit {
background: #fff;
border: 1px solid var(--mt-line);
border-radius: var(--mt-radius-lg);
padding: 24px;
display: grid;
grid-template-columns: 36px 1fr;
gap: 16px;
align-items: start;
}
.mt-benefit .check {
width: 36px; height: 36px; border-radius: 50%;
background: var(--mt-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px;
}
.mt-benefit h3 { margin: 0 0 4px; font-size: 1.05rem; }
.mt-benefit p { margin: 0; font-size: 15px; color: var(--mt-ink-2); }
/* ---------- WHAT'S INCLUDED LIST ---------- */
.mt-included {
max-width: 820px; margin: 0 auto; padding: 0;
list-style: none;
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;
}
@media (max-width: 720px) { .mt-included { grid-template-columns: 1fr; } }
.mt-included li {
position: relative; padding: 12px 0 12px 36px; font-size: 15px;
color: var(--mt-ink); line-height: 1.5;
border-bottom: 1px solid var(--mt-line-2);
}
.mt-included li::before {
content: ""; position: absolute; left: 0; top: 12px;
width: 24px; height: 24px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
}
/* ---------- PAIN POINTS ---------- */
.mt-pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 920px) { .mt-pain { grid-template-columns: 1fr; } }
.mt-pain-item {
background: var(--mt-bg-cream);
border: 1px solid #F4E4B7;
border-radius: var(--mt-radius);
padding: 22px 22px 22px 60px;
font-size: 15.5px;
color: var(--mt-ink);
font-weight: 500;
position: relative;
line-height: 1.5;
}
.mt-pain-mark {
position: absolute; left: 22px; top: 22px;
width: 26px; height: 26px; border-radius: 50%;
background: var(--mt-accent); color: var(--mt-ink);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px;
}
/* ---------- REAL SAVINGS CALLOUT ---------- */
.mt-real-save {
background: linear-gradient(135deg, var(--mt-primary-900), var(--mt-primary));
color: #fff;
border-radius: var(--mt-radius-lg);
padding: 56px;
text-align: center;
}
.mt-real-save h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.mt-real-save p { color: rgba(255,255,255,.85); max-width: 65ch; margin: 0 auto; font-size: 1.05rem; }
.mt-real-save .mt-eyebrow { background: rgba(255,255,255,.16); color: rgba(255,255,255,.92); }
@media (max-width: 600px) { .mt-real-save { padding: 36px 24px; } }
/* ---------- RELATED CARDS GRID ---------- */
.mt-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 920px) { .mt-related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mt-related-grid { grid-template-columns: 1fr; } }
.mt-related-card {
background: #fff;
border: 1px solid var(--mt-line);
border-radius: var(--mt-radius-lg);
padding: 24px;
color: var(--mt-ink);
text-decoration: none;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
display: block;
}
.mt-related-card:hover { transform: translateY(-3px); border-color: var(--mt-primary); box-shadow: var(--mt-shadow-lg); color: var(--mt-ink); }
.mt-related-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.mt-related-card p { color: var(--mt-primary-700); font-weight: 700; font-size: 15px; margin: 0; }
/* ---------- HUB SERVICES (services & audiences index) ---------- */
.mt-service-link { display: block; text-decoration: none; color: var(--mt-ink); position: relative; }
.mt-service-link:hover { color: var(--mt-ink); }
.mt-service-link .icon {
background: var(--mt-primary-50); color: var(--mt-primary);
font-size: 22px; font-weight: 700;
}
/* ============================================================
* RESPONSIVE V2 — COMPREHENSIVE PASS
* Covers every component on every breakpoint (1280 / 1024 / 980 / 720 / 600 / 480 / 380).
* Mobile-first defaults are inherited from the rules above; this block adds
* - precision tweaks at narrower viewports
* - overflow / wrapping safety nets
* - touch / iOS / form-input fixes
* - components added later (mid-cta, related-grid, pills, compare, rate-table, glossary, hub, footer)
* ============================================================ */
/* ----- GLOBAL SAFETY NETS (apply at every width) ----- */
/* Long words, URLs, slugs, IBANs etc. should never blow out a column. */
body.mytaxfile h1,
body.mytaxfile h2,
body.mytaxfile h3,
body.mytaxfile h4,
body.mytaxfile p,
body.mytaxfile li,
body.mytaxfile td,
body.mytaxfile th,
body.mytaxfile blockquote,
body.mytaxfile summary,
body.mytaxfile .mt-related-card p,
body.mytaxfile .mt-glossary-item span,
body.mytaxfile .mt-search-result p {
overflow-wrap: anywhere;
word-break: normal;
}
/* iOS Safari zooms when input font < 16px. Force ≥16px on every form field. */
body.mytaxfile input[type="text"],
body.mytaxfile input[type="email"],
body.mytaxfile input[type="tel"],
body.mytaxfile input[type="url"],
body.mytaxfile input[type="search"],
body.mytaxfile input[type="number"],
body.mytaxfile input[type="password"],
body.mytaxfile input[type="date"],
body.mytaxfile select,
body.mytaxfile textarea {
font-size: max(16px, 1rem);
}
/* Sticky-header offset for in-page anchors (e.g. /pricing/#packages) */
body.mytaxfile [id] { scroll-margin-top: 96px; }
/* Make sure tables can scroll horizontally inside any wrapper */
body.mytaxfile .mt-compare-wrap,
body.mytaxfile .mt-price-table,
body.mytaxfile .mt-rate-table {
-webkit-overflow-scrolling: touch;
}
/* Anchor tap targets reach the 44×44 touch-area minimum where it matters */
body.mytaxfile .mt-az-nav a,
body.mytaxfile .mt-az-nav .disabled { min-height: 44px; min-width: 44px; }
/* ----- WIDE LAPTOP (1280-1100) ----- */
@media (max-width: 1280px) {
:root { --mt-container: min(1180px, calc(100vw - 48px)); }
}
/* ----- LAPTOP (1100-980) — header + hero start to compact ----- */
@media (max-width: 1100px) {
.mt-hero { padding: 64px 0 56px; }
.mt-hero-grid { gap: 40px; }
.mt-section { padding: 72px 0; }
body.mytaxfile .elementor-section.mt-section { padding: 72px 0 !important; }
body.mytaxfile .elementor-section.mt-hero { padding: 64px 0 56px !important; }
/* Mega menu stays open inside header but narrower */
.mt-nav-item.has-mega:has([data-mega-panel="resources"]) .mt-mega { width: min(900px, calc(100vw - 32px)); }
.mt-nav-item.has-mega:has([data-mega-panel="returns"]) .mt-mega,
.mt-nav-item.has-mega:has([data-mega-panel="companies"]) .mt-mega { width: min(720px, calc(100vw - 32px)); }
.mt-mega { width: min(680px, calc(100vw - 32px)); }
.mt-mega-cols { grid-template-columns: repeat(2, 1fr); }
.mt-mega-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ----- TABLET (980-720) ----- */
@media (max-width: 980px) {
/* Logo / header already collapses to burger from line 309 — extend */
.mt-header-inner { gap: 12px; }
/* Hero side card sits below copy and stretches full width */
.mt-hero-card { width: 100%; }
.mt-hero p.lead { max-width: none; }
/* Mid-CTA stacks the button under copy */
.mt-mid-cta { padding: 26px 24px; gap: 18px; }
/* Three-up mt-pain stays single column (already done) */
/* Three-up related-grid drops to 2 cols at 980 (already done) */
/* Pricing à la carte gets horizontal scroll affordance */
.mt-price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Footer grid drops from 5 → 3 (better intermediate state than jumping straight to 2) */
.mt-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.mt-footer-brand { grid-column: 1 / -1; }
}
/* ----- TABLET / LARGE PHONE (920-720) ----- */
@media (max-width: 920px) {
/* Hero typography pulls in slightly */
.mt-hero h1 { line-height: 1.1; }
.mt-hero-cta { gap: 10px; }
}
/* ----- LARGE PHONE / SMALL TABLET (720-640) ----- */
@media (max-width: 720px) {
.mt-section { padding: 56px 0; }
body.mytaxfile .elementor-section.mt-section { padding: 56px 0 !important; }
.mt-section-head { margin-bottom: 36px; }
/* Glossary 4-up grid (if any) drops to 1 (existing rule already handles, line 796) */
/* Guides categorised list stacks (already done) */
/* Footer 3-col → 2-col */
.mt-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.mt-footer-brand { grid-column: 1 / -1; }
/* Search form stacks button under input */
.mt-search-form { flex-direction: column; align-items: stretch; }
.mt-search-form .mt-btn { width: 100%; justify-content: center; }
.mt-search-input { min-width: 0; width: 100%; }
/* Compare table column padding compacts */
.mt-compare th, .mt-compare td { padding: 12px 14px; }
}
/* ----- MOBILE (640) — main mobile breakpoint, existing block at line 830 covers most. Augment: ----- */
@media (max-width: 640px) {
/* Header inner shrinks more */
.mt-header-inner { gap: 8px; }
.mt-logo img { height: 42px; }
/* Page-head — left-align (centre treatment is fine but stack the small text properly) */
.mt-page-head h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
.mt-page-head p { font-size: 15px; }
/* Pricing cards: title + price + tagline tighter */
.mt-package h3 { font-size: 1.15rem; }
.mt-package .price { font-size: 2rem; }
.mt-package .tagline { font-size: 13px; margin-bottom: 14px; }
.mt-package li { font-size: 14px; padding: 9px 0 9px 26px; }
/* Audience pills stay readable */
.mt-pills { justify-content: flex-start; }
/* Mid-CTA: full bleed-ish, body smaller */
.mt-mid-cta-text h3 { font-size: 1.05rem; }
.mt-mid-cta-text p { font-size: 14px; }
/* Hero side card: slimmer chrome */
.mt-hero-card { padding: 20px; box-shadow: var(--mt-shadow); }
.mt-hero-card-badge { font-size: 11px; padding: 5px 10px; right: 14px; top: -12px; }
/* Detail page (services / audiences) — price card sits flush */
.mt-price-card { padding: 22px; }
.mt-price-card .big-price { font-size: 2.4rem; }
/* Final CTA copy size */
.mt-cta { border-radius: var(--mt-radius); }
/* Footer-bottom links stack readably */
.mt-footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.mt-footer { padding: 48px 0 24px; }
/* Cookie banner sits to the very bottom edge with thumb-friendly buttons */
.mt-cookie { padding: 14px 16px; bottom: 6px; left: 6px; right: 6px; max-width: none; }
.mt-cookie p { font-size: 13px; flex: 1 1 100%; }
.mt-cookie button { padding: 12px 14px; font-size: 14px; min-height: 44px; }
/* Calc breakdown rows compact */
.mt-calc-breakdown .row { font-size: 13px; padding: 7px 0; }
/* Glossary item readability */
.mt-glossary-item { padding: 14px 16px; }
.mt-glossary-item strong { font-size: 14.5px; }
.mt-glossary-item span { font-size: 12.5px; }
/* Search result cards padding */
.search-results .mt-search-result { padding: 18px 20px; }
/* A-Z nav buttons */
.mt-az-nav { padding: 10px 6px; gap: 2px; }
.mt-az-nav a, .mt-az-nav .disabled { width: 28px; height: 28px; font-size: 12.5px; min-height: 28px; min-width: 28px; }
/* Eyebrow on mobile */
.mt-eyebrow { font-size: 11.5px; padding: 5px 10px; margin-bottom: 12px; }
}
/* ----- SMALL PHONE (480) — explicit step between 640 and 380 ----- */
@media (max-width: 480px) {
body.mytaxfile { font-size: 15.5px; }
.mt-container { padding: 0 16px; }
.mt-hero { padding: 32px 0 32px; }
body.mytaxfile .elementor-section.mt-hero { padding: 32px 0 32px !important; }
.mt-section { padding: 40px 0; }
body.mytaxfile .elementor-section.mt-section { padding: 40px 0 !important; }
/* Heading scale */
.mt-hero h1, h1 { font-size: clamp(1.6rem, 8vw, 1.95rem); line-height: 1.12; }
h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); line-height: 1.18; }
h3 { font-size: 1rem; }
/* Footer 2-col → 1-col already at 600px from line 557, but ensure bottom row stays single line */
.mt-footer-bottom { font-size: 12px; }
/* Hero-card form fields a touch smaller */
.mt-hero-card .quote-form select,
.mt-hero-card .quote-form input { padding: 11px 12px; }
/* Compare wrap hint label tighter */
.mt-compare-wrap::after { font-size: 10.5px; padding: 6px 0 2px; }
/* Pricing table cells compact */
.mt-price-table th, .mt-price-table td { padding: 10px 12px; font-size: 13px; }
/* Buttons full width on mobile by default within stacked CTAs */
.mt-cta .mt-btn,
.mt-mid-cta .mt-btn { padding: 14px 18px; font-size: 15px; }
/* Glossary item — 1-up at this width (already 1 col from 720) */
.mt-az-nav a, .mt-az-nav .disabled { width: 26px; height: 26px; font-size: 12px; }
/* Trust strip dots hide */
.mt-strip-inner { gap: 12px; font-size: 11px; }
/* CF7 contact form padding */
body.mytaxfile .mt-cf7-wrap input[type="text"],
body.mytaxfile .mt-cf7-wrap input[type="email"],
body.mytaxfile .mt-cf7-wrap input[type="tel"],
body.mytaxfile .mt-cf7-wrap textarea,
body.mytaxfile .mt-cf7-wrap select { padding: 11px 12px; font-size: 16px; }
/* Pain items — compact icon */
.mt-pain-item { padding: 16px 16px 16px 50px; font-size: 14px; }
.mt-pain-mark { left: 16px; top: 16px; width: 22px; height: 22px; font-size: 13px; }
}
/* ----- VERY SMALL PHONE (380 and under) — extend existing block ----- */
@media (max-width: 380px) {
.mt-container { padding: 0 12px; }
.mt-hero h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; }
.mt-package .price { font-size: 1.7rem; }
.mt-hero-card { padding: 16px; }
.mt-cta { padding: 28px 18px; border-radius: 14px; }
.mt-real-save { padding: 28px 18px; }
.mt-strip-inner { font-size: 10.5px; gap: 10px; }
.mt-faq summary { padding: 14px 44px 14px 14px; font-size: 13.5px; }
.mt-faq .answer { padding: 0 14px 14px; font-size: 13.5px; }
.mt-package { padding: 20px; }
.mt-package li { font-size: 13.5px; }
.mt-step { padding: 20px; }
.mt-related-card { padding: 18px; }
.mt-pill { padding: 7px 12px; font-size: 12.5px; }
.mt-mid-cta { padding: 20px; }
.mt-mid-cta-text h3 { font-size: 1rem; }
.mt-az-nav a, .mt-az-nav .disabled { width: 24px; height: 24px; font-size: 11.5px; }
/* Hero CTAs already stack to full-width column from line 852 */
.mt-hero-cta .mt-btn { padding: 12px 16px; font-size: 14.5px; }
}
/* ----- LOGO HEIGHT — source-order-FINAL block so it wins every cascade ----- */
/* These rules deliberately appear after every other .mt-logo img rule in the file.
They are the single source of truth for logo size on each viewport. */
@media (max-width: 980px) { .mt-logo img { height: 46px !important; } }
@media (max-width: 640px) { .mt-logo img { height: 44px !important; } }
@media (max-width: 480px) { .mt-logo img { height: 42px !important; } }
@media (max-width: 380px) { .mt-logo img { height: 38px !important; } }
/* ----- LANDSCAPE PHONE (height ≤ 480, width up to 900) — minor tweaks ----- */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {
.mt-hero { padding: 32px 0 24px; }
.mt-section { padding: 36px 0; }
body.mytaxfile .elementor-section.mt-hero { padding: 32px 0 24px !important; }
body.mytaxfile .elementor-section.mt-section { padding: 36px 0 !important; }
.mt-section-head { margin-bottom: 24px; }
}
/* ----- TOUCH-ONLY (no hover) — disable hover-only interactions ----- */
@media (hover: none) and (pointer: coarse) {
/* Mega menu only opens on click (handled by JS .is-open). Disable hover-rotate on caret */
.mt-nav-link:hover { background: transparent; color: var(--mt-ink-2); }
.mt-nav-link:focus-visible { background: var(--mt-primary-50); color: var(--mt-primary); }
/* Cards lose translate-on-hover (looks janky on tap) */
.mt-service:hover,
.mt-related-card:hover,
.mt-glossary-item:hover { transform: none; }
}
/* ----- HIGH-DPI / RETINA: thinner hairlines on hi-density displays ----- */
@media (min-resolution: 2dppx) {
.mt-utility { border-bottom-width: 0.5px; }
.mt-header { border-bottom-width: 0.5px; }
}
/* ----- PRINT — clean printable receipts / quotes ----- */
@media print {
.mt-utility, .mt-header, .mt-footer, .mt-cta, .mt-mid-cta, .mt-cookie,
.mt-burger, .mt-search-btn, .mt-hero-cta { display: none !important; }
.mt-hero, .mt-section, body.mytaxfile .elementor-section.mt-hero,
body.mytaxfile .elementor-section.mt-section { padding: 12px 0 !important; background: #fff !important; }
body.mytaxfile { font-size: 12pt; color: #000; background: #fff; }
a { color: #000; text-decoration: underline; }
.mt-package, .mt-service, .mt-related-card, .mt-glossary-item { break-inside: avoid; box-shadow: none !important; }
.mt-compare-wrap::after { display: none !important; }
}
/* ----- COMPONENT-SPECIFIC OVERFLOW FIXES (apply at all widths) ----- */
/* Ensure any iframe (videos, maps) is responsive. */
body.mytaxfile iframe { max-width: 100%; }
/* Make sure the cookie banner's wraps properly. */
.mt-cookie p { min-width: 0; }
/* Pricing card big-price should never blow out. */
.mt-price-card .big-price,
.mt-package .price,
.mt-calc-result .big-price { word-break: keep-all; overflow-wrap: normal; }
/* Anchor row in compare-wrap: make sure first column stays sticky-ish at narrow */
.mt-compare table { table-layout: auto; }
.mt-compare thead th:first-child,
.mt-compare tbody td:first-child { min-width: 140px; }
/* Glossary related links: stack on very narrow — already 1 col @ 720, force at 480 just in case */
@media (max-width: 480px) {
.mt-glossary-related { grid-template-columns: 1fr; }
}
/* Hub services grid (services / audiences index) — match home services responsive grid */
.mt-page-head + .mt-section .mt-services,
.elementor-section + .elementor-section .mt-services { /* nothing — inherit */ }
/* If somebody renders a generic
inside .mt-prose, wrap visually for scroll */
.mt-prose table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* Stretchy/uneven element kill-switch: any direct children of mt-section that overflow get clamped */
body.mytaxfile .mt-section > .mt-container,
body.mytaxfile .mt-hero > .mt-container,
body.mytaxfile .mt-page-head > .mt-container { min-width: 0; }
/* ----- 4-COLUMN VARIANTS (credibility rows etc.) ----- */
.mt-services.mt-services-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .mt-services.mt-services-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mt-services.mt-services-4 { grid-template-columns: 1fr; } }
/* Belt-and-braces: any .mt-services with an inline 4-col template still collapses on mobile */
@media (max-width: 980px) {
body.mytaxfile .mt-services[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
body.mytaxfile .mt-services[style*="repeat(4"] { grid-template-columns: 1fr !important; }
}
/* ----- SCREEN-READER ONLY UTILITY ----- */
.sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Mobile sticky CTA bar — only revealed when the burger menu is open on mobile.
Defaults to hidden at every width so it never leaks onto desktop, where the
header already has its own "Get a free quote" button. */
.mt-mobile-cta { display: none; }
/* ============================================================
* WHATSAPP FLOATING BUTTON
* ============================================================ */
.mt-whatsapp {
position: fixed;
right: 20px;
bottom: 22px;
z-index: 8500;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: #25D366;
color: #fff !important;
font-weight: 700;
font-size: 15px;
text-decoration: none !important;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .15);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mt-whatsapp:hover, .mt-whatsapp:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(37, 211, 102, .45), 0 3px 8px rgba(0, 0, 0, .18);
background: #1FB957;
color: #fff !important;
}
.mt-whatsapp svg { width: 22px; height: 22px; flex-shrink: 0; }
.mt-whatsapp-label { white-space: nowrap; }
/* On mobile shrink to icon-only circle */
@media (max-width: 640px) {
.mt-whatsapp {
right: 14px;
bottom: 14px;
padding: 0;
width: 52px;
height: 52px;
justify-content: center;
}
.mt-whatsapp-label { display: none; }
.mt-whatsapp svg { width: 26px; height: 26px; }
}
/* When the cookie banner is visible, lift the WhatsApp button so it doesn't collide */
.mt-cookie.is-visible ~ .mt-whatsapp,
body.mtf-cookie-open .mt-whatsapp { bottom: 110px; }
/* ============================================================
* NEWSLETTER SIGNUP (footer + standalone)
* ============================================================ */
.mt-newsletter {
background: linear-gradient(135deg, var(--mt-primary-900), var(--mt-primary));
color: #fff;
border-radius: var(--mt-radius-lg);
padding: 36px 40px;
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
.mt-newsletter-text h3 { color: #fff; font-size: 1.5rem; margin: 0 0 6px; }
.mt-newsletter-text p { color: rgba(255,255,255,.85); margin: 0; font-size: 15px; }
.mt-newsletter-form {
display: flex;
gap: 8px;
min-width: 320px;
flex-wrap: wrap;
}
.mt-newsletter-form input[type="email"] {
flex: 1 1 220px;
min-width: 0;
padding: 14px 18px;
border-radius: 12px;
border: 0;
font-size: 16px;
font-family: inherit;
color: var(--mt-ink);
background: #fff;
}
.mt-newsletter-form input[type="email"]:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(245, 158, 11, .35);
}
.mt-newsletter-form button {
padding: 14px 22px;
border: 0;
border-radius: 12px;
background: var(--mt-accent);
color: var(--mt-ink);
font-weight: 700;
font-family: inherit;
font-size: 15px;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
}
.mt-newsletter-form button:hover { background: #FBBF24; transform: translateY(-1px); }
.mt-newsletter-fineprint { font-size: 12px; color: rgba(255,255,255,.65); margin: 8px 0 0; flex-basis: 100%; }
.mt-newsletter-msg {
flex-basis: 100%;
font-size: 14px;
font-weight: 600;
margin: 6px 0 0;
min-height: 1.2em;
}
.mt-newsletter-msg.is-ok { color: #ffe48b; }
.mt-newsletter-msg.is-error { color: #FCA5A5; }
@media (max-width: 920px) {
.mt-newsletter { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
.mt-newsletter-form { min-width: 0; }
}
/* Footer-embedded newsletter (compact variant) */
.mt-footer-newsletter {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 18px 20px;
margin: 0 0 32px;
}
.mt-footer-newsletter h4 {
color: #fff !important;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 10px;
}
.mt-footer-newsletter p { color: rgba(255,255,255,.65); font-size: 13px; margin: 0 0 12px; }
.mt-footer-newsletter form { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-footer-newsletter input[type="email"] {
flex: 1 1 180px;
min-width: 0;
padding: 11px 14px;
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: #fff;
font-size: 14px;
font-family: inherit;
}
.mt-footer-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.mt-footer-newsletter input[type="email"]:focus {
outline: none;
border-color: var(--mt-accent);
background: rgba(255,255,255,.10);
}
.mt-footer-newsletter button {
padding: 11px 18px;
border: 0;
border-radius: 10px;
background: var(--mt-accent);
color: var(--mt-ink);
font-weight: 700;
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: background .12s ease;
}
.mt-footer-newsletter button:hover { background: #FBBF24; }
.mt-footer-newsletter .mt-newsletter-msg { color: #FBBF24; font-size: 12.5px; }
/* ============================================================
* TRUSTPILOT-STYLE REVIEW STRIP / WIDGET
* ============================================================ */
.mt-trustpilot {
background: #fff;
border: 1px solid var(--mt-line);
border-radius: var(--mt-radius-lg);
padding: 22px 28px;
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.mt-trustpilot-score { display: flex; align-items: center; gap: 10px; }
.mt-trustpilot-stars { display: inline-flex; gap: 2px; }
.mt-trustpilot-stars .s {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: #00B67A; color: #fff;
border-radius: 4px;
font-size: 16px;
}
.mt-trustpilot-rating { font-weight: 800; font-size: 18px; color: var(--mt-ink); }
.mt-trustpilot-rating small { color: var(--mt-ink-3); font-weight: 500; font-size: 13px; }
.mt-trustpilot-logo {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: #00B67A;
font-size: 16px;
}
.mt-trustpilot-logo svg { width: 20px; height: 20px; }
.mt-trustpilot-cta { font-size: 13px; color: var(--mt-ink-3); }
.mt-trustpilot-cta a { color: var(--mt-primary); font-weight: 700; }
@media (max-width: 600px) {
.mt-trustpilot { padding: 18px; gap: 16px; }
.mt-trustpilot-stars .s { width: 22px; height: 22px; font-size: 13px; }
.mt-trustpilot-rating { font-size: 16px; }
}