/*
Theme Name: MindHack
Theme URI: https://geturl.in
Author: AlgorithmDevZ
Author URI: https://website4sell.com
Description: Clean, professional psychology & manipulation tactics blog theme. White editorial design with navy/blue accent. Built on GeneratePress.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: link-shortner
Tags: light, one-column, two-columns, custom-colors, custom-menu, featured-images, full-width-template, sticky-post, theme-options, translation-ready
Template: generatepress
*/

/* Google Fonts loaded via wp_enqueue_style in functions.php */

:root {
    --mh-bg:       #ffffff;
    --mh-bg2:      #f7f8fc;
    --mh-bg3:      #eef0f7;
    --mh-border:   #e4e7f0;
    --mh-border2:  #cdd1e0;
    --mh-navy:     #1a0505;
    --mh-blue:     #dc2626;
    --mh-blue2:    #b91c1c;
    --mh-blue-lt:  #fff1f2;
    --mh-blue-ltr: #ffe4e6;
    --mh-teal:     #0ea5e9;
    --mh-purple:   #7c3aed;
    --mh-amber:    #f59e0b;
    --mh-text:     #1a1a1a;
    --mh-body:     #334155;
    --mh-muted:    #64748b;
    --mh-faint:    #94a3b8;
    --mh-r:        8px;
    --mh-rl:       12px;
    --mh-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mh-serif:    'Playfair Display', Georgia, serif;
    --mh-mono:     'JetBrains Mono','Fira Code',monospace;
    --mh-ease:     0.15s ease;
    --mh-px:       16px;
    --mh-max:      1120px;
    --mh-shadow:   0 1px 4px rgba(26,5,5,0.07), 0 4px 16px rgba(26,5,5,0.05);
    --mh-shadow2:  0 2px 12px rgba(220,38,38,0.12), 0 8px 32px rgba(26,5,5,0.10);
}

*, *::before, *::after { box-sizing: border-box }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }
body {
    background: var(--mh-bg) !important;
    color: var(--mh-body) !important;
    font-family: var(--mh-font) !important;
    font-size: 15px; line-height: 1.7; margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--mh-blue); text-decoration: none }
a:hover { text-decoration: none }
::selection { background: rgba(220,38,38,0.12); color: var(--mh-text) }
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--mh-bg2) }
::-webkit-scrollbar-thumb { background: var(--mh-border2); border-radius: 5px }
::-webkit-scrollbar-thumb:hover { background: var(--mh-blue) }

/* GP RESET */
.site-content, #page, .grid-container { background: transparent !important }
.grid-container {
    max-width: var(--mh-max) !important; padding-left: var(--mh-px) !important;
    padding-right: var(--mh-px) !important; width: 100% !important; margin: 0 auto !important;
    box-sizing: border-box !important; overflow-x: hidden !important;
}
#page .grid-container { padding-top: 0 !important; padding-bottom: 0 !important }
@media(max-width:899px) {
    .single #content .grid-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* TOP TICKER */
.mh-ticker {
    background: var(--mh-navy); color: rgba(255,255,255,0.65);
    font-size: 0.71rem; font-weight: 500; letter-spacing: 0.02em;
    padding: 7px var(--mh-px); display: flex; align-items: center;
    justify-content: space-between; gap: 12px; overflow: hidden;
}
.mh-ticker-label {
    background: var(--mh-blue); color: #fff; padding: 2px 8px;
    border-radius: 4px; font-size: 0.65rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.mh-ticker-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.mh-ticker-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 0.7rem; color: rgba(255,255,255,0.4) }
@media(max-width:600px) { .mh-ticker-right { display: none } }

/* HEADER */
.site-header {
    background: #fff !important; border-bottom: 1px solid var(--mh-border) !important;
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
    box-shadow: 0 1px 0 var(--mh-border), 0 2px 8px rgba(26,5,5,0.05) !important;
}
.mh-hdr-inner {
    max-width: var(--mh-max); margin: 0 auto; padding: 0 var(--mh-px);
    display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 12px;
}
.site-branding { flex-shrink: 0 }
.site-title, .site-branding .site-title {
    font-size: 1.15rem !important; font-weight: 900 !important; letter-spacing: -0.04em !important;
    margin: 0 !important; line-height: 1 !important; font-family: var(--mh-font) !important;
}
.site-title a, .site-branding .site-title a {
    color: var(--mh-navy) !important; text-decoration: none !important;
    display: flex !important; align-items: center !important;
}
.mh-logo-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; image-rendering: auto; margin-right: 2px; }
.logo-accent { color: var(--mh-blue) }
.site-description { display: none !important }

/* Mobile nav toggle */
.menu-toggle, button.menu-toggle {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 38px !important; height: 38px !important; padding: 0 !important;
    background: var(--mh-bg2) !important; color: var(--mh-navy) !important;
    border: 1px solid var(--mh-border) !important; border-radius: var(--mh-r) !important;
    cursor: pointer !important; flex-shrink: 0 !important; transition: background var(--mh-ease) !important;
}
.menu-toggle:hover, button.menu-toggle:hover { background: var(--mh-bg3) !important }

/* Nav */
.main-navigation, .nav-primary { background: transparent !important }
.main-navigation ul, .nav-primary ul { display: none !important; list-style: none !important; margin: 0 !important; padding: 0 !important }

