/* ==========================================================================
   TMPMailer — Nebula v2 design system
   Goals: ad-viewability + UX-first + SEO/Core-Web-Vitals friendly.
   Scoped under body.tm2 to avoid collisions with legacy stylesheets.
   ========================================================================== */

body.tm2 {
    --tm-brand:        #4f46e5;
    --tm-brand-2:      #7c3aed;
    --tm-brand-dark:   #3730a3;
    --tm-brand-soft:   #eef2ff;
    --tm-accent:       #f59e0b;
    --tm-bg:           #f5f6fa;
    --tm-surface:      #ffffff;
    --tm-surface-2:    #f8faff;
    --tm-border:       #e5e8f0;
    --tm-border-2:     #d8dcea;
    --tm-ink:          #0f172a;
    --tm-ink-2:        #475569;
    --tm-muted:        #8a94a6;
    --tm-success:      #16a34a;
    --tm-danger:       #dc2626;
    --tm-radius:       14px;
    --tm-radius-lg:    20px;
    --tm-radius-xl:    28px;
    --tm-shadow-sm:    0 1px 2px rgba(15, 23, 42, .05);
    --tm-shadow:       0 6px 24px -6px rgba(15, 23, 42, .10);
    --tm-shadow-lg:    0 24px 60px -12px rgba(15, 23, 42, .18);
    --tm-ring:         0 0 0 4px rgba(79, 70, 229, .16);
    --tm-font-display: 'Poppins', 'Inter', system-ui, sans-serif;
    --tm-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --tm-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    margin: 0;
    background: var(--tm-bg);
    color: var(--tm-ink);
    font-family: var(--tm-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.tm2 *, body.tm2 *::before, body.tm2 *::after { box-sizing: border-box; }
body.tm2 img { max-width: 100%; height: auto; }
body.tm2 a { color: var(--tm-brand); text-decoration: none; transition: color .2s ease; }
body.tm2 a:hover { color: var(--tm-brand-dark); }
body.tm2 :focus-visible { outline: none; box-shadow: var(--tm-ring); border-radius: 8px; }
body.tm2 button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
    body.tm2 *, body.tm2 *::before, body.tm2 *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Layout primitives ---------- */
.tm2-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px)  { .tm2-container { padding-inline: 28px; } }
@media (min-width: 1440px) { .tm2-container { max-width: 1240px; } }

.tm2-section { margin-top: 56px; }
@media (min-width: 768px) { .tm2-section { margin-top: 80px; } }

.tm2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tm-brand);
}
.tm2-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tm-brand), var(--tm-brand-2)); }

.tm2-h1, .tm2-h2, .tm2-h3 { font-family: var(--tm-font-display); font-weight: 600; line-height: 1.15; color: var(--tm-ink); margin: 0; letter-spacing: -.02em; }
.tm2-h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.tm2-h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.tm2-h3 { font-size: 1.125rem; }
.tm2-lead { color: var(--tm-ink-2); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; margin: 0; }

.tm2-panel {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
}

/* ---------- Buttons ---------- */
.tm2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px;
    border: 0; border-radius: 14px; cursor: pointer;
    font-size: 15px; font-weight: 600; line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.tm2-btn:active { transform: translateY(1px) scale(.99); }
.tm2-btn-primary,
.tm2-btn-brand,
body.tm2 a.tm2-btn-brand,
body.tm2 button.tm2-btn-brand {
    color: #fff !important;
    background: var(--tm-grad-accent, linear-gradient(135deg, var(--tm-brand) 0%, var(--tm-brand-2) 100%));
    box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .55);
}
.tm2-btn-primary:hover,
.tm2-btn-brand:hover,
body.tm2 a.tm2-btn-brand:hover { color: #fff !important; box-shadow: 0 14px 30px -8px rgba(79, 70, 229, .65); transform: translateY(-1px); }
.tm2-btn-soft { color: var(--tm-brand-dark); background: var(--tm-brand-soft); }
.tm2-btn-soft:hover { color: var(--tm-brand-dark); background: #e2e9ff; }
.tm2-btn-ghost { color: var(--tm-ink-2); background: var(--tm-surface-2); border: 1px solid var(--tm-border); }
.tm2-btn-ghost:hover { color: var(--tm-ink); background: var(--tm-surface); border-color: var(--tm-border-2); }
.tm2-btn-danger-ghost { color: var(--tm-danger); background: transparent; }
.tm2-btn-danger-ghost:hover { color: var(--tm-danger); background: #fef2f2; }
.tm2-btn-sm { min-height: 42px; padding: 10px 16px; font-size: 14px; border-radius: 12px; }

/* ---------- Header ---------- */
.tm2-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tm2-header.is-scrolled { border-bottom-color: var(--tm-border); box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .12); }
.tm2-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }

.tm2-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--tm-ink); }
.tm2-brand:hover { color: var(--tm-ink); }
.tm2-brand-mark {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2));
    box-shadow: 0 8px 18px -6px rgba(79, 70, 229, .55); overflow: hidden; flex: 0 0 auto;
    color: #fff;
}
.tm2-brand-mark svg { display: block; }
.tm2-brand-name { font-family: var(--tm-font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
.tm2-brand-name b { color: var(--tm-brand); font-weight: 700; }

.tm2-nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .tm2-nav { display: flex; } }
.tm2-nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 12px; border: 0; background: transparent; cursor: pointer;
    font-size: 14.5px; font-weight: 600; color: var(--tm-ink-2);
    transition: color .2s ease, background .2s ease;
}
.tm2-nav-link:hover, .tm2-nav-link.is-active { color: var(--tm-brand-dark); background: var(--tm-brand-soft); }
.tm2-nav-link i { font-size: 11px; transition: transform .2s ease; }

.tm2-popover { position: relative; }
.tm2-popover-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
    width: min(560px, 92vw); padding: 14px; z-index: 70;
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 20px;
    box-shadow: var(--tm-shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.tm2-popover.is-open .tm2-popover-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.tm2-popover.is-open > .tm2-nav-link i { transform: rotate(180deg); }
.tm2-popover-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background .18s ease; }
.tm2-popover-item:hover { background: var(--tm-surface-2); }
.tm2-popover-item .pi { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 15px; }
.tm2-popover-item .pt { font-weight: 600; font-size: 14.5px; color: var(--tm-ink); }
.tm2-popover-item .pd { font-size: 12.5px; color: var(--tm-muted); margin-top: 2px; }

.tm2-header-actions { display: flex; align-items: center; gap: 10px; }
.tm2-locale { position: relative; display: none; }
@media (min-width: 768px) { .tm2-locale { display: block; } }
.tm2-locale select {
    appearance: none; border: 1px solid var(--tm-border); background: var(--tm-surface-2);
    border-radius: 12px; padding: 10px 34px 10px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--tm-ink-2); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-locale select:hover { border-color: var(--tm-border-2); }
.tm2-locale::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; color: var(--tm-muted); position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.tm2-header-cta { display: none; }
@media (min-width: 640px) { .tm2-header-cta { display: inline-flex; } }

