@import "tailwindcss";
/* ─── Colour tokens: Light mode ─── */
:root {
  --bg:            #f0f0eb;
  --surface:       #ffffff;
  --text:          #333333;
  --text-muted:    #666666;
  --text-faint:    #888888;
  --heading:       #1a1a1a;
  --border:        #dddddd;
  --link:          #2070b8;
  --code-inline-bg: #f0f0eb;
  --code-inline-bd: #d0d0c8;
  --category-bg:        #eef4fb;
  --category-color:     #2070b8;
  --category-border:    #c8ddf0;
  --intro-bg:      #fff9f5;
  --intro-border:  #e05a00;
  --intro-color:   #444444;
  --card-bg:       #f5f5f0;
  --card-border:   #dddddd;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.07);
  --cb-bg:         #1e1e2e;
  --cb-header-bg:  #2a2a3e;
  --cb-header-color: #888888;
  --cb-text:       #cdd6f4;
  --bq-bg:         #f0f6ff;
  --bq-border:     #2070b8;
  --bq-color:      #444444;
  --bq-cite:       #666666;
  --note-warn-bg:  #fffbea;  --note-warn-bd: #f0a500; --note-warn-cl: #664d00;
  --note-info-bg:  #eff6ff;  --note-info-bd: #3b82f6; --note-info-cl: #1e3a5f;
  --vd-good-bg:    #f0fdf4;  --vd-good-bd:   #86efac; --vd-good-cl:   #14532d;
  --vd-bad-bg:     #fff1f2;  --vd-bad-bd:    #fca5a5; --vd-bad-cl:    #7f1d1d;
  --vd-med-bg:     #fffbeb;  --vd-med-bd:    #fcd34d; --vd-med-cl:    #78350f;
  --ct-head-bg:    #2d2d3a;  --ct-head-color:#ffffff;
  --ct-border:     #e5e5e5;  --ct-stripe:    #f9f9f7;
  --cl-head-bg:    #f0f0eb;  --cl-head-bd:   #cccccc;
  --cl-border:     #e5e5e5;
  --cl-yes:        #16a34a;  --cl-no:        #dc2626; --cl-part: #d97706;
  --bar-track:     #e0e0e0;  --bar-fill:     #2070b8;
  --bar-label:     #555555;  --bar-value:    #444444;
  --pill-bg:       #e8e8e3;  --pill-color:   #555555;
  --pill-bg-hover: #d4d4cd;  --pill-cl-hover:#222222;
  --divider:       #dddddd;
  --bullet-bg:     #2070b8;
  /* page-specific */
  --hier-bg:       #ffffff;
  --hier-border:   #e0e0d8;
  --hier-text:     #555555;
  --hier-strong:   #1a1a1a;
  --hier-dash:     #cccccc;
  --splittest-bg:      #eef4fb;
  --splittest-border:  #c8ddf0;
  --splittest-heading: #1a3a5f;
  --splittest-sub:     #555555;
  --splittest-num1:    #e05a00;
  --splittest-num2:    #2070b8;
  --splittest-caption: #888888;
  --splittest-src:     #aaaaaa;
  --takeaway-bg:   #1e1e2e;
  --takeaway-text: #e8e8f0;
  --takeaway-head: #a8d8ff;
  --takeaway-yes:  #5ef08a;
  --takeaway-no:   #f07070;
  --takeaway-code: rgba(255,255,255,0.12);
  --orange-note-bg:    #fff7ed;
  --orange-note-bd:    #e05a00;
  --orange-note-cl:    #7c2d12;
  --footer-border:     #dddddd;
  --footer-text:       #999999;
  --tag-bg:        #f0f0eb;
  --tag-color:     #666666;
  --accent:        #e05a00;
  --sidebar-bg:    #f5f5f0;
  --sidebar-border:#e0e0da;
  --cover-bg:      #e8e8e3;
}
 