.main-navigation.toggled ul#primary-menu,
.nav-primary.toggled ul#primary-menu {
    display: flex !important; flex-direction: column !important; gap: 1px !important;
    position: fixed !important; top: 58px !important; left: 0 !important; right: 0 !important;
    background: #fff !important; border-bottom: 1px solid var(--mh-border) !important;
    padding: 10px var(--mh-px) 14px !important; z-index: 999 !important;
    box-shadow: 0 8px 24px rgba(26,5,5,0.12) !important;
    max-height: calc(100dvh - 58px) !important; overflow-y: auto !important;
}
.main-navigation ul li a, .nav-primary ul li a {
    display: block !important; color: var(--mh-body) !important; font-size: 0.875rem !important;
    font-weight: 600 !important; padding: 9px 12px !important; border-radius: 8px !important;
    text-decoration: none !important; transition: color var(--mh-ease), background var(--mh-ease) !important;
}
.main-navigation ul li a:hover, .nav-primary ul li a:hover { color: var(--mh-blue) !important; background: var(--mh-blue-lt) !important }
.main-navigation ul li.current-menu-item > a, .nav-primary ul li.current-menu-item > a { color: var(--mh-blue) !important; background: var(--mh-blue-lt) !important }
.main-navigation ul ul, .nav-primary ul ul {
    position: static !important; background: var(--mh-bg2) !important; border: none !important;
    border-radius: 8px !important; margin: 2px 0 2px 12px !important; padding: 4px 0 !important;
    display: none !important; min-width: 0 !important;
}
.main-navigation ul li:hover > ul, .nav-primary ul li:hover > ul,
.main-navigation ul li.focus > ul, .nav-primary ul li.focus > ul { display: block !important }

@media(min-width:769px) {
    .menu-toggle, button.menu-toggle { display: none !important }
    .main-navigation ul, .nav-primary ul {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 2px !important; position: static !important; background: transparent !important;
        border: none !important; padding: 0 !important; box-shadow: none !important; max-height: none !important;
    }
    .main-navigation ul li, .nav-primary ul li { position: relative !important }
    .main-navigation ul ul, .nav-primary ul ul {
        position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important;
        background: #fff !important; border: 1px solid var(--mh-border) !important;
        border-radius: var(--mh-r) !important; margin: 0 !important; padding: 4px !important;
        min-width: 180px !important; box-shadow: var(--mh-shadow2) !important;
    }
}

/* Header CTA */
.mh-hdr-cta { flex-shrink: 0; display: none }
@media(min-width:700px) { .mh-hdr-cta { display: flex; align-items: center; gap: 8px } }
.mh-subscribe-btn {
    background: var(--mh-blue); color: #fff !important; font-size: 0.78rem; font-weight: 700;
    padding: 7px 15px; border-radius: 20px; text-decoration: none; letter-spacing: 0.01em;
    transition: background var(--mh-ease), transform var(--mh-ease); white-space: nowrap;
}
.mh-subscribe-btn:hover { background: var(--mh-blue2); transform: translateY(-1px) }

/* HERO BANNER */
/* ── Hero: deep professional dark with geometric grid ── */
/* ── Hero: 2D Professional Art — "Architecture of Mind" blueprint style ── */
.mh-hero {
    position: relative; overflow: hidden;
    padding: 68px var(--mh-px) 58px; text-align: center;
    background: #080c18;
    min-height: 360px;
    display: flex; align-items: center;
}
/* Fine blueprint dot-grid overlay */
.mh-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, rgba(99,102,241,0.22) 1px, transparent 1px);
    background-size: 36px 36px;
}
/* Vignette — keeps centre text legible against the art */
.mh-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(ellipse 65% 100% at 50% 50%, transparent 0%, rgba(8,12,24,0.52) 100%),
        radial-gradient(ellipse 45% 80% at 18% 50%, rgba(8,12,24,0.70) 0%, transparent 70%);
}
/* SVG illustration canvas */
.mh-hero-art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
/* SVG line-drawing animations */
@keyframes mh-art-trace  { from { stroke-dashoffset: 1200 } to { stroke-dashoffset: 0 } }
@keyframes mh-art-trace2 { from { stroke-dashoffset: 900  } to { stroke-dashoffset: 0 } }
@keyframes mh-art-flow   { from { stroke-dashoffset: 300  } to { stroke-dashoffset: 0 } }
@keyframes mh-art-float  { 0%,100%{transform:translateY(0) rotate(0deg)}   50%{transform:translateY(-8px) rotate(3deg)} }
@keyframes mh-art-float2 { 0%,100%{transform:translateY(0) rotate(0deg)}   50%{transform:translateY(-9px) rotate(-2deg)} }
@keyframes mh-art-ring   { 0%,100%{opacity:.40;transform:scale(1)}          50%{opacity:.20;transform:scale(1.04)} }
@keyframes mh-art-spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.mh-art-trace  { animation: mh-art-trace  4.0s ease-out forwards }
.mh-art-trace2 { animation: mh-art-trace2 5.0s 0.5s ease-out forwards }
.mh-art-flow   { animation: mh-art-flow   8s linear infinite }
.mh-art-float  { animation: mh-art-float  6.0s ease-in-out infinite }
.mh-art-float2 { animation: mh-art-float2 7.5s 1s ease-in-out infinite }
.mh-art-ring   { animation: mh-art-ring   4.0s ease-in-out infinite; transform-box: fill-box; transform-origin: center }
.mh-art-spin   { animation: mh-art-spin  30s linear infinite; transform-box: fill-box; transform-origin: 1050px 210px }
.mh-hero-inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto }

/* Label badge — frosted glass */
.mh-hero-label {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 5px 14px; border-radius: 20px;
    font-family: 'Syne', var(--mh-font);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.7); margin-bottom: 18px;
}
.mh-hero-label span {
    width: 5px; height: 5px; border-radius: 50%;
    background: #818cf8; display: inline-block;
    box-shadow: 0 0 6px rgba(129,140,248,0.8);
    animation: mh-blink 2s infinite;
}
@keyframes mh-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

/* Hero title — two-line typographic treatment */
.mh-hero-title {
    font-family: var(--mh-serif);
    line-height: 1.08; margin: 0 0 16px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mh-title-top {
    display: block;
    font-family: 'Syne', var(--mh-font);
    font-size: clamp(0.8rem, 2.2vw, 1.05rem);
    font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-bottom: 6px;
}
.mh-hero-title em {
    display: block; font-style: italic;
    font-family: var(--mh-serif);
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fbbf24 0%, #fb923c 38%, #f43f5e 75%, #c026d3 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; text-fill-color: transparent;
    filter: drop-shadow(0 2px 24px rgba(251,146,60,0.22));
}

/* Sub text & stats */
.mh-hero-sub {
    color: rgba(255,255,255,0.52); font-size: 0.875rem; line-height: 1.65;
    margin: 0 auto 24px; max-width: 480px; font-style: normal; letter-spacing: 0.01em;
}
.mh-hero-stats { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap }
.mh-hero-stat { text-align: center }
.mh-hero-stat-num {
    display: block; font-size: 1.4rem; font-weight: 800;
    color: #fff; line-height: 1; margin-bottom: 4px;
    font-family: 'Syne', var(--mh-font);
}
.mh-hero-stat-label { font-size: 0.63rem; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600 }
.mh-hero-divider { width: 1px; height: 32px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent) }

/* CATEGORY NAV BAR */
.mh-cat-bar {
    background: #fff; border-bottom: 1px solid var(--mh-border);
    position: static; z-index: 90;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.mh-cat-bar::-webkit-scrollbar { display: none }
.mh-cat-bar-inner {
    max-width: var(--mh-max); margin: 0 auto; padding: 0 var(--mh-px);
    display: flex; align-items: center; gap: 0; min-height: 44px; white-space: nowrap;
}
.mh-cat-pill {
    color: var(--mh-muted); font-size: 0.78rem; font-weight: 600; padding: 10px 14px;
    border-bottom: 2px solid transparent; text-decoration: none;
    transition: color var(--mh-ease), border-color var(--mh-ease);
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.mh-cat-pill:hover { color: var(--mh-blue); border-bottom-color: var(--mh-blue-ltr) }
.mh-cat-pill.active { color: var(--mh-blue); border-bottom-color: var(--mh-blue) }

/* LAYOUT GRID */
.s2u-layout {
    display: grid; grid-template-columns: 1fr; gap: 0;
    padding: 0 0 48px; align-items: start; width: 100%;
    /* Prevent grid from expanding wider than viewport */
    min-width: 0; max-width: 100%; overflow: hidden;
}
@media(min-width:900px) {
    .s2u-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: 28px 0 48px }
    .s2u-layout:not(.has-sidebar) { padding: 24px 0 48px }
}
/* Grid children MUST have min-width:0 or they expand the grid beyond the viewport
   when they contain wide content like tables, pre blocks, or images */
.s2u-layout > main,
.s2u-layout > aside,
.s2u-layout > .site-main,
#main.site-main {
    min-width: 0 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* SECTION HEAD */
.mh-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0 12px; border-bottom: 2px solid var(--mh-border); margin-bottom: 0;
}
.mh-section-title {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--mh-navy); display: flex; align-items: center; gap: 8px;
}
.mh-section-title::before { content: ''; display: inline-block; width: 12px; height: 3px; background: var(--mh-blue); border-radius: 2px }
.mh-section-more { color: var(--mh-blue); font-size: 0.75rem; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap var(--mh-ease) }
.mh-section-more:hover { gap: 7px }

/* AD BOXES */
.s2u-ad-box {
    width: 100%; background: var(--mh-bg2); border: 1px dashed var(--mh-border2);
    border-radius: var(--mh-r); padding: 10px; margin: 16px 0;
    text-align: center; min-height: 60px; display: flex; align-items: center;
    justify-content: center; overflow: hidden;
}
.s2u-ad-box .widget { margin: 0 !important }
@media(max-width:768px) { .s2u-ad-box { border-radius: 0; border-left: none; border-right: none; margin: 10px 0 } }

/* POST CARDS */
.post.s2u-card {
    background: #fff !important; border: none !important;
    border-bottom: 1px solid var(--mh-border) !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; overflow: hidden !important;
    position: relative !important; transition: background var(--mh-ease) !important;
}
.post.s2u-card:hover { background: var(--mh-bg2) !important }