.tm2-burger {
    width: 46px; height: 46px; border: 1px solid var(--tm-border); border-radius: 13px;
    background: var(--tm-surface); cursor: pointer; display: grid; place-items: center; padding: 0;
}
@media (min-width: 1024px) { .tm2-burger { display: none; } }
.tm2-burger span { display: block; width: 20px; height: 2px; margin: 2.5px 0; border-radius: 2px; background: var(--tm-ink); transition: transform .25s ease, opacity .2s ease; }
.tm2-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tm2-burger.is-open span:nth-child(2) { opacity: 0; }
.tm2-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tm2-mobile-menu {
    position: fixed; inset: 68px 0 auto 0; z-index: 55; padding: 10px 20px 22px;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-lg);
}
.tm2-mobile-menu a.tm2-mm-link {
    display: flex; align-items: center; gap: 14px; padding: 15px 12px; min-height: 52px;
    border-radius: 14px; color: var(--tm-ink); font-weight: 600; font-size: 16px;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-mobile-menu a.tm2-mm-link:last-of-type { border-bottom: 0; }
.tm2-mobile-menu a.tm2-mm-link:hover, .tm2-mobile-menu a.tm2-mm-link.is-active { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-mobile-menu a.tm2-mm-link .n { font-family: var(--tm-font-mono); font-size: 11px; color: var(--tm-muted); width: 22px; }
.tm2-mobile-menu a.tm2-mm-link i { margin-left: auto; font-size: 13px; color: var(--tm-muted); }
.tm2-mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0; }
.tm2-mm-foot select { border: 1px solid var(--tm-border); border-radius: 12px; padding: 10px 12px; background: var(--tm-surface-2); font-weight: 600; color: var(--tm-ink-2); }
.tm2-mm-socials { display: flex; gap: 14px; font-size: 18px; }
.tm2-mm-socials a { color: var(--tm-ink-2); }
.tm2-mm-socials a:hover { color: var(--tm-brand); }

/* Mobile menu backdrop overlay */
.tm2-mobile-backdrop {
    position: fixed; inset: 68px 0 0 0; z-index: 54;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* ---------- Hero ---------- */
.tm2-hero { position: relative; padding: 44px 0 10px; overflow: hidden; }
@media (min-width: 768px) { .tm2-hero { padding: 64px 0 16px; } }
.tm2-hero::before {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 560px; z-index: -1;
    background:
        radial-gradient(520px 300px at 12% 20%, rgba(79, 70, 229, .14), transparent 65%),
        radial-gradient(480px 280px at 85% 12%, rgba(124, 58, 237, .12), transparent 65%),
        radial-gradient(420px 260px at 55% 45%, rgba(245, 158, 11, .07), transparent 60%);
    pointer-events: none;
}
.tm2-hero-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.tm2-chips, .tm2-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.tm2-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border-radius: 999px; background: var(--tm-surface); border: 1px solid var(--tm-border);
    font-size: 12.5px; font-weight: 600; color: var(--tm-ink-2); box-shadow: var(--tm-shadow-sm);
}
.tm2-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.tm2-chip i { color: var(--tm-brand); font-size: 12px; }
.tm2-hero .tm2-h1 { margin-top: 6px; }
.tm2-hero .tm2-h1 .grad {
    background: linear-gradient(120deg, var(--tm-brand) 10%, var(--tm-brand-2) 60%, #a855f7 95%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.tm2-hero-sub { max-width: 640px; margin: 18px auto 0; }

/* ---------- Address bar (email actions) ---------- */
.tm2-mailbox { padding: 18px 0 0; }
.tm2-address-card {
    position: relative; padding: 22px; min-height: 312px;
    background: linear-gradient(180deg, var(--tm-surface), var(--tm-surface-2));
    border: 1px solid var(--tm-border); border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow); width: 100%;
}
/* The Livewire address widget is 140px tall on first paint and grows to its
   hydrated height a moment later, which pushed the whole page down and was
   the main mobile CLS source on the home and service pages. Reserve the final
   height per breakpoint so the first paint already occupies that space. */
@media (min-width: 480px) { .tm2-address-card { min-height: 288px; } }
@media (min-width: 640px) { .tm2-address-card { min-height: 238px; } }
@media (min-width: 768px) { .tm2-address-card { padding: 26px 28px; min-height: 222px; } }
.tm2-address-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    border-radius: var(--tm-radius-xl) 0 0 var(--tm-radius-xl);
    background: linear-gradient(180deg, var(--tm-brand), var(--tm-brand-2));
}
.tm2-address-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tm2-address-label .t { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tm2-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--tm-success); }
.tm2-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-success); animation: tm2-pulse 1.8s ease-out infinite; }
@keyframes tm2-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.tm2-address-bar {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px;
    background: var(--tm-surface-2); border: 1.5px solid var(--tm-border-2);
    border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-address-bar:focus-within { border-color: var(--tm-brand); box-shadow: var(--tm-ring); background: var(--tm-surface); }
.tm2-address-bar .env { color: var(--tm-brand); font-size: 18px; flex: 0 0 auto; }
.tm2-address-bar #email_id {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--tm-font-mono); font-size: clamp(14px, 2.6vw, 17px); font-weight: 600;
    color: var(--tm-ink); letter-spacing: -.01em;
}
.tm2-address-bar .tm2-btn { flex: 0 0 auto; }

.tm2-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .tm2-action-grid { grid-template-columns: repeat(4, 1fr); } }
.tm2-action-grid .tm2-btn { width: 100%; }

.tm2-quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 13px; }
.tm2-quick-links a { color: var(--tm-muted); font-weight: 500; }
.tm2-quick-links a:hover { color: var(--tm-brand); }

.tm2-create-form input[type="text"], .tm2-create-form select {
    width: 100%; min-height: 50px; padding: 12px 16px; margin-bottom: 10px;
    border: 1.5px solid var(--tm-border-2); border-radius: 14px; background: var(--tm-surface);
    font-size: 15px; color: var(--tm-ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-create-form input[type="text"]:focus { border-color: var(--tm-brand); box-shadow: var(--tm-ring); outline: none; }

/* ---------- Inbox ---------- */
.tm2-inbox-wrap { margin: 26px auto 0; }
.tm2-inbox-card { overflow: hidden; min-height: 280px; }
.tm2-inbox-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--tm-border);
    background: linear-gradient(180deg, var(--tm-surface), var(--tm-surface-2));
}
.tm2-inbox-head .tm2-h3 { display: flex; align-items: center; gap: 10px; }
.tm2-inbox-head .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 14px; }
.tm2-refresh-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tm-muted); font-weight: 600; }
.tm2-refresh-hint svg { animation: tm2-spin 2.2s linear infinite; }
.pause-spinner { animation-play-state: paused !important; }
@keyframes tm2-spin { to { transform: rotate(360deg); } }

.tm2-msg-cols { display: none; }
@media (min-width: 640px) {
    .tm2-msg-cols { display: flex; gap: 12px; padding: 12px 22px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tm-muted); border-bottom: 1px solid var(--tm-border); background: var(--tm-surface); }
}
.tm2-msg-cols .c-from { width: 34%; } .tm2-msg-cols .c-subj { flex: 1; } .tm2-msg-cols .c-time { width: 90px; text-align: right; }

.tm2-msg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 22px; background: var(--tm-surface); border: 0; border-bottom: 1px solid var(--tm-border); cursor: pointer; text-align: left; transition: background .15s ease; }
.tm2-msg:hover { background: var(--tm-surface-2); }
.tm2-msg:last-child { border-bottom: 0; }
.tm2-msg.unread { background: linear-gradient(90deg, rgba(79,70,229,.08), var(--tm-surface) 40%); }
.tm2-msg.unread .s-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--tm-brand); }
.tm2-msg .c-from { width: 34%; min-width: 0; }
.tm2-msg .s-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--tm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .s-mail { display: block; font-size: 12px; color: var(--tm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .c-subj { flex: 1; min-width: 0; font-size: 14px; color: var(--tm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .c-time { width: 90px; flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
    .tm2-msg { flex-wrap: wrap; }
    .tm2-msg .c-from { width: calc(100% - 100px); }
    .tm2-msg .c-subj { flex-basis: 100%; padding-left: 15px; }
}

.tm2-inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 52px 22px 56px; text-align: center; color: var(--tm-muted); }
.tm2-inbox-empty .ring { position: relative; width: 84px; height: 84px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 30px; }
.tm2-inbox-empty .ring::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(79,70,229,.35); animation: tm2-spin 14s linear infinite; }
.tm2-inbox-empty .t1 { font-size: 17px; font-weight: 700; color: var(--tm-ink-2); }
.tm2-inbox-empty .t2 { font-size: 14px; max-width: 380px; }

.tm2-detail-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--tm-border); background: var(--tm-surface-2); }
.tm2-detail-meta { padding: 20px 22px 0; }
.tm2-detail-meta .sub { font-family: var(--tm-font-display); font-size: 19px; font-weight: 600; color: var(--tm-ink); line-height: 1.35; }
.tm2-detail-meta .from { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--tm-ink-2); }
.tm2-detail-meta .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2)); color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.tm2-detail-body { padding: 14px 22px 24px; }
.tm2-detail-body iframe { width: 100%; min-height: 400px; border: 1px solid var(--tm-border); border-radius: 14px; background: #fff; }
.tm2-attach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tm2-attach a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--tm-surface-2); border: 1px solid var(--tm-border); font-size: 13px; font-weight: 600; color: var(--tm-ink-2); transition: all .18s ease; }
.tm2-attach a:hover { border-color: var(--tm-brand); color: var(--tm-brand-dark); background: var(--tm-brand-soft); }