/* ─── Colour tokens: Dark mode ─── */
html.dark {
  --bg:            #18181b;
  --surface:       #1f1f23;
  --text:          #d4d4d8;
  --text-muted:    #a1a1aa;
  --text-faint:    #71717a;
  --heading:       #f4f4f5;
  --border:        #3f3f46;
  --link:          #60a5fa;
  --code-inline-bg:#27272a;
  --code-inline-bd:#52525b;
  --category-bg:        #1e3a5f;
  --category-color:     #93c5fd;
  --category-border:    #2d5a8e;
  --intro-bg:      #2a1a0e;
  --intro-border:  #f97316;
  --intro-color:   #d6bfaa;
  --card-bg:       #27272a;
  --card-border:   #3f3f46;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.3);
  --cb-bg:         #13131f;
  --cb-header-bg:  #1a1a2e;
  --cb-header-color:#71717a;
  --cb-text:       #cdd6f4;
  --bq-bg:         #1e2d45;
  --bq-border:     #3b82f6;
  --bq-color:      #c4cdd8;
  --bq-cite:       #7a8fa6;
  --note-warn-bg:  #2a1f00; --note-warn-bd: #f59e0b; --note-warn-cl: #fcd34d;
  --note-info-bg:  #0f2540; --note-info-bd: #3b82f6; --note-info-cl: #93c5fd;
  --vd-good-bg:    #052e16; --vd-good-bd:   #166534; --vd-good-cl:   #86efac;
  --vd-bad-bg:     #2d0a0e; --vd-bad-bd:    #991b1b; --vd-bad-cl:    #fca5a5;
  --vd-med-bg:     #2d1a00; --vd-med-bd:    #92400e; --vd-med-cl:    #fcd34d;
  --ct-head-bg:    #27272a; --ct-head-color:#f4f4f5;
  --ct-border:     #3f3f46; --ct-stripe:    #232326;
  --cl-head-bg:    #27272a; --cl-head-bd:   #52525b;
  --cl-border:     #3f3f46;
  --cl-yes:        #4ade80; --cl-no:        #f87171; --cl-part: #fbbf24;
  --bar-track:     #3f3f46; --bar-fill:     #60a5fa;
  --bar-label:     #a1a1aa; --bar-value:    #d4d4d8;
  --pill-bg:       #3f3f46; --pill-color:   #a1a1aa;
  --pill-bg-hover: #52525b; --pill-cl-hover:#f4f4f5;
  --divider:       #3f3f46;
  --bullet-bg:     #3b82f6;
  /* page-specific */
  --hier-bg:       #27272a;
  --hier-border:   #3f3f46;
  --hier-text:     #a1a1aa;
  --hier-strong:   #f4f4f5;
  --hier-dash:     #52525b;
  --splittest-bg:      #1e2d45;
  --splittest-border:  #2d5a8e;
  --splittest-heading: #93c5fd;
  --splittest-sub:     #a1a1aa;
  --splittest-num1:    #fb923c;
  --splittest-num2:    #60a5fa;
  --splittest-caption: #71717a;
  --splittest-src:     #52525b;
  --takeaway-bg:   #13131f;
  --takeaway-text: #e8e8f0;
  --takeaway-head: #93c5fd;
  --takeaway-yes:  #4ade80;
  --takeaway-no:   #f87171;
  --takeaway-code: rgba(255,255,255,0.1);
  --orange-note-bg:    #2a1200;
  --orange-note-bd:    #f97316;
  --orange-note-cl:    #fed7aa;
  --footer-border:     #3f3f46;
  --footer-text:       #71717a;
  --tag-bg:        #3f3f46;
  --tag-color:     #a1a1aa;
  --accent:        #f97316;
  --sidebar-bg:    #27272a;
  --sidebar-border:#3f3f46;
  --cover-bg:      #3f3f46;
}
 
/* ─── Reset & Base ─── */
*, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    min-height: max(884px, 100dvh);
    font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  transition: background .2s, color .2s;
}
 
.article-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 16px 80px;
}
 