@media(min-width:600px) {
    .post.s2u-card { display: flex !important; flex-direction: row !important; align-items: stretch !important }
    .post.s2u-card .s2u-thumb-wrap { width: 190px !important; flex-shrink: 0 !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: 16/9 !important }
    .post.s2u-card .s2u-card-body { flex: 1; padding: 16px 18px !important }
}
@media(max-width:599px) {
    .post.s2u-card { display: block !important }
    .post.s2u-card .s2u-thumb-wrap { width: 100% !important; aspect-ratio: 16/9 !important; border-radius: 0 !important; margin: 0 !important; display: block !important }
    .post.s2u-card .s2u-card-body { padding: 12px var(--mh-px) 16px !important }
}
.s2u-thumb-wrap { display: block; overflow: hidden; background: var(--mh-bg3); text-decoration: none; position: relative }
.s2u-thumb-wrap img { width: 100%; height: 100%; object-fit: cover }
.mh-read-time {
    position: absolute; bottom: 7px; right: 7px; background: rgba(26,5,5,0.7);
    color: rgba(255,255,255,0.9); font-size: 0.62rem; font-weight: 600;
    padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(4px); letter-spacing: 0.02em;
}
.s2u-card-body { padding: 14px var(--mh-px) }

/* Category badges */
.s2u-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px }
.s2u-cat {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--mh-blue-lt); color: var(--mh-blue) !important;
    border: 1px solid var(--mh-blue-ltr); padding: 2px 8px; border-radius: 20px;
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none !important; transition: background var(--mh-ease), border-color var(--mh-ease);
}
.s2u-cat:hover { background: var(--mh-blue-ltr) !important; border-color: rgba(220,38,38,0.35) !important }

/* Entry title */
.entry-title, .entry-title a {
    color: var(--mh-navy) !important; font-size: 0.98rem !important; font-weight: 700 !important;
    line-height: 1.35 !important; letter-spacing: -0.02em !important; text-decoration: none !important;
    transition: color var(--mh-ease) !important; margin: 0 0 6px !important;
}
.entry-title a:hover { color: var(--mh-blue) !important }
.entry-header { margin-bottom: 6px !important }

/* Meta */
.s2u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--mh-faint); font-size: 0.72rem; margin-bottom: 8px }
.s2u-meta a { color: var(--mh-muted); text-decoration: none }
.s2u-meta a:hover { color: var(--mh-blue) }
.s2u-dot { color: var(--mh-border2) }
.s2u-meta--single { font-size: 0.8rem; margin-top: 8px }

/* Excerpt */
.entry-summary { color: var(--mh-muted) !important; font-size: 0.83rem !important; line-height: 1.6 !important; margin-bottom: 10px !important }

/* Read more */
.s2u-read-more { display: inline-flex; align-items: center; gap: 4px; color: var(--mh-blue) !important; font-size: 0.78rem; font-weight: 600; text-decoration: none !important; transition: gap var(--mh-ease) }
.s2u-read-more:hover { gap: 7px }
.read-more, .more-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    background: var(--mh-blue) !important; color: #fff !important; padding: 6px 14px !important;
    border-radius: 20px !important; font-size: 0.78rem !important; font-weight: 600 !important;
    text-decoration: none !important; transition: background var(--mh-ease) !important;
}
.read-more:hover, .more-link:hover { background: var(--mh-blue2) !important; color: #fff !important }

/* ARCHIVE HEADER */
.archive-header { padding: 16px var(--mh-px) 14px !important; border-bottom: 1px solid var(--mh-border) !important; margin-bottom: 0 !important }
.archive-title { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--mh-navy) !important; margin: 0 !important; letter-spacing: -0.02em !important }
.s2u-breadcrumb { font-size: 0.73rem; color: var(--mh-faint); margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.s2u-breadcrumb a { color: var(--mh-muted); text-decoration: none }
.s2u-breadcrumb a:hover { color: var(--mh-blue) }
.s2u-bc-cur { color: var(--mh-navy); font-weight: 500 }

/* SINGLE POST */
.single .post, .post.s2u-single {
    background: #fff !important; border: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important;
}
.single .site-main, .single #main { width: 100% !important; max-width: 100% !important }
.s2u-single .entry-header { padding: 16px var(--mh-px) 12px !important }
@media(min-width:900px) { .s2u-single .entry-header { padding: 24px 0 14px !important } }

.mh-article-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
    font-size: 0.7rem; font-weight: 700; color: var(--mh-blue); text-transform: uppercase; letter-spacing: 0.1em;
}
.mh-article-badge::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--mh-blue); border-radius: 2px }

.single .entry-title {
    font-family: var(--mh-font) !important; font-size: clamp(1.35rem, 4.5vw, 2rem) !important;
    font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important;
    margin-bottom: 10px !important; color: var(--mh-navy) !important;
}

.mh-author-strip {
    display: flex; align-items: center; gap: 10px; padding: 12px var(--mh-px);
    background: var(--mh-bg2); border-top: 1px solid var(--mh-border); border-bottom: 1px solid var(--mh-border);
}
@media(min-width:900px) { .mh-author-strip { padding: 12px 0; margin: 8px 0 0 } }
.mh-author-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mh-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex-shrink: 0 }
.mh-author-info { flex: 1; min-width: 0 }
.mh-author-name { font-size: 0.82rem; font-weight: 700; color: var(--mh-navy); display: block }
.mh-author-role { font-size: 0.7rem; color: var(--mh-muted) }
.mh-share-strip { display: flex; align-items: center; gap: 6px; flex-shrink: 0 }
.mh-share-btn {
    background: var(--mh-bg3); border: 1px solid var(--mh-border); color: var(--mh-muted);
    padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: all var(--mh-ease); white-space: nowrap;
}
.mh-share-btn:hover { background: var(--mh-blue-lt); color: var(--mh-blue); border-color: var(--mh-blue-ltr) }