/* ---------- Ad slots (viewability-first) ---------- */
.ad-slot-wrapper { position: relative; width: 100%; }
.ad-slot-container {
    position: relative; width: 100%; display: flex; justify-content: center; align-items: flex-start;
    background: repeating-linear-gradient(45deg, #f4f6fb 0 12px, #eef1f8 12px 24px);
    border: 1px dashed var(--tm-border-2); border-radius: var(--tm-radius);
    overflow: hidden;
}
.ad-slot-label {
    display: block; text-align: center; font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: #aab2c5; margin-bottom: 6px;
}
.ad-slot-container ins.adsbygoogle,
.ad-slot-container ins.adsbygoogle-lazy { max-width: 100%; }
.tm2-ad-inline { margin: 30px auto 0; }
.tm2-ad-band { margin: 34px auto 0; }
.tm2-ad-band .ad-slot-container { border-radius: var(--tm-radius-lg); }

/* Collapse genuinely empty ad containers only (no ins element rendered) */
.ad-slot-container:empty {
    min-height: 0 !important; height: 0; overflow: hidden; border: 0; padding: 0;
}
.tm2-collapsible-ad .ad-slot-wrapper:has(.ad-slot-container:empty) { display: none; }

/* No-fill / blocked units must not leave a big empty band. When AdSense
   reports no-fill (data-ad-status="unfilled" or the JS .is-unfilled fallback)
   collapse the whole collapsible section, not just the inner wrapper, so the
   inbox is never followed by ~450px of empty advertisement space. */
.tm2-collapsible-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.tm2-collapsible-ad:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.tm2-collapsible-ad:has(.ad-slot-wrapper.is-unfilled) {
    display: none !important;
}

/* Homepage rail ad — hidden until there is real empty margin for it. */
.tm2-rail-ad { display: none; }
/* Pinned to the empty left margin on very wide screens (>=1920px) so a 300x250
   rectangle never overlaps the centred content. Below that the fixed rail would
   sit on top of the page, so it stays hidden and the in-content/sticky units do
   the work. */
@media (min-width: 1680px) {
    .tm2-rail-ad {
        display: block;
        position: fixed;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        z-index: 40;
    }
}

/* Public/SEO page side rails — in-flow sticky columns on wide desktop viewports (>=1536px). */
.tm2-public-3col { display: block; width: 100%; }
.tm2-public-main { min-width: 0; width: 100%; }
.tm2-rail-col { display: none; }
.tm2-public-rail { display: none; }

@media (min-width: 1536px) {
    .tm2-public-3col {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr) 280px;
        max-width: 1720px;
        margin-inline: auto;
    }
    .tm2-rail-col { display: block; min-width: 0; }
    .tm2-public-rail {
        display: block;
        position: sticky;
        top: 88px;
        width: 280px;
        margin: 0 auto;
        padding-top: 12px;
    }
}
/* Side rails use a 300x250 rectangle. */
.tm2-public-rail .ad-slot-wrapper,
.tm2-rail-ad .ad-slot-wrapper { padding: 0 !important; }
.tm2-public-rail .ad-slot-container,
.tm2-rail-ad .ad-slot-container { border: 0 !important; padding: 0 !important; }

/* ---------- Content sections ---------- */
.tm2-main-grid { display: grid; gap: 26px; margin-top: 26px; }
@media (min-width: 1024px) { .tm2-main-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } }
.tm2-stack { display: grid; gap: 26px; }
.tm2-side { display: grid; gap: 22px; }
@media (min-width: 1024px) { .tm2-side { position: sticky; top: 92px; } }

.tm2-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.tm2-section-head .tm2-h2 { margin-top: 8px; }
.tm2-section-head p { margin: 8px 0 0; color: var(--tm-ink-2); max-width: 620px; }

.tm2-steps { display: grid; gap: 14px; }
@media (min-width: 768px) { .tm2-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.tm2-step { position: relative; padding: 24px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.tm2-step:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow); }
.tm2-step .num { font-family: var(--tm-font-display); font-size: 44px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .9; }
.tm2-step .tm2-h3 { margin-top: 12px; }
.tm2-step p { margin: 8px 0 0; font-size: 14px; color: var(--tm-ink-2); }

.tm2-cards { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .tm2-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tm2-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--tm-radius-lg); background: var(--tm-surface); border: 1px solid var(--tm-border); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tm2-card:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow); border-color: var(--tm-border-2); color: var(--tm-ink); }
.tm2-card .ci { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 16px; margin-bottom: 6px; }
.tm2-card .ct { font-weight: 700; font-size: 15px; color: var(--tm-ink); }
.tm2-card .cd { font-size: 13px; color: var(--tm-muted); line-height: 1.55; }

.tm2-list-panel { padding: 22px; }
.tm2-list-panel ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.tm2-list-panel ul a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--tm-ink-2); transition: all .15s ease; }
.tm2-list-panel ul a:hover { background: var(--tm-brand-soft); color: var(--tm-brand-dark); padding-left: 16px; }
.tm2-list-panel ul a i { font-size: 11px; color: var(--tm-muted); margin-left: auto; }

.tm2-faq details { border-bottom: 1px solid var(--tm-border); }
.tm2-faq details:last-child { border-bottom: 0; }
.tm2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 4px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; color: var(--tm-ink); transition: color .15s ease; }
.tm2-faq summary::-webkit-details-marker { display: none; }
.tm2-faq summary::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: var(--tm-muted); transition: transform .2s ease; flex: 0 0 auto; }
.tm2-faq details[open] summary { color: var(--tm-brand-dark); }
.tm2-faq details[open] summary::after { transform: rotate(180deg); }
.tm2-faq details p { margin: 0; padding: 0 4px 18px; font-size: 14.5px; color: var(--tm-ink-2); line-height: 1.7; }

.tm2-split { display: grid; gap: 26px; }
@media (min-width: 1024px) { .tm2-split { grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; } }