/* ─── Typography ─── */
h1, h2, h3 {
  line-height: 1.3;
  color: var(--heading);
  font-weight: bold;
}
h1{
  font-size: 2rem;
}
h2{
  font-size: 1.45rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
h3{
  font-size: 1.15rem;
}
 
p{ margin-bottom: 16px; }
 
a{ color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
article{
    background: var(--surface);
    padding: 40px;
}
article ul,
article ol { margin: 0 0 16px 24px; }
.post-page h2{
    margin: 30px 0 12px;
}
.post-page h3{
    margin: 28px 0 12px;
}
li { margin-bottom: 6px; }
 
em { font-style: italic; }
strong { font-weight: 700; }
 
pre, code { font-family: 'Courier New', Consolas, monospace; font-size: 0.88rem; }
code {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: #c0392b;
}
html.dark code { color: #f87171; }

/* Utility Classes */
html.dark {
    color-scheme: dark;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Prevent transition on animations */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Button animations */
button {
    position: relative;
    overflow: hidden;
}

button:active {
    transform: scale(0.98);
}

/* Link hover effects */
a {
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: none;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}

/* Dark mode scrollbar */
html.dark ::-webkit-scrollbar-thumb {
    background: rgba(51, 65, 85, 0.5);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 65, 85, 0.8);
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Menu slide animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Carousel navigation buttons */
#carousel-prev,
#carousel-next {
    cursor: pointer;
}

#carousel-prev:hover,
#carousel-next:hover {
    background-color: #1978e5 !important;
    color: white !important;
}
/* Carousel smooth scrolling */
#carousel {
    scroll-behavior: smooth;
}

.carousel-item {
    flex-shrink: 0;
}

/* Accessible focus styles */
*:focus-visible {
    outline: 2px solid #1978e5;
    outline-offset: 2px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    body {
        min-height: max(600px, 100dvh);
    }

    /* Ensure footer is not hidden by bottom nav */
    main {
        padding-bottom: 100px;
    }
}
.main-menu{
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: left 0.3s ease;
}
.main-menu a{
    margin: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
@media(max-width: 768px){
    .main-menu{
        position: fixed;
        top: 0;
        left: -100%;
        flex-direction: column;
        background: white;
        height: 100vh;
        width: 200px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        justify-content: flex-start;
        gap: 1em;
        padding-top: 2em;
    }
    .main-menu.open {
        left: 0;
    }
    .main-menu a{
        font-size: 20px;
    }
}

/* Dotted link underline */
.article-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    color: #1a56a0;
}
.article-link:hover {
    text-decoration-style: solid;
    color: #0d3e7c;
}
 
/* ─── Meta row ─── */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.meta-row .category {
  background: var(--category-bg);
  color: var(--category-color);
  border: 1px solid var(--category-border);
  border-radius: 4px;
  padding: 3px 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
 
/* ─── Table of Contents ─── */
.toc {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.toc h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin: 0 0 12px !important;
  padding: 0;
  border: none;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 5px; }
.toc a  { color: var(--link); font-size: 0.95rem; }
.tok-kw   { color: #569cd6; }
.tok-str  { color: #ce9178; }
.tok-cm   { color: #6a9955; font-style: italic; }
.tok-tag  { color: #4ec9b0; }
.tok-attr { color: #9cdcfe; }
.tok-val  { color: #ce9178; }
 
/* ─── Code Block ─── */
.code-block {
  background: var(--cb-bg);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}
.code-block pre {
  padding: 20px 24px;
  overflow-x: auto;
  color: var(--cb-text);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}
.code-block code{
    background: initial;
    border: 0;
}
/* syntax spans */
.code-block .tok-cm  { color: #6c7086; font-style: italic; }
.code-block .tok-tag { color: #89b4fa; }
.code-block .tok-attr { color: #cba6f7; }
.code-block .tok-val { color: #a6e3a1; }
 
/* ─── Blockquote ─── */
blockquote {
  border-left: 4px solid var(--bq-border);
  background: var(--bq-bg);
  border-radius: 0 6px 6px 0;
  padding: 14px 20px;
  margin: 20px 0;
  color: var(--bq-color);
  font-style: italic;
}
blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.83rem;
  color: var(--bq-cite);
  font-style: normal;
}
blockquote cite a { color: var(--link); }
 
/* ─── Note boxes ─── */
.note {
  border-radius: 8px;
  padding: 14px 18px;
  margin: 20px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.93rem;
}
.note.warning { background: var(--note-warn-bg); border-left: 4px solid var(--note-warn-bd); color: var(--note-warn-cl); border-radius: 0 8px 8px 0; }
.note.info    { background: var(--note-info-bg); border-left: 4px solid var(--note-info-bd); color: var(--note-info-cl); border-radius: 0 8px 8px 0; }
.note .note-icon { font-size: 1.1rem;line-height:1.1rem;}
 
/* ─── Verdict boxes ─── */
.verdict {
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.93rem;
}
.verdict.good   { background: var(--vd-good-bg); border-left: 4px solid var(--vd-good-bd); color: var(--vd-good-cl); border-radius: 0 8px 8px 0; }
.verdict.bad    { background: var(--vd-bad-bg);  border-left: 4px solid var(--vd-bad-bd);  color: var(--vd-bad-cl);  border-radius: 0 8px 8px 0; }
.verdict.medium { background: var(--vd-med-bg);  border-left: 4px solid var(--vd-med-bd);  color: var(--vd-med-cl);  border-radius: 0 8px 8px 0; }
.verdict .verdict-body strong { display: inline; }
.verdict .verdict-body p { margin: 0; }
 
/* ─── Comparison Table ─── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.91rem;
}
.comparison-table th {
  background: var(--ct-head-bg);
  color: var(--ct-head-color);
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
}
.comparison-table th:first-child { border-radius: 8px 0 0 0; }
.comparison-table th:last-child  { border-radius: 0 8px 0 0; }
.comparison-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--ct-border);
  vertical-align: top;
}
.comparison-table tr:nth-child(even) td { background: var(--ct-stripe); }
.comparison-table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
.comparison-table tr:last-child td:last-child  { border-radius: 0 0 8px 0; }
 
/* ─── Tag pills ─── */
.tag-pill {
  background: var(--pill-bg);
  color: var(--pill-color);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 11px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.tag-pill:hover {
  background: var(--pill-bg-hover);
  color: var(--pill-cl-hover);
  border-color: var(--link);
}
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.tag-pills a {
  background: var(--pill-bg);
  color: var(--pill-color);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.tag-pills a:hover {
  background: var(--pill-bg-hover);
  color: var(--pill-cl-hover);
  border-color: var(--link);
}
 
/* ─── Section divider ─── */
.section-divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 36px 0;
}
 
/* ═══════════════════════════════════════════
   PAGE-SPECIFIC COMPONENTS
═══════════════════════════════════════════ */
 
/* Hierarchy diagram */
.hierarchy-diagram {
  background: var(--hier-bg);
  border: 1px solid var(--hier-border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hierarchy-diagram .hier-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hierarchy-diagram .hier-connector {
  border-left: 2px dashed var(--hier-dash);
  height: 10px;
  margin: 0 0 0 20px;
}
.hierarchy-diagram .hier-connector.indent-1 { margin-left: 20px; }
.hierarchy-diagram .hier-connector.indent-2 { margin-left: 42px; }
.hierarchy-diagram .hier-row.level-1 { margin-left: 0; }
.hierarchy-diagram .hier-row.level-2 { margin-left: 20px; }
.hierarchy-diagram .hier-row.level-3 { margin-left: 40px; }
.hierarchy-diagram .h-badge {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  padding: 2px 10px;
  min-width: 42px;
  text-align: center;
  flex-shrink: 0;
}
.hierarchy-diagram .h-badge.h1 { background: #1e3a5f; }
.hierarchy-diagram .h-badge.h2 { background: #2c5f2e; }
.hierarchy-diagram .h-badge.h3 { background: #7d3c98; }
.hierarchy-diagram .hier-label {
  font-size: 0.88rem;
  color: var(--hier-text);
}
.hierarchy-diagram .hier-label strong { color: var(--hier-strong); }
 
/* Split-test card */
.splittest-card {
  background: var(--splittest-bg);
  border: 1px solid var(--splittest-border);
  border-radius: 10px;
  padding: 24px;
  margin: 24px 0;
}
.splittest-card h4 {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--splittest-heading);
  margin: 0 0 8px;
}
.splittest-card .splittest-sub {
  font-size: 0.88rem;
  color: var(--splittest-sub);
  margin-bottom: 16px;
  line-height: 1.5;
}
.splittest-card .splittest-sub code {
  background: var(--code-inline-bg);
  border: 1px solid var(--code-inline-bd);
}
.splittest-metrics {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.splittest-metric .metric-num {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.splittest-metric .metric-num.orange { color: var(--splittest-num1); }
.splittest-metric .metric-num.blue   { color: var(--splittest-num2); }
.splittest-metric .metric-caption {
  font-size: 0.75rem;
  color: var(--splittest-caption);
  margin-top: 4px;
  line-height: 1.4;
}
.splittest-card .splittest-source {
  font-size: 0.75rem;
  color: var(--splittest-src);
}
.splittest-card .splittest-source a { color: var(--link); }
 
/* Key takeaways box */
.takeaways-box {
  background: var(--takeaway-bg);
  color: var(--takeaway-text);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 28px 0;
}
.takeaways-box h3 {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--takeaway-head);
  margin: 0 0 16px;
}
.takeaways-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
}
.takeaways-box li {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}
.takeaways-box .yes { color: var(--takeaway-yes); flex-shrink: 0; }
.takeaways-box .no  { color: var(--takeaway-no);  flex-shrink: 0; }
.takeaways-box code {
  background: var(--takeaway-code);
  border: none;
  color: inherit;
  border-radius: 3px;
  padding: 1px 5px;
}
 
/* Orange note */
.note.orange {
  background: var(--orange-note-bg);
  border-left: 4px solid var(--orange-note-bd);
  color: var(--orange-note-cl);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  justify-content: center;
}
 
/* Article header / footer */
.article-header {
  border-bottom: 2px solid var(--border);
  padding-bottom: 28px;
  margin-bottom: 36px;
}
.article-header .lead {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
 
article footer {
  border-top: 2px solid var(--footer-border);
  padding-top: 24px;
  margin-top: 48px;
  font-size: 0.88rem;
  color: var(--footer-text);
}
article footer .footer-credit { margin-bottom: 12px; }
 
/* Overflow wrapper for wide tables */
.table-wrap { overflow-x: auto; margin: 24px 0; }
.table-wrap .comparison-table { margin: 0; }
 
/* body content spacing */
.body-content > * + *{
    margin-top: 26px;
}

/* Checklist table */
.checklist-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.93rem;
}
.checklist-table thead tr { background: var(--cl-head-bg); border-bottom: 2px solid var(--cl-head-bd); }
.checklist-table th, .checklist-table td { padding: 9px 14px; border: 1px solid var(--cl-border); }
.checklist-table .status-yes  { color: var(--cl-yes);  font-weight: 700; }
.checklist-table .status-no   { color: var(--cl-no);   font-weight: 700; }
.checklist-table .status-part { color: var(--cl-part); font-weight: 700; }

/* Progress bars */
.progress-bars { margin: 20px 0; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 0.9rem; }
.bar-label { width: 220px; flex-shrink: 0; color: var(--bar-label); }
.bar-track { flex: 1; height: 10px; background: var(--bar-track); border-radius: 5px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--bar-fill); border-radius: 5px; }
.bar-value { width:100px;text-align: right; color: var(--bar-value); font-weight: 600; }
 
/* Insight list */
ol.insight-list { list-style: none; margin: 16px 0; padding: 0; counter-reset: insight; }
ol.insight-list li {
  counter-increment: insight;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 0.97rem;
}

/* ═══════════════════════════════════════════
   SERVICES / PAGES — REUSABLE COMPONENTS
═══════════════════════════════════════════ */

/* ─── Section label (uppercase overline) ─── */
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ─── Large stat number ─── */
.stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--heading);
}
.stat-num .accent { color: #1978e5; }

/* ─── Service card (lift on hover) ─── */
.svc-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  text-decoration: none;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  text-decoration: none;
}
html.dark .svc-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Arrow icon inside svc-card ─── */
.arrow-icon {
  font-size: 18px;
  color: var(--text-faint);
  transition: transform 0.2s, color 0.2s !important;
}
.svc-card:hover .arrow-icon {
  transform: translate(3px, -3px);
  color: #1978e5;
}

/* ─── Featured badge ─── */
.badge-featured {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(25, 120, 229, 0.12);
  color: #1978e5;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}
html.dark .badge-featured {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

/* ─── Process step dot ─── */
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.process-step:hover .step-num {
  border-color: #1978e5;
  color: #1978e5;
  background: rgba(25, 120, 229, 0.07);
}

/* ─── Info card (sticky sidebar) ─── */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

/* ─── Metric value inside info-card ─── */
.metric-val {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--heading);
}
.metric-val .acc {
  color: #1978e5;
  font-size: 1.2rem;
}

/* ─── Checklist item ─── */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.check-icon {
  color: #16a34a;
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 2px;
}
html.dark .check-icon { color: #4ade80; }

/* ─── Problem card ─── */
.problem-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 20px;
  transition: border-color 0.2s !important;
}
.problem-card:hover { border-color: var(--link); }

/* ─── Timeline dot & duration badge ─── */
.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 5px;
  transition: border-color 0.2s, background-color 0.2s !important;
}
.tl-item:hover .tl-dot {
  border-color: #1978e5;
  background: rgba(25, 120, 229, 0.12);
}
.tl-duration {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--category-bg);
  color: var(--category-color);
  border: 1px solid var(--category-border);
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 8px;
}

/* ─── Results card (case study, reuses splittest vars) ─── */
.results-card {
  background: var(--splittest-bg);
  border: 1px solid var(--splittest-border);
  border-radius: 10px;
  padding: 28px;
}
.results-card h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--splittest-heading);
  margin-bottom: 20px;
}
.result-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--splittest-num1);
}
.result-num sup { font-size: 1.2rem; }
.result-num.blue { color: var(--splittest-num2); }

/* ─── FAQ accordion ─── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  transition: max-height 0.35s ease, padding-top 0.35s ease !important;
}
.faq-item.open .faq-answer {
  max-height: 240px;
  padding-top: 12px;
}
.faq-toggle-icon {
  transition: transform 0.25s !important;
}
.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}

/* ─── Fade-up entrance animations ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-1 { animation: fadeUp 0.4s 0.05s ease both; }
.fade-2 { animation: fadeUp 0.4s 0.15s ease both; }
.fade-3 { animation: fadeUp 0.4s 0.25s ease both; }
.fade-4 { animation: fadeUp 0.4s 0.35s ease both; }
/* aliases used on services catalog page */
.fade-up-1 { animation: fadeUp 0.45s 0.05s ease both; }
.fade-up-2 { animation: fadeUp 0.45s 0.15s ease both; }
.fade-up-3 { animation: fadeUp 0.45s 0.25s ease both; }
.fade-up-4 { animation: fadeUp 0.45s 0.35s ease both; }

/* ─── Chart container ─── */
.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px 16px;
  margin: 24px 0;
  overflow-x: auto;
}
.chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: 16px;
  text-align: center;
}
.chart-wrap svg { display: block; margin: 0 auto; }

/* ─── Timeline ─── */
.timeline-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  margin: 24px 0;
  overflow-x: auto;
}
.timeline-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: 20px;
  text-align: center;
}

.stat-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0;
}
.stat-card {
  flex: 1; min-width: 140px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; text-align: center;
}
.stat-card .stat-num { font-size: 2rem; font-weight: 700; color: var(--category-color); line-height: 1.2; }
.stat-card .stat-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

/* ─── Page layout: main + sidebar ─── */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 720px) {
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}
 
/* ─── Category header ─── */
.category-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.category-header .cat-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.category-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}
.category-header .cat-count {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 6px;
}
 
/* ─── Sort bar ─── */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.83rem;
  color: var(--text-faint);
}
.sort-bar .sort-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.sort-bar span { margin-right: 4px; }
.sort-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px;
  font-size: 0.8rem; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.sort-btn:hover { border-color: var(--link); color: var(--link); }