.post-image { width: 100% !important; overflow: hidden !important; margin: 0 !important }
.post-image img { width: 100% !important; height: auto !important; border-radius: 0 !important; display: block !important }
@media(min-width:900px) {
    .post-image { border-radius: var(--mh-rl) !important; margin: 16px 0 !important; box-shadow: var(--mh-shadow) !important }
    .post-image img { border-radius: var(--mh-rl) !important }
}

/* Entry content */
.entry-content { color: var(--mh-body) !important; font-size: 0.95rem !important; line-height: 1.8 !important; padding: 0 var(--mh-px) !important }
@media(min-width:900px) { .entry-content { padding: 0 !important } }
.entry-content p { color: var(--mh-body) !important; margin-bottom: 1.1em !important }
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5 {
    color: var(--mh-navy) !important; font-weight: 800 !important; letter-spacing: -0.025em !important;
    margin: 1.8em 0 0.5em !important; line-height: 1.25 !important; font-family: var(--mh-font) !important;
}
.entry-content h2 { font-size: 1.25rem !important }
.entry-content h3 { font-size: 1.08rem !important }
.entry-content h4 { font-size: 0.98rem !important }
.entry-content a { color: var(--mh-blue) !important; border-bottom: 1px solid rgba(220,38,38,0.25) !important; text-decoration: none !important; transition: border-color var(--mh-ease) !important }
.entry-content a:hover { border-color: var(--mh-blue) !important }
.entry-content .s2u-btn, .entry-content .s2u-dl-btn, .entry-content a.s2u-btn, .entry-content a.s2u-dl-btn { border-bottom: none !important }
.entry-content ul, .entry-content ol { padding-left: 1.4em !important; color: var(--mh-body) !important; margin-bottom: 1.1em !important }
.entry-content li { margin-bottom: 6px !important }
.entry-content blockquote { border-left: 3px solid var(--mh-blue) !important; padding: 12px 16px !important; background: var(--mh-bg2) !important; border-radius: 0 var(--mh-r) var(--mh-r) 0 !important; color: var(--mh-navy) !important; font-style: italic !important; margin: 1.2em 0 !important; font-size: 1.05em !important; font-weight: 500 !important }
.entry-content code { font-family: var(--mh-mono) !important; background: var(--mh-bg3) !important; color: var(--mh-blue2) !important; padding: 1px 6px !important; border-radius: 4px !important; font-size: 0.83em !important; border: 1px solid var(--mh-border) !important }
.entry-content pre { font-family: var(--mh-mono) !important; background: var(--mh-navy) !important; color: #e2e8f0 !important; border-radius: var(--mh-r) !important; padding: 16px !important; overflow-x: auto !important; font-size: 0.82rem !important; line-height: 1.6 !important; margin: 1.2em 0 !important }
.entry-content pre code { background: transparent !important; border: none !important; padding: 0 !important; color: inherit !important }
.entry-content table { width: 100% !important; border-collapse: collapse !important; font-size: 0.85rem !important; display: block !important; overflow-x: auto !important }
.entry-content th { background: var(--mh-navy) !important; color: #fff !important; font-weight: 700 !important; padding: 9px 12px !important; text-align: left !important; white-space: nowrap !important }
.entry-content td { padding: 8px 12px !important; border-bottom: 1px solid var(--mh-border) !important; color: var(--mh-body) !important }
.entry-content tr:hover td { background: var(--mh-bg2) !important }

/* Tags */
.entry-footer { margin-top: 20px !important; padding: 14px var(--mh-px) !important; border-top: 1px solid var(--mh-border) !important }
@media(min-width:900px) { .entry-footer { padding: 14px 0 !important } }
.s2u-tags-label { color: var(--mh-faint); font-size: 0.73rem; margin-right: 5px }
.tags-links a, .post-tags a {
    display: inline-block !important; background: var(--mh-bg2) !important; border: 1px solid var(--mh-border) !important;
    color: var(--mh-muted) !important; padding: 3px 10px !important; border-radius: 20px !important;
    font-size: 0.72rem !important; text-decoration: none !important; margin: 2px !important; transition: all var(--mh-ease) !important;
}
.tags-links a:hover, .post-tags a:hover { background: var(--mh-blue-lt) !important; border-color: var(--mh-blue-ltr) !important; color: var(--mh-blue) !important }

/* POST NAV */
.s2u-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px var(--mh-px) 0 }
@media(max-width:899px) { .s2u-post-nav { margin-left: var(--mh-px) !important; margin-right: var(--mh-px) !important } }
@media(min-width:900px) { .s2u-post-nav { margin: 20px 0 0 } }
.s2u-nav-link { background: var(--mh-bg2); border: 1px solid var(--mh-border); border-radius: var(--mh-r); padding: 12px 14px; text-decoration: none; display: block; transition: border-color var(--mh-ease), background var(--mh-ease), transform var(--mh-ease) }
.s2u-nav-link:hover { border-color: var(--mh-blue); background: var(--mh-blue-lt); transform: translateY(-1px) }
.s2u-nav-link:hover .s2u-nav-title { color: var(--mh-blue) }
.s2u-nav-dir { color: var(--mh-faint); font-size: 0.68rem; display: block; margin-bottom: 4px }
.s2u-nav-title { color: var(--mh-navy); font-size: 0.82rem; font-weight: 700; display: block; line-height: 1.35; transition: color var(--mh-ease) }
.s2u-nav-link.next { text-align: right }

/* SIDEBAR */
.widget-area { background: var(--mh-bg2) !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-rl) !important; padding: 16px !important; position: sticky !important; top: 70px !important; margin-top: 24px !important }
@media(min-width:900px) { .widget-area { margin-top: 0 !important } }
.widget { margin-bottom: 22px !important }
.widget:last-child { margin-bottom: 0 !important }
.widget-title { color: var(--mh-navy) !important; font-size: 0.63rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; margin: 0 0 12px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--mh-border) !important; display: flex !important; align-items: center !important }
.widget ul { margin: 0 !important; padding: 0 !important; list-style: none !important }
.widget ul li { padding: 5px 0 !important; border-bottom: 1px solid var(--mh-border) !important }
.widget ul li:last-child { border-bottom: none !important }
.widget ul li a { color: var(--mh-body) !important; font-size: 0.83rem !important; text-decoration: none !important; transition: color var(--mh-ease) !important; font-weight: 500 !important }
.widget ul li a:hover { color: var(--mh-blue) !important }