/* ---------- Footer ---------- */
.tm2-footer { margin-top: 90px; background: #0d1226; color: #b7bfd6; position: relative; overflow: hidden; }
.tm2-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tm-brand), var(--tm-brand-2), #a855f7); }
.tm2-footer-grid { display: grid; gap: 34px; padding: 60px 0 40px; }
@media (min-width: 768px) { .tm2-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.tm2-footer h4 { margin: 0 0 16px; font-family: var(--tm-font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tm2-footer a { color: #b7bfd6; font-size: 14px; }
.tm2-footer a:hover { color: #fff; }
.tm2-footer .flinks { display: grid; gap: 10px; }
.tm2-footer-brand .tm2-brand-name { color: #fff; font-size: 1.35rem; }
.tm2-footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: #93a; color: #98a1bd; max-width: 300px; }
.tm2-footer select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e7eaf5; font-size: 14px; font-weight: 600; cursor: pointer; }
.tm2-footer select option { color: #0f172a; }
.tm2-footer .fsocials { display: flex; gap: 14px; margin-top: 18px; font-size: 18px; }
.tm2-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #7e88a5; }
.tm2-footer-bottom a { color: #98a1bd; }

/* ---------- Prose / content pages ---------- */
.tm2-prose { color: var(--tm-ink-2); font-size: 16px; line-height: 1.8; }
.tm2-prose h1, .tm2-prose h2, .tm2-prose h3, .tm2-prose h4 { font-family: var(--tm-font-display); color: var(--tm-ink); line-height: 1.3; margin: 1.6em 0 .6em; letter-spacing: -.01em; }
.tm2-prose h2 { font-size: 1.55rem; } .tm2-prose h3 { font-size: 1.25rem; }
.tm2-prose p { margin: 0 0 1.15em; }
.tm2-prose a { color: var(--tm-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79,70,229,.35); }
.tm2-prose a:hover { text-decoration-color: var(--tm-brand); }
.tm2-prose ul, .tm2-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.tm2-prose li { margin-bottom: .45em; }
.tm2-prose img { border-radius: var(--tm-radius-lg); }
.tm2-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--tm-brand); color: var(--tm-ink); font-style: italic; background: var(--tm-brand-soft); border-radius: 0 14px 14px 0; padding: 14px 18px; }
.tm2-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14.5px; }
.tm2-prose th, .tm2-prose td { padding: 11px 14px; border: 1px solid var(--tm-border); text-align: left; }
.tm2-prose th { background: var(--tm-surface-2); font-weight: 700; color: var(--tm-ink); }
.tm2-prose code { font-family: var(--tm-font-mono); font-size: .88em; background: var(--tm-brand-soft); color: var(--tm-brand-dark); padding: 2px 7px; border-radius: 7px; }
.tm2-prose pre { background: #0d1226; color: #dbe2f4; padding: 18px; border-radius: var(--tm-radius-lg); overflow-x: auto; }
.tm2-prose pre code { background: none; color: inherit; padding: 0; }

/* ---------- Misc utilities ---------- */
.tm2-skip { position: fixed; top: -60px; left: 16px; z-index: 9999; background: var(--tm-ink); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 12px; font-size: 13px; font-weight: 700; transition: top .2s ease; }
.tm2-skip:focus { top: 0; color: #fff; }

.tm2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tm2-reveal.is-in { opacity: 1; transform: none; }

.tm2-skeleton { position: relative; overflow: hidden; background: #e9edf5; border-radius: 12px; }
.tm2-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: tm2-shimmer 1.4s infinite; }
@keyframes tm2-shimmer { to { transform: translateX(100%); } }

#copy-toast {
    position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 16px); z-index: 9990;
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px;
    background: var(--tm-ink); color: #fff; border-radius: 999px; box-shadow: var(--tm-shadow-lg);
    font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
#copy-toast .ok { color: #4ade80; }

.tm2-cookie { position: fixed; inset: auto 0 0 0; z-index: 9980; padding: 14px; }
.tm2-cookie-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 880px; margin-inline: auto; padding: 18px 22px; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 20px; box-shadow: var(--tm-shadow-lg); }
.tm2-cookie-inner p { margin: 0; font-size: 13.5px; color: var(--tm-ink-2); line-height: 1.6; flex: 1 1 320px; }

.tm2-imap-error { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 300px; padding: 30px; text-align: center; }
.tm2-imap-error .box { max-width: 420px; }
.tm2-imap-error .ic { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: #fef2f2; color: var(--tm-danger); font-size: 20px; }

.tm2-anchor-pad { display: none; }
/* On mobile the anchor ad sits ABOVE the 56px bottom nav, so the footer needs
   ~112px of clearance for it in addition to the bottom-nav pad. */
@media (max-width: 1023px) { body.tm2.has-anchor .tm2-anchor-pad { display: block; height: calc(112px + env(safe-area-inset-bottom, 0px)); } }

body.tm2 [x-cloak] { display: none !important; }


/* ==========================================================================
   Dark theme — toggled via <html class="tm2-dark"> (persisted in localStorage)
   Only the design tokens change; every component inherits through var().
   ========================================================================== */
html.tm2-dark { color-scheme: dark; }
html.tm2-dark body.tm2 {
    --tm-brand:        #818cf8;
    --tm-brand-2:      #a78bfa;
    --tm-brand-dark:   #c7d2fe;
    --tm-brand-soft:   rgba(129, 140, 248, .16);
    --tm-accent:       #fbbf24;
    --tm-bg:           #0a0f1e;
    --tm-surface:      #111a30;
    --tm-surface-2:    #0d1526;
    --tm-border:       #22304e;
    --tm-border-2:     #2d3f63;
    --tm-ink:          #e8edf8;
    --tm-ink-2:        #a4b1cc;
    --tm-muted:        #8492aa; /* ≥6:1 on --tm-bg (was #66748f = 4.05:1) */
    --tm-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
    --tm-shadow:       0 6px 24px -6px rgba(0, 0, 0, .5);
    --tm-shadow-lg:    0 24px 60px -12px rgba(0, 0, 0, .6);
    --tm-ring:         0 0 0 4px rgba(129, 140, 248, .25);
}
html.tm2-dark body.tm2 .tm2-cookie-inner { background: var(--tm-surface); }
html.tm2-dark body.tm2 .tm2-imap-error .ic { background: rgba(220, 38, 38, .15); }

/* Theme toggle button in the header */
.tm2-theme-toggle {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tm-border); border-radius: 12px;
    background: var(--tm-surface); color: var(--tm-ink-2);
    cursor: pointer; font-size: 15px;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.tm2-theme-toggle:hover { color: var(--tm-brand); border-color: var(--tm-brand); transform: translateY(-1px); }
.tm2-theme-toggle .fa-sun { display: none; }
html.tm2-dark .tm2-theme-toggle .fa-sun { display: inline-block; }
html.tm2-dark .tm2-theme-toggle .fa-moon { display: none; }

/* New-mail toast */
#tm2-mail-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9995;
    display: flex; align-items: center; gap: 10px;
    background: var(--tm-ink); color: var(--tm-bg);
    padding: 12px 18px; border-radius: 14px; box-shadow: var(--tm-shadow-lg);
    font-size: 14px; font-weight: 600;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
#tm2-mail-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#tm2-mail-toast .ic { color: var(--tm-brand-2); }
#tm2-mail-toast .msg { white-space: nowrap; }
#tm2-mail-toast .tm2-mail-toast-open {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 4px; padding: 6px 12px; border-radius: 999px;
    background: var(--tm-brand-2); color: #0b1020;
    font-weight: 800; text-decoration: none; white-space: nowrap;
    transition: transform .15s ease, filter .15s ease;
}
#tm2-mail-toast .tm2-mail-toast-open:hover { transform: translateY(-1px); filter: brightness(1.05); }
#tm2-mail-toast .tm2-mail-toast-open i { font-size: 11px; }
/* Keep the toast clear of the mobile bottom nav / anchor ad. */
@media (max-width: 1023px) {
    #tm2-mail-toast {
        left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        justify-content: space-between;
    }
    #tm2-mail-toast .msg { white-space: normal; }
}

/* ==========================================================================
   Inbox skeleton — matches live inbox metrics (no layout jump on swap)
   ========================================================================== */
.tm2-skel { padding: 14px 22px 22px; min-height: 300px; }
.tm2-skel-row {
    height: 58px; margin-bottom: 12px; border-radius: 14px;
    background: linear-gradient(90deg,
        var(--tm-surface-2) 25%,
        var(--tm-border) 50%,
        var(--tm-surface-2) 75%);
    background-size: 200% 100%;
    animation: tm2-skel-shimmer 1.4s ease infinite;
}
.tm2-skel-row:nth-child(2) { animation-delay: .12s; }
.tm2-skel-row:nth-child(3) { animation-delay: .24s; }
@keyframes tm2-skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.tm2-skel-noscript { margin-top: 16px; padding: 18px; text-align: center; background: #fef3c7; border-radius: 12px; }
.tm2-skel-noscript p { color: #92400e; font-weight: 600; margin: 0; }

/* ==========================================================================
   Ad slots — collapse unfilled / blocked units (no ghost vertical space)
   ========================================================================== */
/* AdSense marks no-fill units with data-ad-status="unfilled"; ad blockers
   remove the ins entirely. In both cases the wrapper must give its space
   back. The :has() rule covers modern browsers; the .is-unfilled class is
   added by nebula-v2.js as a fallback. */
.ad-slot-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-slot-wrapper:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.ad-slot-wrapper.is-unfilled {
    display: none !important;
}
.ad-slot-container:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-slot-container:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) {
    min-height: 0 !important; height: 0 !important; border: 0; padding: 0;
}
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"] { display: none !important; }

/* ---------- Copy button feedback ---------- */
.tm2-copy-btn { position: relative; min-width: 96px; justify-content: center; }
.tm2-copy-btn .tm2-copy-done { display: none; }
.tm2-copy-btn.is-copied .tm2-copy-idle { display: none; }
.tm2-copy-btn.is-copied .tm2-copy-done { display: inline-flex; align-items: center; gap: 6px; }
.tm2-copy-btn.is-copied { background: var(--tm-success); border-color: var(--tm-success); color: #fff; }

/* ---------- Inbox empty-state hint ---------- */
.tm2-inbox-empty-hint {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin-top: 14px; font-size: 13px; color: var(--tm-muted);
    background: var(--tm-surface-2); border: 1px dashed var(--tm-border-2);
    border-radius: 12px; padding: 10px 14px; max-width: 420px; margin-inline: auto;
}
.tm2-inbox-empty-hint i { color: var(--tm-brand); flex: 0 0 auto; }

/* ---------- Unread badge ---------- */
.tm2-unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px;
    border-radius: 999px; background: var(--tm-brand); color: #fff;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* ---------- Mobile refinements (Agent 07) ---------- */
@media (max-width: 639px) {
    /* Email detail: subject + delete must not overflow on narrow phones */
    .tm2-detail-meta > div:first-child { flex-wrap: wrap; }
    .tm2-detail-meta .sub { font-size: 17px; min-width: 0; flex: 1 1 auto; word-break: break-word; }
    .tm2-detail-meta .sub + .tm2-btn { flex: 0 0 auto; }

    /* Address bar: keep copy button reachable, allow email to truncate */
    .tm2-address-bar { padding-left: 14px; gap: 8px; }
    .tm2-address-bar .env { display: none; }
    .tm2-address-bar #email_id { font-size: 14px; }
    .tm2-copy-btn { min-width: 88px; }

    /* Reader iframe: comfortable reading height on phones */
    .tm2-detail-body iframe { min-height: 60vh; }

    /* Action grid: single column on very narrow phones for big touch targets */
    .tm2-action-grid { grid-template-columns: 1fr 1fr; }
    .tm2-action-grid .tm2-btn { min-height: 48px; }
}

/* ---------- Cookie banner show/hide (Tailwind .hidden/.flex utilities are purged) ---------- */
#cookie.hidden { display: none !important; }
#cookie.flex { display: block !important; }

/* ---------- Mobile menu fallback (vanilla JS, Alpine-independent) ---------- */
.tm2-mobile-menu { display: none; }
.tm2-mobile-menu.is-open { display: block; }
.tm2-mobile-backdrop { display: none; }
.tm2-mobile-backdrop.is-open { display: block; }

/* ---------- Mobile side drawer (native-app-like) ---------- */
.tm2-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(300px, 84vw); max-width: 320px;
    background: var(--tm-surface); border-right: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-lg); display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.tm2-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--tm-border);
    min-height: 60px; flex: 0 0 auto;
}
.tm2-drawer-close {
    width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--tm-surface-2);
    color: var(--tm-ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px;
}
.tm2-drawer-close:hover { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-drawer-nav { padding: 8px 12px 24px; flex: 1 1 auto; }
.tm2-drawer-group { display: flex; flex-direction: column; gap: 2px; }
.tm2-drawer-link {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 13px 12px; min-height: 48px; border: 0; border-radius: 12px;
    background: transparent; color: var(--tm-ink-2); font-size: 15px; font-weight: 600;
    text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.tm2-drawer-link i { width: 20px; text-align: center; color: var(--tm-muted); font-size: 15px; }
.tm2-drawer-link:hover { background: var(--tm-surface-2); }
.tm2-drawer-link.is-active { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-drawer-link.is-active i { color: var(--tm-brand); }
.tm2-drawer-divider { height: 1px; background: var(--tm-border); margin: 10px 4px; }
.tm2-drawer-locale { padding: 4px 12px 8px; }
.tm2-drawer-locale select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--tm-border); border-radius: 12px;
    background: var(--tm-surface-2); color: var(--tm-ink-2); font-size: 14px; font-weight: 600;
}

/* ---------- Mobile bottom navigation ---------- */
.tm2-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: stretch; justify-content: space-around;
    background: var(--tm-surface); border-top: 1px solid var(--tm-border);
    box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, .12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tm2-bottomnav-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 6px 4px; border: 0; background: transparent;
    color: var(--tm-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: color .15s ease;
}
.tm2-bottomnav-item i { font-size: 19px; }
.tm2-bottomnav-item.is-active { color: var(--tm-brand); }
.tm2-bottomnav-item:hover { color: var(--tm-brand-dark); }
.tm2-bottomnav-pad { height: calc(56px + env(safe-area-inset-bottom, 0px)); }
body.tm2-bottomnav-pad { height: auto !important; display: block !important; }
@media (min-width: 1024px) {
    .tm2-bottomnav, div.tm2-bottomnav-pad { display: none; }
}

/* ---------- Drawer vanilla fallback (Alpine-independent) ---------- */
.tm2-drawer { display: none; }
.tm2-drawer.is-open { display: flex; }
.tm2-mobile-backdrop { display: none; }
.tm2-mobile-backdrop.is-open { display: block; }

/* ---------- Overflow safety (fix actual sources, not just hide) ---------- */
html, body { max-width: 100%; }
body.tm2 { overflow-x: hidden; } /* final defensive measure after fixing sources */

/* Email reader: contain wide email HTML inside the viewport. The iframe is
   sandboxed (no allow-scripts) and width:100%, so email content cannot push
   the page wider. */
.tm2-detail-body { min-width: 0; max-width: 100%; }
.tm2-detail-body iframe { max-width: 100%; display: block; }

/* Long unbroken content must wrap, never expand the page. */
.tm2-address-bar #email_id,
.tm2-detail-meta .sub,
.tm2-prose,
.tm2-prose p,
.tm2-prose a,
.tm2-prose li,
.tm2-prose td,
.tm2-prose th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Images never exceed their container. */
.tm2-prose img,
.tm2-prose table,
.tm2-detail-body img { max-width: 100%; height: auto; }

/* Code/pre blocks scroll internally, never the page. */
.tm2-prose pre { max-width: 100%; overflow-x: auto; }

/* Flex children must be allowed to shrink. */
.tm2-main-grid > *,
.tm2-stack > *,
.tm2-split > *,
.tm2-cards > *,
.tm2-steps > * { min-width: 0; }

/* ---------- OTP / verification cards (email reader) ---------- */
.tm2-otp-card {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 18px; margin-bottom: 14px; border-radius: 16px;
    background: var(--tm-brand-soft); border: 1px solid var(--tm-border-2);
}
.tm2-otp-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); width: 100%; }
.tm2-otp-code {
    font-family: var(--tm-font-mono); font-size: 26px; font-weight: 700; letter-spacing: .12em;
    color: var(--tm-brand-dark); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.tm2-verify-card { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ---------- Cookie banner actions ---------- */
.tm2-cookie-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }

/* ==========================================================================
   Fixed-bar coordination (mobile) — one coherent stack, no dead overlays
   ========================================================================== */
/* Anchor ad: resurrect as a working mobile anchor ABOVE the bottom nav.
   Previously #ad-anchor carried `hidden` and no script ever revealed it
   (dead slot, zero impressions). Now shown on mobile only. */
#ad-anchor,
.ad-anchor {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 65; /* below cookie (9980) & toasts; above content */
    background: var(--tm-surface); border-top: 1px solid var(--tm-border);
    box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, .18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ad-anchor-inner { position: relative; max-width: 728px; margin-inline: auto; padding: 6px 10px 4px; }
.ad-anchor-close {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: rgba(15, 23, 42, .06); color: var(--tm-ink-2);
    display: grid; place-items: center; cursor: pointer;
}
html.tm2-dark body.tm2 .ad-anchor-close { background: rgba(255,255,255,.1); color: var(--tm-ink-2); }
.ad-anchor-close svg { width: 16px; height: 16px; }
.ad-anchor-unit { display: block; }

/* Spacer so content/footer is never covered */
body.tm2.has-anchor { }
.tm2-anchor-adspace { display: none; }
/* The anchor ad is a fixed bar; the space it occupies at the very end of the
   document is handled by .tm2-anchor-pad above — do not add a mid-page spacer
   (that previously left a blank band between content and the footer). */
body.tm2.has-anchor .tm2-anchor-adspace { display: none; }

/* Mobile: anchor sits ABOVE the 56px bottom nav */
@media (max-width: 1023px) {
    body.tm2.has-anchor #ad-anchor,
    body.tm2.has-anchor .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop: no bottom nav -> anchor sits at the very bottom edge */
@media (min-width: 1024px) {
    #ad-anchor, .ad-anchor { display: none; } /* anchor is a mobile-only format */
}

/* When cookie banner or app prompt is visible, they take the bottom layer;
   anchor slides up above them via body classes managed by JS. */
body.tm2.has-cookiebar #ad-anchor,
body.tm2.has-cookiebar .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 76px); }
body.tm2.has-appprompt #ad-anchor,
body.tm2.has-appprompt .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 72px); }