.sort-btn.active { background: var(--category-bg); border-color: var(--category-border); color: var(--category-color); font-weight: 700; }
 
/* ─── View toggle ─── */
.view-toggle {
  display: flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.view-btn {
  background: none;
  border: none;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--text-faint);
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.view-btn:hover { background: var(--sidebar-bg); color: var(--text); }
.view-btn.active { background: var(--category-bg); color: var(--category-color); }
.view-btn svg { width: 16px; height: 16px; fill: currentColor; }
 
/* ─── Post card — LIST mode (default) ─── */
.post-list { display: flex; flex-direction: column; gap: 20px; }
 
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 400px 1fr;
  transition: box-shadow .2s, border-color .2s;
}
@media(max-width: 640px){
  .post-card { grid-template-columns: 1fr; }
}
.post-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-color: var(--link);
}
.post-card.no-cover { grid-template-columns: 1fr; }
 
/* ─── GRID mode ─── */
.post-list.view-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .post-list.view-grid { grid-template-columns: 1fr; }
}
 
.post-list.view-grid .post-card {
  grid-template-columns: 1fr;
}
.post-list.view-grid .card-cover {
  margin:auto;
}
.post-list.view-grid .card-excerpt {
  -webkit-line-clamp: 2;
}
.post-list.view-grid .card-body {
  gap: 8px;
  padding: 16px 18px;
}
.post-list.view-grid .card-categories{
  margin-top: 16px;
}
 