/* SEARCH */
.search-form { display: flex !important; gap: 0 !important; position: relative !important }
.search-form-inner, .search-form label { flex: 1 !important; position: relative !important; min-width: 0 !important; margin: 0 !important }
.search-form .search-field { flex: 1 !important; background: #fff !important; border: 1px solid var(--mh-border) !important; border-right: none !important; border-radius: var(--mh-r) 0 0 var(--mh-r) !important; color: var(--mh-text) !important; padding: 8px 12px !important; font-family: var(--mh-font) !important; font-size: 0.875rem !important; min-width: 0 !important; width: 100% !important; height: 38px !important; transition: border-color var(--mh-ease) !important }
.search-form .search-field:focus { outline: none !important; border-color: var(--mh-blue) !important }
.search-form .search-field::placeholder { color: var(--mh-faint) !important }
.search-form .search-submit { background: var(--mh-blue) !important; color: #fff !important; border: 1px solid var(--mh-blue) !important; border-radius: 0 var(--mh-r) var(--mh-r) 0 !important; padding: 0 !important; width: 38px !important; height: 38px !important; cursor: pointer !important; flex-shrink: 0 !important; transition: background var(--mh-ease) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important }
.search-form .search-submit:hover { background-color: var(--mh-blue2) !important }

/* PAGINATION */
.pagination .nav-links { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; justify-content: center !important; margin: 20px 0 !important; padding: 0 var(--mh-px) !important }
.pagination .page-numbers { background: var(--mh-bg2) !important; color: var(--mh-body) !important; border: 1px solid var(--mh-border) !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 0.83rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all var(--mh-ease) !important; min-width: 34px !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--mh-blue) !important; color: #fff !important; border-color: var(--mh-blue) !important }

/* COMMENTS */
.comments-area { background: var(--mh-bg2) !important; border-top: 1px solid var(--mh-border) !important; padding: 20px var(--mh-px) !important; margin-top: 0 !important }
@media(min-width:900px) { .comments-area { padding: 20px 0 !important } }
.comments-title { color: var(--mh-navy) !important; font-size: 1rem !important; font-weight: 800 !important; margin: 0 0 16px !important; letter-spacing: -0.02em !important }
.comment-list { padding: 0 !important; margin: 0 0 18px !important; list-style: none !important }
.comment-list .comment-body { background: #fff !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-r) !important; padding: 14px 16px !important; margin-bottom: 10px !important }
.comment-author .fn { color: var(--mh-navy) !important; font-weight: 700 !important; font-size: 0.85rem !important }
.comment-metadata { color: var(--mh-faint) !important; font-size: 0.72rem !important }
.comment-content { color: var(--mh-body) !important; font-size: 0.85rem !important; margin-top: 7px !important }
.comment-form p { margin-bottom: 10px !important }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { background: #fff !important; border: 1px solid var(--mh-border) !important; border-radius: var(--mh-r) !important; color: var(--mh-text) !important; padding: 8px 12px !important; width: 100% !important; font-family: var(--mh-font) !important; font-size: 0.875rem !important; transition: border-color var(--mh-ease) !important }
.comment-form input:focus, .comment-form textarea:focus { outline: none !important; border-color: var(--mh-blue) !important }
.comment-form .submit { background: var(--mh-blue) !important; color: #fff !important; border: none !important; border-radius: 20px !important; padding: 8px 20px !important; font-weight: 700 !important; font-size: 0.875rem !important; cursor: pointer !important; transition: background var(--mh-ease) !important }
.comment-form .submit:hover { background: var(--mh-blue2) !important }

/* FOOTER */
.site-footer { background: #000 !important; border-top: none !important; padding: 18px 0 !important; margin-top: 40px !important; color: rgba(255,255,255,0.4) !important; font-size: 0.74rem !important }
.site-footer .grid-container { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important }
.site-footer a { color: rgba(255,255,255,0.5) !important; text-decoration: none !important; transition: color var(--mh-ease) !important }
.site-footer a:hover { color: #fff !important }
.footer-menu { display: flex !important; gap: 16px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; flex-wrap: wrap !important }

/* BACK TO TOP */
.s2u-back-top { position: fixed; bottom: 20px; right: 16px; width: 40px; height: 40px; background: var(--mh-navy); border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 997; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(26,5,5,0.3); padding: 0; color: #fff }
.s2u-back-top.visible { opacity: 1; pointer-events: auto }
.s2u-back-top:hover { transform: translateY(-2px) }

/* MISC */
.skip-link { position: absolute; left: -9999px }
.skip-link:focus { left: 6px; top: 6px; z-index: 9999; background: var(--mh-blue); color: #fff; padding: 6px 12px; border-radius: 6px }
.error-404 { text-align: center !important; padding: 56px 16px !important }
.error-404 .page-title { font-size: clamp(3rem,12vw,5rem) !important; font-weight: 900 !important; color: var(--mh-blue) !important; line-height: 1 !important; margin-bottom: 10px !important; font-family: var(--mh-serif) !important }
.error-404 p { color: var(--mh-muted) !important }
.no-results { text-align: center !important; padding: 40px 16px !important; background: var(--mh-bg2) !important; border-radius: var(--mh-r) !important; border: 1px solid var(--mh-border) !important; margin: 16px var(--mh-px) !important }
.no-results h2 { color: var(--mh-navy) !important; font-size: 1rem !important; margin-bottom: 6px !important; font-weight: 800 !important }
.no-results p { color: var(--mh-muted) !important; margin-bottom: 14px !important }
.page .post { padding: 18px var(--mh-px) !important }
.page .entry-title { font-size: 1.5rem !important; font-weight: 800 !important; font-family: var(--mh-serif) !important; letter-spacing: -0.03em !important }

/* GP OVERRIDES */
.content-area, #primary { float: none !important; width: 100% !important }
#secondary { float: none !important; width: 100% !important }
.site-content { padding: 0 !important; margin: 0 !important }
#content.site-content > .grid-container { padding-top: 0 !important }
#page { padding: 0 !important; margin: 0 !important }
.s2u-layout { width: 100% !important }
.site-main { width: 100% !important; max-width: 100% !important; float: none !important }

/* ── FOOTER CLEARFIX ── force footer below all floats/grids, always full width */
#page::after { content: ''; display: table; clear: both }
.site-footer {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* ── MERMAID LANGUAGE LABEL FIX ─────────────────────────────────────────── */
/* When AI outputs a mermaid code block, the language word "mermaid" or
   "javascript" etc. often leaks as a standalone <p> before the <pre> block */
.entry-content p.mh-lang-label { display: none !important }
/* Also hide lone code-language paragraphs injected by some editors */
.entry-content > p:only-of-type + pre,
.entry-content > pre { margin-top: 0 !important }
#secondary .widget-title, #secondary h2.widget-title, #secondary h3.widget-title,
.widget-area .widget-title, .widget-area h2.widget-title, .widget-area h3.widget-title { color: var(--mh-navy) !important; font-size: 0.63rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; margin: 0 0 12px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--mh-border) !important; background: none !important }
#secondary .search-form, .widget-area .search-form { display: flex !important; gap: 0 !important; align-items: stretch !important }
#secondary .search-form label, .widget-area .search-form label { flex: 1 !important; min-width: 0 !important; margin: 0 !important }
#secondary .search-form .search-field, .widget-area .search-form .search-field, .widget .search-field, #secondary input[type="search"], .widget-area input[type="search"] { flex: 1 !important; width: 100% !important; background: #fff !important; border: 1px solid var(--mh-border) !important; border-right: none !important; border-radius: var(--mh-r) 0 0 var(--mh-r) !important; color: var(--mh-text) !important; padding: 7px 11px !important; font-family: var(--mh-font) !important; font-size: 0.84rem !important; height: 36px !important; outline: none !important; -webkit-appearance: none !important }
#secondary .search-form .search-field:focus, .widget-area input[type="search"]:focus { border-color: var(--mh-blue) !important }
#secondary .search-form input[type="submit"], #secondary .search-form .search-submit, .widget-area .search-form input[type="submit"], .widget-area .search-form .search-submit { background-color: var(--mh-blue) !important; color: #fff !important; border: 1px solid var(--mh-blue) !important; border-radius: 0 var(--mh-r) var(--mh-r) 0 !important; padding: 0 !important; cursor: pointer !important; font-size: 0 !important; flex-shrink: 0 !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 13px 13px !important }
#secondary .widget ul, .widget-area .widget ul { margin: 0 !important; padding: 0 !important; list-style: none !important }
#secondary .widget ul li, .widget-area .widget ul li { padding: 5px 0 !important; border-bottom: 1px solid var(--mh-border) !important; margin: 0 !important }
#secondary .widget ul li:last-child, .widget-area .widget ul li:last-child { border-bottom: none !important }
#secondary .widget ul li a, .widget-area .widget ul li a { color: var(--mh-body) !important; font-size: 0.83rem !important; text-decoration: none !important; font-weight: 500 !important }
#secondary .widget ul li a:hover, .widget-area .widget ul li a:hover { color: var(--mh-blue) !important }
#secondary .widget, .widget-area .widget { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 20px !important }
#secondary .widget:last-child, .widget-area .widget:last-child { margin-bottom: 0 !important }
#secondary .widget p, .widget-area .widget p { color: var(--mh-muted) !important; font-size: 0.83rem !important; margin: 0 !important }
.widget-title::before, #secondary .widget-title::before, .widget-area .widget-title::before { content: ''; display: inline-block !important; width: 13px !important; height: 13px !important; margin-right: 6px !important; vertical-align: middle !important; flex-shrink: 0 !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.45 !important; position: relative !important; top: -1px !important }
.widget_search .widget-title::before, .widget-area .widget_search .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important }
.widget_recent_entries .widget-title::before, .widget-area .widget_recent_entries .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") !important }
.widget_categories .widget-title::before, .widget-area .widget_categories .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") !important }
.widget_tag_cloud .widget-title::before, .widget-area .widget_tag_cloud .widget-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") !important }

/* SUB2UNLOCK */
.s2u-wrapper { position: relative; margin: 24px 0 }
.s2u-lock-box { background: #fff; border: 1px solid var(--mh-border); border-radius: var(--mh-rl); padding: 28px 20px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--mh-shadow) }
.s2u-lock-box::before { content: ''; position: absolute; inset: 0; border-radius: var(--mh-rl); padding: 1px; background: linear-gradient(135deg, rgba(220,38,38,0.18), transparent 55%, rgba(220,38,38,0.06)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none }
.s2u-lock-icon { width: 52px; height: 52px; background: var(--mh-blue-lt); border: 1px solid var(--mh-blue-ltr); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--mh-blue); animation: mh-pulse 2.5s ease-in-out infinite }
@keyframes mh-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(220,38,38,0.15) } 50%{ box-shadow: 0 0 0 6px rgba(220,38,38,0) } }
.s2u-message { color: var(--mh-muted); font-size: 0.86rem; margin: 0 auto 20px; line-height: 1.65; max-width: 340px }
.s2u-preview { background: var(--mh-bg2); border: 1px solid var(--mh-border); border-radius: var(--mh-r) var(--mh-r) 0 0; padding: 14px; color: var(--mh-body); font-size: 0.9rem; line-height: 1.7; filter: blur(4px); user-select: none; pointer-events: none; position: relative; max-height: 80px; overflow: hidden; margin-bottom: 0 }
.s2u-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, rgba(247,248,252,0.92)) }
.s2u-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 320px; margin: 0 auto }
.s2u-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; border-radius: var(--mh-r); color: #fff !important; font-size: 0.86rem; font-weight: 700; text-decoration: none !important; border: none; border-bottom: none !important; cursor: pointer; transition: transform 0.13s ease, box-shadow 0.13s ease; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent }
.s2u-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); color: #fff !important }
.s2u-btn:active { transform: translateY(0) }
.s2u-btn svg { flex-shrink: 0 }
.s2u-dl-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--mh-blue), var(--mh-blue2)); color: #fff !important; padding: 11px 22px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; text-decoration: none !important; border-bottom: none !important; margin: 8px 0; transition: transform 0.13s ease, box-shadow 0.13s ease; box-shadow: 0 3px 12px rgba(220,38,38,0.3); -webkit-tap-highlight-color: transparent }
.s2u-dl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(220,38,38,0.4); color: #fff !important }
.s2u-countdown-wrap { margin-top: 20px; text-align: center }
.s2u-countdown-ring { position: relative; width: 58px; height: 58px; margin: 0 auto 6px }
.s2u-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.s2u-ring-bg { fill: none; stroke: var(--mh-border); stroke-width: 3 }
.s2u-ring-fill { fill: none; stroke: var(--mh-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear }
.s2u-countdown-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.1rem; font-weight: 800; color: var(--mh-navy) }
.s2u-countdown-label { color: var(--mh-faint); font-size: 0.73rem; margin: 0 }
.s2u-success-msg { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: #059669; font-size: 0.875rem; font-weight: 700; animation: s2u-fadein 0.3s ease }
.s2u-success-icon { width: 24px; height: 24px; background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0 }
.s2u-content { animation: s2u-reveal 0.35s cubic-bezier(0.4,0,0.2,1); border: 1px solid rgba(220,38,38,0.12); border-radius: var(--mh-r); padding: 16px; background: var(--mh-blue-lt) }
@keyframes s2u-reveal { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes s2u-fadein { from { opacity:0 } to { opacity:1 } }
.s2u-alert { padding: 11px 14px; border-radius: 8px; font-size: 0.86rem; margin: 14px 0; line-height: 1.55 }
.s2u-alert--info    { background: var(--mh-blue-lt); border-left: 3px solid var(--mh-blue); color: var(--mh-blue2) }
.s2u-alert--warning { background: rgba(245,158,11,0.07); border-left: 3px solid var(--mh-amber); color: #b45309 }
.s2u-alert--success { background: rgba(5,150,105,0.07); border-left: 3px solid #10b981; color: #047857 }
.s2u-alert--danger  { background: rgba(239,68,68,0.07); border-left: 3px solid #ef4444; color: #b91c1c }
@media(max-width:480px) { .s2u-lock-box { padding: 22px 14px } .s2u-btn { padding: 10px 14px; font-size: 0.83rem } .s2u-content { padding: 14px } }

@media(max-width:768px) {
    .widget-area, #secondary.widget-area { padding: 14px !important; margin-top: 12px !important }
    #secondary .widget, .widget-area .widget { margin-bottom: 14px !important }
    #secondary .widget-title, .widget-area .widget-title { font-size: 0.6rem !important; margin: 0 0 8px !important; padding-bottom: 7px !important }
}

/* legacy compat */
.s2u-hdr-inner { display: contents }