/* ==========================================================================
   Header redesign — 3-column desktop grid + compact mobile header
   ========================================================================== */
/* Desktop: brand | centered nav | actions — true visual centering */
@media (min-width: 1024px) {
    .tm2-header-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 68px;
        gap: 24px;
    }
    .tm2-nav { justify-self: center; }
    .tm2-header-actions { justify-self: end; }
}

/* Mobile: compact app-style bar */
@media (max-width: 1023px) {
    .tm2-header-row {
        height: 58px;
        gap: 10px;
    }
    .tm2-brand { gap: 9px; }
    .tm2-brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .tm2-brand-mark svg { width: 19px; height: 19px; }
    .tm2-brand-name { font-size: 1.08rem; }
    .tm2-header-actions { gap: 8px; }
    .tm2-theme-toggle { width: 42px; height: 42px; font-size: 16px; }
    .tm2-burger { width: 42px; height: 42px; }
    /* Secondary controls live in the drawer on mobile — header stays clean */
    .tm2-header-cta { display: none !important; }
    .tm2-locale { display: none !important; }
}

/* ==========================================================================
   Mobile overflow fixes (verified via headless Chrome at 320–430px)
   Root chain: cookie/p flex-basis 320px + actions > viewport  →  doc widens
   → all left:0/right:0 fixed bars follow, widening to doc width.
   ========================================================================== */

/* 1. Every full-width fixed bar is hard-capped to the visual viewport */
#ad-anchor, .ad-anchor, .tm2-bottomnav, #cookie, .tm2-cookie {
    max-width: 100vw;
}
.tm2-cookie-inner {
    max-width: 100%;
}
@media (max-width: 1023px) {
    /* Cookie text must be allowed to shrink instead of forcing the page wide */
    .tm2-cookie-inner p { flex: 1 1 0 !important; min-width: 0 !important; }
    .tm2-cookie-inner { padding: 14px 16px; gap: 10px; }
    .ad-anchor-inner { max-width: 100%; padding-inline: 8px; }
    #ad-anchor, .ad-anchor { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-bottomnav { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-cookie { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-cookie .tm2-cookie-actions { flex: 0 1 auto; }
}

/* Sidebar panels stack under the main flow on mobile — allow them to shrink
   (their promo link rows have inline flex styles without min-width:0) */
@media (max-width: 1023px) {
    .tm2-side .tm2-panel { min-width: 0; max-width: 100%; overflow: hidden; }
    .tm2-side .tm2-panel a[style] { min-width: 0; }
    .tm2-side .tm2-panel a[style] span:first-child { flex-shrink: 0; }
    .tm2-side .tm2-panel a[style] i { flex-shrink: 0; margin-left: auto !important; }
}

/* Global safety: no element may push the document wider than the viewport */
.tm2-main-grid, .tm2-stack, .tm2-side, .tm2-stack > *, .tm2-side > *,
.tm2-split > *, .tm2-cards > *, .tm2-steps > * {
    max-width: 100%;
}

/* Top-ten rank cards: flex children must shrink on narrow screens
   (rank-number + rank-body overflow at <560px, verified) */
.editorial-rank { min-width: 0; }
.editorial-rank .rank-number { flex: 0 0 auto; }
.editorial-rank .rank-body { min-width: 0; }
.editorial-rank .rank-body > div { min-width: 0; }
.editorial-rank .rank-body .flex.items-center { flex-wrap: wrap; gap: 10px; }
.editorial-rank .rank-title { overflow-wrap: anywhere; word-break: break-word; }
.editorial-rank .rank-meta { overflow-wrap: anywhere; }