.card-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
/* category badges */
.card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-categories .category {
  background: var(--category-bg); color: var(--category-color);
  border: 1px solid var(--category-border); border-radius: 4px;
  padding: 2px 8px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
  transition: all 300ms ease;
}
.card-categories .category:hover,
.card-categories .category.active-cat {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
 
/* Title */
.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading);
  text-decoration: none;
  display: block;
}
.card-title:hover {
  color: var(--link);
  text-decoration: none;
}
 
/* Excerpt */
.card-excerpt {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
/* Tags */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.card-tags a {
  background: var(--tag-bg); color: var(--tag-color);
  border-radius: 4px; padding: 2px 8px; font-size: 0.75rem;
  transition: background .15s, color .15s;
}
.card-tags a:hover {
  background: var(--pill-bg-hover); color: var(--pill-cl-hover);
  text-decoration: none;
}
 
/* Meta: date + read time */
.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
.card-meta .read-time::before { content: '· '; }
 
/* Cover image */
.card-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(200px, 100%, 400px);
  aspect-ratio: 4/3;
}
.card-cover img {
  width: clamp(200px, 100%, 400px);
  display: block;
}
.card-cover .cover-placeholder {
    background: var(--cover-bg);
  width: clamp(200px, 100%, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: 0.4;
  aspect-ratio: 4/3;
}
 
/* ─── Pagination ─── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
}
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.85rem; color: var(--text-muted);
  cursor: pointer; background: var(--surface);
  transition: all .15s;
  text-decoration: none;
}
.page-btn:hover { border-color: var(--link); color: var(--link); text-decoration: none; }
.page-btn.active { background: var(--link); border-color: var(--link); color: #fff; font-weight: 700; }
.page-btn.dots { border: none; background: none; cursor: default; }
 
/* ─── Sidebar ─── */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
 
.sidebar-block {
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 10px;
  padding: 18px 20px;
}
.sidebar-block h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  margin-bottom: 14px;
}
 