/* Top-ten rank card inner rows: emoji icon + meta could exceed 320px cards */
.editorial-rank .rank-body .flex.items-center > div > div { min-width: 0; }
.editorial-rank .rank-body .text-xs.font-semibold { white-space: normal; overflow-wrap: anywhere; }
.editorial-rank .rank-body .text-3xl { flex: 0 0 auto; font-size: 1.75rem; line-height: 1; }
.editorial-rank .rank-body .flex.items-center { flex-wrap: wrap; }

/* ==========================================================================
   Visual polish — subtle gradients & mobile spacing (2026-08)
   ========================================================================== */
:root {
    /* Extra brand stops for richer gradients (used across hero/cards/CTAs) */
    --tm-grad-hero: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%);
    --tm-grad-card: linear-gradient(180deg, #ffffff 0%, #f6f7ff 100%);
    --tm-grad-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}
html.tm2-dark body.tm2 {
    --tm-grad-card: linear-gradient(180deg, #111a30 0%, #0e1730 100%);
    --tm-grad-hero: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

/* Richer hero backdrop (keeps existing layout, only paints) */
.tm2-hero::before {
    background:
        radial-gradient(560px 320px at 12% 18%, rgba(99, 102, 241, .20), transparent 62%),
        radial-gradient(520px 300px at 86% 10%, rgba(168, 85, 247, .16), transparent 62%),
        radial-gradient(440px 260px at 52% 48%, rgba(14, 165, 233, .08), transparent 60%);
}
.tm2-hero .tm2-h1 .grad {
    background: linear-gradient(120deg, #4f46e5 8%, #7c3aed 55%, #d946ef 98%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* Address card: subtle top-lit gradient + gradient left rail (already had). */
.tm2-address-card { background: var(--tm-grad-card); }
.tm2-address-card::before { background: var(--tm-grad-accent); }

/* Inbox panel: faint surface gradient for depth without noise */
.tm2-inbox-card { background: var(--tm-grad-card); }

/* Primary CTA + brand mark share the accent gradient for cohesion */
.tm2-btn-primary { background: var(--tm-grad-accent); }
/* Ensure white text wins over the generic `body.tm2 a` link color rule
   (which has higher specificity for <a class="tm2-btn-primary">). */
body.tm2 a.tm2-btn-primary,
body.tm2 button.tm2-btn-primary,
body.tm2 .tm2-btn-primary { color: #fff; }
body.tm2 a.tm2-btn-primary:hover { color: #fff; }
.tm2-brand-mark { background: var(--tm-grad-accent); }

/* Section eyebrows/step numbers pick up a soft accent */
.tm2-step .num {
    background: var(--tm-grad-accent);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Mobile spacing & responsiveness ---------- */
@media (max-width: 639px) {
    .tm2-section { margin-top: 34px; }
    .tm2-hero { padding: 26px 0 4px; }
    .tm2-hero .tm2-h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
    .tm2-hero-sub { font-size: 15px; margin-top: 12px; }
    .tm2-hero-chips { margin-bottom: 12px; }
    .tm2-main-grid { margin-top: 18px; gap: 18px; }
    .tm2-stack { gap: 16px; }
    .tm2-address-card { padding: 18px; border-radius: 22px; }
    .tm2-inbox-card { border-radius: 22px; }
    .tm2-ad-band, .tm2-ad-inline { margin-top: 20px; }
    .tm2-cards { gap: 12px; }
    .tm2-step { padding: 20px; }
}

/* Mobile: reduce the large footer top margin so there is no long blank
   band between content and the footer (was 90px). */
@media (max-width: 1023px) { .tm2-footer { margin-top: 40px; } }

/* ============================================================
   Dark mode for public / editorial pages (SEO guides, tools,
   directory). editorial.css is authored for a light "paper" look and
   uses --ed-* tokens plus several hardcoded white surfaces; map them
   onto the dark palette when <html> has .tm2-dark.
   ============================================================ */
html.tm2-dark {
    --ed-paper: #0a0f1e;
    --ed-paper-2: #111a30;
    --ed-ink: #e8edf8;
    --ed-muted: #a4b1cc;
    --ed-line: rgba(255, 255, 255, 0.12);
    --ed-accent: #fbbf24;
    --ed-accent-2: #a78bfa;
    --ed-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    --ed-panel: rgba(17, 26, 48, 0.82);

    /* dashboard.css tokens — its .public-panel / body rules use these with
       !important, so overriding the variables is the only way in. */
    --bg: #0a0f1e;
    --surface: #111a30;
    --surface-alt: #0d1526;
    --border: #22304e;
    --border-strong: #2d3f63;
    --ink: #e8edf8;
    --ink-2: #a4b1cc;
    --muted: #8492aa;
    --brand-light: rgba(129, 140, 248, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}

/* Page background */
html.tm2-dark body.tm2,
html.tm2-dark .public-shell {
    background: linear-gradient(180deg, #0a0f1e 0%, #0d1526 48%, #0a1120 100%);
    background-attachment: fixed;
    color: var(--ed-ink);
}
html.tm2-dark .public-shell::before,
html.tm2-dark .public-shell::after { opacity: .4; }

/* Hardcoded light surfaces inside the editorial components */
html.tm2-dark .public-chip,
html.tm2-dark .editorial-chip,
html.tm2-dark .editorial-card,
html.tm2-dark .editorial-faq,
html.tm2-dark .editorial-rank,
html.tm2-dark .editorial-hero-image,
html.tm2-dark .editorial-chip--muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ed-line);
    color: var(--ed-ink);
}
html.tm2-dark .editorial-search {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ed-line);
}
html.tm2-dark .editorial-search input {
    background: transparent;
    color: var(--ed-ink);
}
html.tm2-dark .editorial-search input::placeholder { color: var(--ed-muted); }
html.tm2-dark .editorial-search svg { color: var(--ed-muted); }
html.tm2-dark .editorial-cta--ghost { color: var(--ed-ink); border-color: var(--ed-line); }
html.tm2-dark .editorial-cta--ghost:hover { background: rgba(255, 255, 255, 0.1); }
html.tm2-dark .editorial-faq summary { color: var(--ed-ink); }
html.tm2-dark .editorial-faq-body { color: var(--ed-muted); }
html.tm2-dark .public-panel { color: var(--ed-ink); }

/* Ad placeholders should not glare white in dark mode */
html.tm2-dark .ad-slot-container {
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, rgba(255,255,255,.045) 12px 24px);
    border-color: var(--ed-line);
}
html.tm2-dark .ad-slot-label { color: var(--ed-muted); }

/* Tailwind light utilities used inside the editorial/public markup
   (e.g. the "Why people use this page" feature cards use bg-white/65). */
html.tm2-dark .public-shell [class*="bg-white"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
html.tm2-dark .public-shell [class*="border-black/"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.tm2-dark .public-shell .text-gray-900 { color: #eef2fb !important; }
html.tm2-dark .public-shell .text-gray-800 { color: #e2e8f5 !important; }
html.tm2-dark .public-shell .text-gray-700 { color: #cdd6e8 !important; }
html.tm2-dark .public-shell .text-gray-600 { color: #a4b1cc !important; }
html.tm2-dark .public-shell .text-gray-500 { color: #8b98b0 !important; }
html.tm2-dark .public-shell .text-gray-400 { color: #6f7d97 !important; }

/* ==========================================================================
   Responsive Service Screens (/temp-mail-for/*, /services, /top-ten)
   Clean, unified Nebula v2 layout across Mobile, Tablet, Laptop & Desktop.
   ========================================================================== */

.tm2-service-wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding: 20px 16px 48px;
}
@media (min-width: 640px) {
    .tm2-service-wrap { padding: 28px 24px 56px; }
}
@media (min-width: 1024px) {
    .tm2-service-wrap { padding: 36px 28px 64px; }
}

/* Service Hero Banner */
.tm2-service-hero {
    background: var(--tm-grad-card, var(--tm-surface));
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 18px;
    margin-bottom: 22px;
}
@media (min-width: 640px) {
    .tm2-service-hero { padding: 26px 28px; margin-bottom: 26px; }
}
@media (min-width: 1024px) {
    .tm2-service-hero { padding: 30px 34px; margin-bottom: 28px; }
}

.tm2-service-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.tm2-service-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tm2-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    border: 1px solid rgba(79, 70, 229, 0.14);
}
.tm2-service-badge--live {
    background: rgba(22, 163, 74, 0.1);
    color: var(--tm-success);
    border-color: rgba(22, 163, 74, 0.2);
}

.tm2-service-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
@media (min-width: 640px) {
    .tm2-service-head { gap: 18px; }
}
.tm2-service-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
}
@media (min-width: 640px) {
    .tm2-service-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 30px;
    }
}
.tm2-service-title-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-service-title {
    font-family: var(--tm-font-display);
    font-size: clamp(1.35rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tm2-service-sub {
    margin: 10px 0 0;
    font-size: clamp(0.92rem, 1.4vw, 1.04rem);
    line-height: 1.65;
    color: var(--tm-ink-2);
    max-width: 780px;
}

/* Main 2-column Service Layout (Main + 340px Sidebar on >=1024px) */
.tm2-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (min-width: 1024px) {
    .tm2-service-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
    }
}
@media (min-width: 1280px) {
    .tm2-service-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 32px;
    }
}
.tm2-service-main,
.tm2-service-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 100%;
}
@media (min-width: 768px) {
    .tm2-service-main,
    .tm2-service-side { gap: 24px; }
}
@media (min-width: 1024px) {
    .tm2-service-side {
        position: sticky;
        top: 88px;
    }
}

/* Service Content Panel */
.tm2-service-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 18px;
    min-width: 0;
    overflow: hidden;
}
@media (min-width: 640px) {
    .tm2-service-card { padding: 24px 26px; }
}
@media (min-width: 1024px) {
    .tm2-service-card { padding: 28px 30px; }
}

/* Feature Checklist inside Service Page */
.tm2-feature-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tm-ink);
}
.tm2-feature-item i {
    color: var(--tm-success);
    font-size: 14px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Related Service Compact Links */
.tm2-related-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-related-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink);
    text-decoration: none;
    transition: all 0.18s ease;
    min-width: 0;
}
.tm2-related-item:hover {
    border-color: var(--tm-brand);
    background: var(--tm-brand-soft);
    transform: translateY(-1px);
}
.tm2-related-item .r-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 auto;
}
.tm2-related-item .r-body {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-related-item .r-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--tm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm2-related-item .r-desc {
    font-size: 12px;
    color: var(--tm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.tm2-related-item .r-arrow {
    color: var(--tm-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

/* Directory & Featured Service Cards (/services) */
.tm2-dir-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 640px) {
    .tm2-dir-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (min-width: 1024px) {
    .tm2-dir-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

.tm2-dir-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-radius: 18px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    color: var(--tm-ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
}
.tm2-dir-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-dir-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.tm2-dir-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
.tm2-dir-card-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-dir-card-desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-dir-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-border);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-muted);
}
.tm2-dir-card-foot .cta {
    color: var(--tm-brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Top 10 Rank Cards (/top-ten) */
.tm2-rank-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 768px) {
    .tm2-rank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
.tm2-rank-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    color: var(--tm-ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
}
@media (min-width: 640px) {
    .tm2-rank-card { padding: 20px 22px; gap: 16px; }
}
.tm2-rank-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-rank-badge {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.tm2-rank-body {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-rank-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tm2-rank-icon {
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}
.tm2-rank-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-rank-views {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tm-muted);
    margin-top: 2px;
}
.tm2-rank-desc {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Directory Letter Accordion */
.tm2-letter-group {
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    border-radius: 18px;
    padding: 14px 16px;
    transition: border-color 0.15s ease;
}
@media (min-width: 640px) {
    .tm2-letter-group { padding: 16px 20px; }
}
.tm2-letter-group[open] {
    background: var(--tm-surface);
    border-color: var(--tm-border-2);
}
.tm2-letter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}
.tm2-letter-summary::-webkit-details-marker { display: none; }
.tm2-letter-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.tm2-letter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--tm-ink-2);
}

/* Internal Links 2-col Grid inside Service Page */
.tm2-explore-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 14px;
}
@media (min-width: 640px) {
    .tm2-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-explore-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tm-ink-2);
    text-decoration: none;
    transition: all 0.15s ease;
    min-width: 0;
}
.tm2-explore-link:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-explore-link span.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive fixes for editorial-prose on small/medium screens */
@media (max-width: 639px) {
    .editorial-prose { font-size: 0.96rem; line-height: 1.72; }
    .editorial-prose h2 { font-size: 1.35rem; margin-top: 1.75rem; }
    .editorial-prose h3 { font-size: 1.15rem; }
    .editorial-faq { padding: 14px 16px; border-radius: 14px; }
    .editorial-faq summary { font-size: 0.96rem; }
}

/* ==========================================================================
   BLOG INDEX, SINGLE ARTICLE & COMMENTS (Responsive Mobile / Tablet / Laptop)
   ========================================================================== */

/* Featured Blog Card on /blog */
.tm2-blog-featured {
    display: flex;
    flex-direction: column;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
}
.tm2-blog-featured:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-blog-featured-media {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--tm-brand) 0%, #0d9488 100%);
    overflow: hidden;
    display: block;
}
@media (min-width: 640px) {
    .tm2-blog-featured-media { height: 260px; }
}
@media (min-width: 1024px) {
    .tm2-blog-featured-media { height: 300px; }
}
.tm2-blog-featured-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.tm2-blog-featured:hover .tm2-blog-featured-media img {
    transform: scale(1.02);
}
.tm2-blog-featured-body {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 640px) {
    .tm2-blog-featured-body { padding: 26px 28px; gap: 12px; }
}
.tm2-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-muted);
}
.tm2-blog-featured-title {
    font-family: var(--tm-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.28;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-blog-featured-title a {
    color: inherit;
    text-decoration: none;
}
.tm2-blog-featured-title a:hover {
    color: var(--tm-brand);
}
.tm2-blog-featured-excerpt {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--tm-ink-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Posts 2-Col Grid inside Main Column */
.tm2-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
@media (min-width: 640px) {
    .tm2-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

.tm2-blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    box-shadow: var(--tm-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
    height: 100%;
}
.tm2-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-blog-card-thumb {
    display: block;
    width: 100%;
    height: 165px;
    background: var(--tm-surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.tm2-blog-card:hover .tm2-blog-card-thumb img {
    transform: scale(1.03);
}
.tm2-blog-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
@media (min-width: 640px) {
    .tm2-blog-card-body { padding: 20px 22px; }
}
.tm2-blog-card-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    color: var(--tm-ink);
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-blog-card-title a {
    color: inherit;
    text-decoration: none;
}
.tm2-blog-card-title a:hover {
    color: var(--tm-brand);
}
.tm2-blog-card-excerpt {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tm-ink-2);
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-muted);
}
.tm2-blog-card-foot .read-cta {
    color: var(--tm-brand);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Single Blog Article Container & Rich Typography */
.tm2-blog-article {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 16px;
    min-width: 0;
    overflow: hidden;
}
@media (min-width: 640px) {
    .tm2-blog-article { padding: 28px 30px; }
}
@media (min-width: 1024px) {
    .tm2-blog-article { padding: 36px 40px; }
}

.tm2-blog-hero-img {
    margin: 20px 0 24px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
}
.tm2-blog-hero-img img {
    width: 100% !important;
    max-height: 440px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.tm2-blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    margin: 16px 0 20px;
    border-top: 1px solid var(--tm-border);
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    color: var(--tm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tm2-blog-share-btn:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}

/* Rich Blog Body Typography (.tm2-blog-prose) */
.tm2-blog-prose {
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--tm-ink-2);
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (min-width: 640px) {
    .tm2-blog-prose { font-size: 16.5px; line-height: 1.82; }
}
.tm2-blog-prose > *:first-child { margin-top: 0; }
.tm2-blog-prose p { margin: 1.15em 0; }
.tm2-blog-prose h1,
.tm2-blog-prose h2,
.tm2-blog-prose h3,
.tm2-blog-prose h4 {
    font-family: var(--tm-font-display);
    color: var(--tm-ink);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    scroll-margin-top: 90px;
}
.tm2-blog-prose h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    margin: 2em 0 0.65em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-prose h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    margin: 1.6em 0 0.5em;
}
.tm2-blog-prose h4 {
    font-size: 1.05rem;
    margin: 1.4em 0 0.4em;
}
.tm2-blog-prose a {
    color: var(--tm-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tm2-blog-prose a:hover { color: var(--tm-brand-dark); }
.tm2-blog-prose strong, .tm2-blog-prose b {
    color: var(--tm-ink);
    font-weight: 700;
}
.tm2-blog-prose ul, .tm2-blog-prose ol {
    margin: 1.1em 0;
    padding-left: 1.4em;
}
.tm2-blog-prose ul { list-style-type: disc; }
.tm2-blog-prose ol { list-style-type: decimal; }
.tm2-blog-prose li { margin: 0.45em 0; }
.tm2-blog-prose blockquote {
    margin: 1.5em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--tm-brand);
    background: var(--tm-surface-2);
    border-radius: 0 14px 14px 0;
    color: var(--tm-ink);
    font-style: italic;
}
.tm2-blog-prose code {
    font-family: var(--tm-font-mono);
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-brand-dark);
}
.tm2-blog-prose pre {
    margin: 1.4em 0;
    padding: 16px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.6;
}
.tm2-blog-prose pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}
.tm2-blog-prose img, .tm2-blog-prose video, .tm2-blog-prose iframe {
    max-width: 100% !important;
    height: auto;
    border-radius: 14px;
    margin: 1.4em auto;
    display: block;
}
.tm2-blog-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
    display: block;
    overflow-x: auto;
}
.tm2-blog-prose th, .tm2-blog-prose td {
    padding: 10px 12px;
    border: 1px solid var(--tm-border);
    text-align: left;
}
.tm2-blog-prose th {
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-weight: 700;
}

/* Table of Contents Box */
.tm2-blog-toc-box {
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.tm2-blog-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.tm2-blog-toc-list a {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid var(--tm-border-2);
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--tm-ink-2);
    text-decoration: none;
    border-radius: 0 8px 8px 0;
    transition: all 0.15s ease;
}
.tm2-blog-toc-list a:hover,
.tm2-blog-toc-list a.is-active {
    color: var(--tm-brand);
    font-weight: 700;
    border-left-color: var(--tm-brand);
    background: var(--tm-brand-soft);
}

/* Sidebar Search & Category Lists */
.tm2-blog-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tm2-blog-search-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--tm-border-2);
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tm2-blog-search-input:focus {
    border-color: var(--tm-brand);
    background: var(--tm-surface);
    box-shadow: 0 0 0 3px var(--tm-brand-soft);
}
.tm2-blog-cat-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tm2-blog-cat-list li {
    margin: 0;
    padding: 0;
}
.tm2-blog-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tm2-blog-cat-list a:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-blog-cat-list ul {
    list-style: none;
    padding-left: 14px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Author Card */
.tm2-blog-author {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    box-shadow: var(--tm-shadow-sm);
}
.tm2-blog-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tm-brand), #0d9488);
    color: #fff;
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Comments & Comment Form */
.tm2-comment-card {
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.tm2-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 6px;
}
.tm2-comment-time {
    font-size: 12px;
    font-weight: 500;
    color: var(--tm-muted);
}
.tm2-comment-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tm-ink-2);
    margin: 0;
}
.add_comment_area {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--tm-border);
}
.add_comment_area .form-group {
    margin-bottom: 14px;
}
.add_comment_area label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 6px;
}
.add_comment_area label small {
    font-weight: 500;
    color: var(--tm-muted);
}
.add_comment_area .form-control {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--tm-border-2);
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.add_comment_area .form-control:focus {
    border-color: var(--tm-brand);
    background: var(--tm-surface);
    box-shadow: 0 0 0 3px var(--tm-brand-soft);
}
.add_comment_area .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 640px) {
    .add_comment_area .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.add_comment_area input[type="submit"] {
    width: auto !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    background: var(--tm-brand) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: 0 !important;
    cursor: pointer;
}
.add_comment_area input[type="submit"]:hover {
    background: var(--tm-brand-dark) !important;
}

/* Pagination */
.tm2-pagination nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tm2-pagination a,
.tm2-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.tm2-pagination a {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink);
}
.tm2-pagination a:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
}
.tm2-pagination svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Homescreen & Live Inbox Workspace Overhaul (Mobile, Tablet, Laptop, Desktop)
   ========================================================================== */

/* 1. Above-the-fold Hero & Workspace spacing */
.tm2-home-top {
    margin-top: 0;
}
.tm2-home-top .tm2-hero {
    padding: 20px 0 8px;
}
@media (min-width: 768px) {
    .tm2-home-top .tm2-hero {
        padding: 28px 0 12px;
    }
}
@media (min-width: 1280px) {
    .tm2-home-top .tm2-hero {
        padding: 34px 0 14px;
    }
}
.tm2-home-top .tm2-hero-inner {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}
.tm2-home-top .tm2-hero-chips {
    margin-bottom: 14px;
}
.tm2-home-top .tm2-h1 {
    font-size: clamp(1.65rem, 3.4vw, 2.75rem);
    line-height: 1.15;
}
.tm2-home-top .tm2-hero-sub {
    margin: 12px auto 0;
    max-width: 680px;
    font-size: clamp(0.92rem, 1.35vw, 1.05rem);
    line-height: 1.6;
}
.tm2-home-top .tm2-main-grid {
    margin-top: 18px;
}
@media (min-width: 768px) {
    .tm2-home-top .tm2-main-grid {
        margin-top: 22px;
    }
}

/* 2. Address Generator Card & Click-to-Copy Bar */
.tm2-env-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
    border: 1px solid rgba(79, 70, 229, 0.14);
}
.tm2-inbox-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    border: 1px solid rgba(79, 70, 229, 0.16);
}
.tm2-address-bar {
    padding: 8px 8px 8px 12px;
    gap: 12px;
    background: var(--tm-surface);
    border: 1.5px solid var(--tm-border-2);
    border-radius: 16px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.tm2-address-bar:hover {
    border-color: var(--tm-brand);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10);
}
@media (max-width: 479px) {
    .tm2-address-bar {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 10px;
    }
    .tm2-address-bar #email_id {
        width: calc(100% - 52px);
        font-size: 14.5px;
    }
    .tm2-address-bar .tm2-copy-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* 3. Custom Address Builder Row */