/* All categories list */
.cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cat-list li {
  margin-bottom: 8px;
}
.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 1px solid var(--divider);
  transition: color .15s;
}
.cat-list a:hover { color: var(--link); text-decoration: none; }
.cat-list a.current { color: var(--link); font-weight: 700; }
.cat-list .count {
  font-size: 0.75rem;
  color: var(--text-faint);
  background: var(--tag-bg);
  border-radius: 20px;
  padding: 1px 8px;
}
 
/* Popular tags cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud a {
  background: var(--tag-bg); color: var(--tag-color);
  border-radius: 4px; padding: 3px 10px; font-size: 0.78rem;
  transition: background .15s, color .15s;
}
.tag-cloud a:hover { background: var(--pill-bg-hover); color: var(--pill-cl-hover); text-decoration: none; }
 
/* About block */
.about-author {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; font-weight: 700;
}
.author-info .name { font-size: 0.9rem; font-weight: 700; color: var(--heading); }
.author-info .bio { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
/* ═══════════════════════════════════════════════════════
   Portfolio — page-specific styles
   Append these rules to style.css
   ═══════════════════════════════════════════════════════ */

/* ── Portfolio page header ── */
.portfolio-page-header {
  margin-bottom: 32px;
}
.portfolio-page-header h1 {
  margin-bottom: 10px;
}
.portfolio-page-lead {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}

/* ── Sort bar: project count ── */
.portfolio-count {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ── Card: logo area ── */
.portfolio-logo-wrap {
  background: var(--cover-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  width: clamp(200px, 100%, 400px);
}
.portfolio-logo-placeholder {
  background: var(--cover-bg);
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ── Card: brand name in meta row ── */
.portfolio-brand-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ── Empty state ── */
.portfolio-empty {
  color: var(--text-muted);
  font-size: 0.94rem;
  padding: 40px 0;
  text-align: center;
}

/* ─────────────────────────────────────────────────────
   Detail page
   ───────────────────────────────────────────────────── */

/* Breadcrumb */
.portfolio-breadcrumb {
  margin-bottom: 24px;
  font-size: 0.85rem;
}
.portfolio-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.portfolio-breadcrumb a:hover {
  color: var(--link);
}

/* Brand block below H1 */
.portfolio-detail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.portfolio-detail-logo {
  max-height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}
.portfolio-logo-placeholder--lg {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}
.portfolio-detail-brand-name {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

/* Description paragraphs */
.portfolio-description {
  margin-top: 24px;
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--text);
}
.portfolio-description p {
  margin-bottom: 18px;
}
.portfolio-description p:last-child {
  margin-bottom: 0;
}

/* Back link */
.portfolio-back-wrap {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.portfolio-back-link {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.portfolio-back-link:hover {
  color: var(--link);
}