.tm2-custom-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 640px) {
    .tm2-custom-row {
        flex-direction: row;
        align-items: stretch;
    }
}
.tm2-custom-input-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-custom-domain-wrap {
    position: relative;
    flex: 0 0 auto;
}
@media (min-width: 640px) {
    .tm2-custom-domain-wrap {
        width: 220px;
    }
}
.tm2-custom-input-wrap input[type="text"],
.tm2-custom-domain-wrap select {
    margin-bottom: 0 !important;
    height: 48px;
    min-height: 48px;
    font-family: var(--tm-font-mono);
    font-size: 14px;
    font-weight: 600;
}
.tm2-custom-domain-wrap select {
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.tm2-select-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--tm-muted);
    pointer-events: none;
}
.tm2-custom-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* 4. Multi-Inbox Switcher Pills */
.tm2-multi-inboxes {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--tm-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tm2-multi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
}
.tm2-multi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.tm2-multi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 600;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    cursor: pointer;
    max-width: 220px;
    transition: all 0.15s ease;
}
.tm2-multi-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm2-multi-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tm-muted);
    flex: 0 0 auto;
}
.tm2-multi-pill:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
}
.tm2-multi-pill.is-active {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-multi-pill.is-active .dot {
    background: var(--tm-success);
}

/* 5. QR Code Inline Drawer */
.tm2-qr-drawer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tm-border);
}
.tm2-qr-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
}
@media (max-width: 479px) {
    .tm2-qr-box {
        flex-direction: column;
        text-align: center;
    }
}
.tm2-qr-img {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    background: #ffffff;
    padding: 6px;
    border: 1px solid var(--tm-border);
    flex: 0 0 auto;
}
.tm2-qr-meta {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-qr-title {
    font-family: var(--tm-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 4px;
}
.tm2-qr-sub {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tm-ink-2);
}
.tm2-btn.is-active {
    border-color: var(--tm-brand);
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
}

/* 6. Live Inbox Header, Manual Refresh Button & Message Avatars */
.tm2-msg-total-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--tm-brand);
    color: #ffffff;
}
.tm2-inbox-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tm2-inbox-refresh-btn:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
    background: var(--tm-brand-soft);
}
.tm2-inbox-refresh-btn svg {
    animation: tm2-spin 2.2s linear infinite;
    color: var(--tm-brand);
}

.tm2-msg-from-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.tm2-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(79, 70, 229, 0.15);
}
.tm2-msg-from-text {
    min-width: 0;
    flex: 1 1 0;
}
.tm2-msg-arrow {
    color: var(--tm-muted);
    font-size: 11px;
    margin-left: 6px;
    transition: transform 0.15s ease, color 0.15s ease;
}
.tm2-msg:hover .tm2-msg-arrow {
    transform: translateX(3px);
    color: var(--tm-brand);
}
@media (max-width: 639px) {
    .tm2-msg .c-subj {
        padding-left: 47px;
        margin-top: 2px;
    }
}

/* 7. Empty Inbox 3-Step Pills */
.tm2-empty-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.tm2-empty-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-ink-2);
}
.tm2-empty-step .n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 8. Tablet 2-Column Sidebar Grid & Step Icon */
.tm2-side-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-side-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-step-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* 9. FontAwesome 6 Compatibility for FAQ Chevrons */
.tm2-faq summary::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
}

/* 10. Dark Mode Refinements for New Homescreen Components */
html.tm2-dark .tm2-address-bar {
    background: rgba(15, 23, 42, 0.65);
    border-color: var(--tm-border-2);
}
html.tm2-dark .tm2-inbox-refresh-btn,
html.tm2-dark .tm2-multi-pill,
html.tm2-dark .tm2-empty-step,
html.tm2-dark .tm2-qr-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--tm-border);
}
html.tm2-dark .tm2-msg-avatar,
html.tm2-dark .tm2-env-badge {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.25);
}
html.tm2-dark .tm2-inbox-count-pill,
html.tm2-dark .tm2-multi-pill.is-active {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.4);
}