/* Fonts loaded via functions.php preload — @import removed to eliminate render-blocking cascade */

/* =========================================================
   THECREATOOLS — TC-CPT-STYLES.CSS  v17.0 (Brand Book 2025 — Enhanced)
   Scope: All CPT archives & singles: Tasks, Tools, Guides, Deals, VS
   Aligned with front-page.css design tokens & visual improvements.
   ========================================================= */

/* =========================================================
   1. LOCAL FONTS
   ========================================================= */
/* =========================================================
   2. DESIGN TOKENS — zsynchronizowane z front-page.css
   ========================================================= */
:root {
  /* ── Brand Tokens (canonical) — synced with style.css ── */
  --y:       #F1E52D;
  --y-dark:  #C8BF00;
  --y-deep:  #6B6400;
  --y-lo:    rgba(241,229,45,.12);
  --y-bdr:   rgba(241,229,45,.22);
  --li:      #EDC1F2;
  --li-sat:  #9B4DAB;
  --li-lo:   rgba(155,77,171,.10);
  --li-bdr:  rgba(155,77,171,.25);
  --ink:     #1C1A17;
  --green:   #276641;
  --red:     #8B2020;
  --bg-page: #EDE5D6;
  --bg-card: #FAF6EF;
  --bg-ink:  #1C1A17;
  --bdr:     #C8BAA5;
  --bdr-sub: #DDD3C3;
  --t:       #1C1A17;
  --tm:      #4A4435;
  --tf:      #6B6154;
  --f-d: "Fraunces", Georgia, serif;
  --f-b: "Outfit", system-ui, sans-serif;
  --f-m: "JetBrains Mono", monospace;
  --green-lo:  rgba(39,102,65,.11);
  --green-bdr: rgba(39,102,65,.22);
  --red-lo:    rgba(139,32,32,.10);
  --green-dark: #034f46;
  --bg-white:  #FFFFFF;
  --dt:        #F3EDE2;
  --dtm:       rgba(243,237,226,.72);
  --dtf:       rgba(243,237,226,.55);
  --dbdr:      rgba(255,255,255,.10);
  --dbdr-sub:  rgba(255,255,255,.06);
  --bg-deep:   #E0D5C2;
  --sh-xs:     0 1px 4px rgba(0,0,0,.18);
  --sh-sm:     0 3px 12px rgba(0,0,0,.22);
  --sh-md:     0 8px 28px rgba(0,0,0,.28);
  --ease:      .2s cubic-bezier(.4,0,.2,1);
  --ease-f:    .13s ease;

  /* ── Legacy aliases ── */
  --tc-blue:            var(--ink);
  --tc-blue-ink:        var(--ink);
  --tc-blue-text:       var(--y-deep);
  --tc-blue-dark:       #0e0d0b;
  --tc-blue-light:      var(--y-lo);
  --tc-amber:           var(--y);
  --tc-amber-light:     var(--y-lo);
  --tc-deal-green:      var(--green);
  --tc-deal-green-hov:  #1e5232;
  --tc-green-light:     var(--green-lo);
  --tc-warning:         #f59e0b;
  --tc-warning-text:    var(--y-deep);
  --tc-danger:          var(--red);
  --tc-red:             var(--red);
  --tc-red-light:       var(--red-lo);
  --tc-origin-accent:   var(--li-sat);

  --tc-white:           var(--bg-card);
  --tc-bg-light:        #F3EDE2;
  --tc-bg-softer:       var(--bg-page);
  --tc-bg-mid:          #E0D5C2;
  --tc-bg-dark:         var(--bg-ink);
  --tc-grey-light:      var(--bdr);

  --tc-text:            var(--t);
  --tc-text-muted:      var(--tm);
  --tc-text-faint:      var(--tf);
  --tc-muted:           rgba(28,26,23,0.72);

  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --font-primary:       var(--f-b);
  --font-heading:       var(--f-d);
  --font-mono:          var(--f-m);
  --tc-h1:              clamp(2.2rem, 4vw, 2.8rem);

  --tc-container:       1140px;
  --tc-container-wide:  1320px;

  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 8px; --r-pill: 999px;
  --tc-radius-sm:       var(--r-sm);
  --tc-radius-md:       var(--r-md);
  --tc-radius-lg:       var(--r-lg);
  --tc-radius-xl:       var(--r-xl);
  --tc-radius-pill:     var(--r-pill);

  --tc-shadow-soft:     0 10px 30px rgba(28,26,23,0.08);
  --tc-shadow-card:     0 3px 12px rgba(28,26,23,0.09);
  --tc-shadow-hover:    0 15px 40px rgba(28,26,23, 0.12);
  --tc-shadow-focus:    0 0 0 3px rgba(28,26,23,0.25);
  --tc-shadow-btn-blue: 0 4px 14px rgba(28,26,23,0.35);

  --tr-fast:   0.15s ease;
  --tr-normal: 0.25s cubic-bezier(0.4,0,0.2,1);
  --tr-slow:   0.4s ease;
}

/* =========================================================
   3. BASE RESETS & HELPERS
   ========================================================= */
.tc-archive, .tc-task-wrapper, .tc-tool, .tc-guide-wrapper {
  font-family: var(--font-primary);
  color: var(--dt);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: #1c1a17;
}

.tc-archive *, .tc-task-wrapper *, .tc-tool *, .tc-guide-wrapper * {
  box-sizing: border-box;
}

.tc-container, .tc-wrap {
  width: 100%;
  max-width: var(--tc-container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  box-sizing: border-box;
}

h1, h2, h3, h4,
.tc-archive h1, .tc-archive h2, .tc-archive h3, .tc-archive h4,
.tc-task-wrapper h1, .tc-task-wrapper h2, .tc-task-wrapper h3,
.tc-tool h1, .tc-tool h2, .tc-tool h3,
.tc-guide-wrapper h1, .tc-guide-wrapper h2, .tc-guide-wrapper h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dt);
  line-height: 1.2;
  margin: 0;
}

.tc-archive a, .tc-task-wrapper a, .tc-tool a, .tc-guide-wrapper a {
  text-decoration: none;
  transition: var(--tr-fast);
}
.tc-task-wrapper a:hover, .tc-tool a:hover, .tc-guide-wrapper a:hover {
  text-decoration: underline;
}

.tc-empty {
  text-align: center;
  color: var(--dtm);
  padding: var(--sp-16) var(--sp-6);
  background: rgba(255,255,255,0.06);
  border-radius: var(--tc-radius-lg);
  border: 2px dashed var(--dbdr);
}

/* =========================================================
   4. BUTTONS — brand book §5 (pill, shimmer, zawsze pill)
   ========================================================= */
.tc-btn {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 8px;
  padding: 0.72rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--f-b);
  font-weight: 700; font-size: 0.84rem;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none !important;
  transition: transform var(--tr-normal), opacity var(--tr-normal), box-shadow var(--tr-normal);
  white-space: nowrap; line-height: 1;
  position: relative; overflow: hidden;
}
.tc-btn:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }

/* Shimmer removed — brandbook: ZERO gradients */
.tc-btn-primary::before,
.tc-btn--primary::before,
.tc-btn--deal::before { content: none; }

.tc-btn-primary, .tc-btn--primary {
  background: var(--ink); border-color: var(--dbdr); color: var(--y) !important;
  box-shadow: var(--tc-shadow-btn-blue);
}
.tc-btn-primary:hover, .tc-btn--primary:hover {
  opacity: 0.88; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28,26,23,0.42);
  text-decoration: none !important; color: var(--y) !important;
}

/* Secondary — na ciemnym tle */
.tc-btn-secondary, .tc-btn--secondary {
  background: rgba(255,255,255,0.08); color: var(--dt) !important;
  border-color: var(--dbdr);
}
.tc-btn-secondary:hover, .tc-btn--secondary:hover {
  background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.42);
  transform: translateY(-2px); text-decoration: none !important;
}

/* Secondary Light — na jasnym tle */
.tc-btn--secondary-light {
  background: rgba(255,255,255,0.08); color: var(--dt) !important;
  border-color: var(--dbdr);
}
.tc-btn--secondary-light:hover {
  background: rgba(255,255,255,0.16); color: var(--dt) !important;
  border-color: rgba(255,255,255,0.42); transform: translateY(-2px);
}

/* Deal — zawsze green, nigdy blue */
.tc-btn--deal {
  background: var(--tc-deal-green); color: #fff !important;
  border-color: var(--tc-deal-green);
  box-shadow: 0 4px 14px rgba(39,102,65,0.30);
}
.tc-btn--deal:hover {
  opacity: 0.88; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(39,102,65,0.38);
  text-decoration: none !important;
}

/* Origin — fioletowy dla Start Here CTA */
.tc-btn-origin {
  background: var(--tc-origin-accent); color: #fff !important;
  border-color: var(--tc-origin-accent);
  box-shadow: 0 4px 14px rgba(155,77,171,0.30);
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 0.9rem 2rem; border-radius: var(--tc-radius-pill);
  font-weight: 600; font-size: 1rem;
  text-decoration: none !important;
  transition: transform var(--tr-normal), opacity var(--tr-normal), box-shadow var(--tr-normal);
}
.tc-btn-origin:hover {
  opacity: 0.88; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(155,77,171,0.38);
}

/* =========================================================
   5. FORMS & INPUTS — brand book §5
   ========================================================= */
.tc-input, .tc-select {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--dt);
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--dbdr);
  border-radius: var(--tc-radius-pill);
  padding: 0.65rem 1.1rem;
  width: 100%;
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--tc-shadow-card);
}
.tc-input::placeholder { color: var(--dtf); }
.tc-input:hover, .tc-select:hover { border-color: rgba(255,255,255,0.20); }
.tc-input:focus, .tc-select:focus {
  border-color: var(--y); box-shadow: 0 0 0 3px rgba(241,229,45,.22);
}
.tc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F3EDE2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 2.4rem; cursor: pointer;
}

/* =========================================================
   6. ARCHIVE HERO — dark, gradient + dot-grid texture
   Spójny z hero na front-page
   ========================================================= */
.tc-archive-hero {
  background-color: #1c1a17;
  padding: var(--sp-16) 0 var(--sp-12);
  padding-top: calc(var(--sp-16) + 72px);
  text-align: center;
  border-bottom: 1px solid var(--dbdr);
  position: relative;
  overflow: hidden;
}

/* Fade-out na dole hero — usunięty gradient */
.tc-archive-hero::after {
  content: none;
}

.tc-archive-hero > * { position: relative; z-index: 2; }
.tc-archive-hero .tc-container { position: relative; z-index: 2; }

.tc-archive-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--dt);
}

.tc-archive-lead {
  font-size: 1.05rem;
  color: var(--dtm);
  max-width: 580px;
  margin: 0 auto var(--sp-8);
  line-height: 1.7;
}

/* Toolbar — pasek wyszukiwania i filtrów */
.tc-toolbar {
  display: flex; 
  gap: var(--sp-3); 
  justify-content: center; 
  flex-wrap: wrap;
  max-width: 880px; 
  margin: 0 auto;
}

.tc-toolbar .tc-input, 
.tc-toolbar .tc-select, 
.tc-toolbar .tc-btn {
  height: 50px; 
  font-size: 0.95rem;
}

.tc-input-wrap {
  position: relative;
  flex-grow: 1;
  min-width: 220px;
}
.tc-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dtf);
  pointer-events: none;
}
.tc-input--has-icon {
  padding-left: 42px !important;
}

.tc-toolbar .tc-input {
  flex-grow: 1;
  min-width: 220px;
  width: 100%;
  color: var(--dt) !important;
  background-color: rgba(255,255,255,0.08);
  border: 1.5px solid var(--dbdr);
  padding: 0 16px;
}

.tc-toolbar .tc-input::placeholder {
  color: var(--dtf);
  opacity: 1;
}

.tc-toolbar .tc-select {
  color: var(--dt) !important;
  background-color: rgba(255,255,255,0.08);
  border: 1.5px solid var(--dbdr);
}

/* =========================================================
   7. ARCHIVE: LAYOUT
   ========================================================= */
.tc-section { padding: var(--sp-16) 0; }
.tc-section + .tc-section { padding-top: var(--sp-4); }

/* Archive section: styl spójny z tc-flow-section */
.tc-archive .tc-section {
  background: transparent;
  border-top: 1px solid var(--dbdr-sub);
  border-bottom: none;
  padding-block: var(--sp-12);
}

.tc-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: stretch;
}
@media (min-width: 640px)  { .tc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tc-grid { grid-template-columns: repeat(3, 1fr); } }

/* 2-column grid variant */
.tc-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tc-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* 3-column grid forced */
.tc-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .tc-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   8. ARCHIVE: CATEGORY HEADERS
   ========================================================= */
.tc-archive .tc-cat-head {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin: var(--sp-20) 0 var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--dt); position: relative;
  padding-bottom: 0;
}

/* Pierwsza kategoria bez górnego marginesu */
.tc-archive .tc-cat-head:first-of-type { margin-top: var(--sp-4); }

.tc-archive .tc-cat-icon {
  font-size: 1.4rem;
  background: var(--tc-white);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--tc-radius-md);
  border: 1px solid var(--tc-grey-light);
  box-shadow: var(--tc-shadow-card);
  flex-shrink: 0;
}

.tc-archive .tc-cat-text {
  font-family: var(--font-heading); font-weight: 700;
}

.tc-archive .tc-cat-count {
  font-size: 0.8rem; color: var(--dtf);
  background: rgba(255,255,255,0.10);
  padding: 4px 12px; border-radius: var(--tc-radius-pill);
  font-weight: 700; font-family: var(--font-primary);
  flex-shrink: 0;
}

.tc-archive .tc-cat-line {
  flex-grow: 1; height: 2px;
  background: var(--dbdr);
  border-radius: 2px;
}

/* =========================================================
   9. CARDS — brand book §7
   white bg, radius-md, shadow-card, hover translateY(-6px)
   Brak border-left / border-top akcentów
   ========================================================= */
.tc-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: 0 3px 12px rgba(28,26,23,.09);
  transition: transform var(--tr-normal);
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  color: var(--t);
}
.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(28,26,23,0.14);
  border-color: rgba(28,26,23,0.28);
  z-index: 10;
}

.tc-card .tc-link { position: absolute; inset: 0; z-index: 5; }

.tc-card--row    { flex-direction: row; align-items: flex-start; gap: var(--sp-4); }
.tc-card--col    { flex-direction: column; }
.tc-card--center { flex-direction: column; align-items: center; text-align: center; }

/* Deal card variant — amber accent top stripe (brand book) */
.tc-card--deal {
  flex-direction: column;
}
.tc-card--deal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tc-amber) 0%, rgba(241,229,45,0.4) 100%);
  border-radius: var(--tc-radius-md) var(--tc-radius-md) 0 0;
}


/* Specific wrapper card overrides — purple background */
.tc-guide-wrapper .tc-card, .tc-task-wrapper .tc-card, .tc-tool .tc-card {
  background: #9b4dab;
  border-color: rgba(255,255,255,0.1);
}

/* Revert primary card to default background */
.tc-card.primary {
  background: var(--bg-white) !important;
  color: var(--t) !important;
}
.tc-card.primary :is(h1, h2, h3, h4, p, span, div):not(.tc-btn) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.tc-card h3, .tc-card-title { font-family: var(--f-d); font-weight: 700; font-size: 0.94rem; color: var(--t); margin-bottom: var(--sp-1); transition: color var(--tr-fast); }
.tc-card:hover h3, .tc-card:hover .tc-card-title { color: var(--tc-text); }
.tc-card-title a { color: inherit; }
.tc-card-title a:hover { color: var(--tc-text); text-decoration: none; }

.tc-desc { font-size: 0.88rem; color: var(--tc-text-muted); margin: 0; line-height: 1.55; }

/* Card footer */
.tc-card-foot {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--tc-grey-light);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; width: 100%;
}
.tc-card-meta {
  font-size: 0.8rem; color: var(--tc-text-muted);
  margin-bottom: var(--sp-3);
}
.tc-card-excerpt { color: var(--tc-text-muted); font-size: 0.9rem; line-height: 1.6; flex-grow: 1; }

/* Read more link */
.tc-read-more {
  font-weight: 700; color: var(--tc-text);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.tc-read-more::after { content: "→"; transition: transform 0.2s; }
.tc-card:hover .tc-read-more::after { transform: translateX(4px); }

/* Best Tool badge */
.tc-best-tool {
  background: var(--tc-amber-light); color: var(--y-deep);
  padding: 4px 10px; border-radius: var(--tc-radius-sm);
  font-weight: 600; font-size: 0.75rem; flex-shrink: 0;
}

/* Meta row (Guides date / category) */
.tc-meta {
  font-size: 0.72rem; color: var(--tc-text-muted); margin-bottom: var(--sp-3);
  display: flex; justify-content: space-between;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.tc-meta-date { color: var(--tc-text); font-weight: 600; }

/* =========================================================
   10. CARD SPECIFICS: TASKS ARCHIVE
   ========================================================= */
.tc-task-icon {
  color: var(--tc-text); background: var(--tc-amber-light);
  width: 44px; height: 44px; border-radius: var(--tc-radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
  transition: transform var(--tr-normal);
  flex-shrink: 0;
}
.tc-card:hover .tc-task-icon {
  background: #9b4dab; color: var(--y);
  transform: scale(1.06) translateY(-2px);
}

.tc-task-title { font-size: 1.12rem; margin-bottom: var(--sp-2); line-height: 1.4; }

.tc-task-foot {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; margin-top: auto;
  padding-top: var(--sp-4); border-top: 1px solid var(--tc-grey-light);
}

/* Tool Avatars (Facepile) */
.tc-tool-avatars { display: flex; align-items: center; justify-content: flex-end; }
.tc-avatar {
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  border-radius: 50% !important;
  background: var(--tc-white) !important;
  border: 2px solid var(--tc-white) !important;
  box-shadow: 0 2px 8px rgba(28,26,23,0.12) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-left: -10px !important; position: relative; z-index: 1;
  padding: 5px !important; overflow: hidden !important; box-sizing: border-box !important;
  transition: transform var(--tr-fast);
}
.tc-avatar:hover { transform: translateY(-4px) scale(1.12); z-index: 10; }
.tc-avatar:first-child { margin-left: 0 !important; }
.tc-avatar img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; display: block !important;
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
.tc-avatar span { font-size: 0.82rem !important; font-weight: 800 !important; color: #9b4dab !important; }

/* =========================================================
   11. CARD SPECIFICS: TOOLS ARCHIVE
   ========================================================= */
/* Tool card logo — 40×40, border-radius 11px, category-colored bg */
.tc-card-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 4px;
  /* Default: yellow category */
  background: var(--y-lo);
  border: 1px solid var(--y-bdr);
}
.tc-card-logo img { width: 100%; height: 100%; object-fit: contain; min-width: 60%; min-height: 60%; }
.tc-card-fb { font-size: 1rem; font-weight: 700; color: var(--t); }
.tc-card-body { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

/* Category color variants for tool card logos */
.tc-card-logo--yellow  { background: var(--y-lo);     border-color: var(--y-bdr); }
.tc-card-logo--lilac   { background: var(--li-lo);    border-color: var(--li-bdr); }
.tc-card-logo--green   { background: var(--green-lo); border-color: var(--green-bdr); }

/* =========================================================
   12. CARD SPECIFICS: COMPARISONS ARCHIVE
   ========================================================= */
.tc-comp-card { justify-content: space-between; }
.tc-vs-matchup {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); margin-bottom: var(--sp-4); width: 100%; position: relative;
}
.tc-vs-logo {
  width: 64px; height: 64px; background: var(--tc-bg-light);
  border-radius: var(--tc-radius-md);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(28,26,23,0.06); padding: 10px; z-index: 1;
}
.tc-vs-logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-vs-letter { font-weight: 800; font-size: 1.5rem; color: #9b4dab; }
.tc-vs-badge-v2 {
  font-size: 0.72rem; font-weight: 900; color: #fff; background: var(--tc-text);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  border: 3px solid var(--tc-white); box-shadow: 0 4px 6px rgba(28,26,23,0.12);
  letter-spacing: -0.04em;
}
.tc-vs-title { font-size: 1.15rem; margin-bottom: var(--sp-4); line-height: 1.3; }
.tc-comp-foot {
  width: 100%; margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--tc-grey-light);
  display: flex; justify-content: center;
}
.tc-comp-foot .tc-read-more { font-size: 0.9rem; }

/* =========================================================
   13. DEALS ARCHIVE: SECTION HEADER (archive-deals.php)
   ========================================================= */
.tc-section-head {
  text-align: center;
  margin-bottom: var(--sp-12);
  padding-top: var(--sp-10);
}
.tc-section-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  letter-spacing: -0.025em; margin-bottom: var(--sp-4);
  position: relative; display: inline-block;
  padding-bottom: var(--sp-5);
}
/* Gradient underline */
.tc-section-title::after {
  content: "";
  display: block;
  width: 48px; height: 4px;
  background: linear-gradient(90deg, var(--y) 0%, rgba(241,229,45,0.2) 100%);
  border-radius: var(--tc-radius-pill);
  margin: var(--sp-4) auto 0;
}
.tc-section-subtitle {
  font-size: 1.05rem; color: var(--tc-text-muted);
  max-width: 560px; margin: 0 auto; line-height: 1.65;
}

/* Pagination */
.tc-pagination { text-align: center; margin-top: var(--sp-12); }
.tc-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  margin: 0 3px; border-radius: var(--tc-radius-pill);
  background: var(--tc-white); border: 1px solid var(--tc-grey-light);
  color: var(--tc-text); font-size: 0.9rem; font-weight: 600;
  transition: opacity var(--tr-fast); text-decoration: none;
}
.tc-pagination .page-numbers:hover { border-color: #9b4dab; color: #9b4dab; }
.tc-pagination .page-numbers.current {
  background: #9b4dab; border-color: #9b4dab; color: #fff;
}

/* =========================================================
   14. SINGLE PAGES: HERO — dark, spójny z archive-hero
   ========================================================= */
/* ── Hero: default light variant ── */
.tc-hero, .tc-tool-hero {
  background-color: #1c1a17;
  padding-block: 96px 80px;
  padding-top: calc(96px + 72px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--dbdr);
  color: var(--dt);
}

/* ── Hero: dark variant (green on guide/task, ink fallback) ── */
.tc-hero--dark {
  background-color: #1c1a17;
  border-bottom: 1px solid var(--dbdr);
  color: var(--dt);
}
.tc-hero--dark .tc-breadcrumb { color: var(--dtf); }
.tc-hero--dark .tc-breadcrumb a { color: var(--dtm); }
.tc-hero--dark .tc-breadcrumb a:hover { color: var(--y); }
.tc-hero--dark .tc-author-bar { color: rgba(255,255,255,0.50); }
.tc-hero--dark .tc-author-bar__meta a { color: rgba(255,255,255,0.65); }
.tc-hero--dark .tc-author-bar__ai-badge { background: var(--li); color: var(--ink); }
.tc-hero--dark .tc-hero-h1 { color: var(--dt) !important; }
.tc-hero--dark .tc-hero-lead,
.tc-hero--dark .tc-hero-sub { color: var(--dtm); }
.tc-hero--dark h2, .tc-hero--dark h3 { color: var(--dt) !important; }
.tc-hero--dark .tc-step-badge { color: var(--li); }

.tc-hero > *, .tc-tool-hero > * { position: relative; z-index: 1; }
.tc-hero .tc-container, .tc-tool-hero .tc-container { position: relative; z-index: 1; }

.tc-hero-grid, .tc-tool-hero__grid {
  display: grid; gap: var(--sp-12);
}
@media(min-width: 900px) {
  .tc-hero-grid { grid-template-columns: 1fr 340px; align-items: start; }
  .tc-tool-hero__grid { grid-template-columns: 1fr 360px; align-items: start; }
}

.tc-hero-h1, .tc-tool-title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  margin-bottom: 20px; letter-spacing: -0.03em; line-height: 1.08;
  color: var(--dt) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}
/* Serif italic accent inside hero headings */
.tc-hero-h1 em, .tc-tool-title em {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: inherit;
  color: var(--li-sat);
}

/* RESET gradient tekstu poza hero — zapobiega dziedziczeniu -webkit-text-fill-color */
.tc-card h3,
.tc-card h4,
.tc-tool-card h3,
.tc-card h3,
.tc-card h4,
.tc-tool-card h3,
.tc-tool-card h4,
.tc-info-card h2,
.tc-info-card h4,
.tc-decision-item h4,
.tc-cat-head,
.tc-section h2,
.tc-section h3,
.tc-section h4,
.tc-context-section h2, .tc-context-section h3, .tc-context-section h4, .tc-context-section h5,
.tc-matrix-section h2, .tc-matrix-section h3,
.tc-wisdom-section h2, .tc-wisdom-section h3,
.tc-decision-section h2, .tc-decision-section h3,
.tc-next-section h2, .tc-next-section h3,
.tc-flow-section h2, .tc-flow-section h3,
.tc-content-body h2, .tc-content-body h3,
.tc-facts-card h3,
.tc-card--quickfacts p,
.tc-task-wrapper h2, .tc-task-wrapper h3, .tc-task-wrapper h4,
.tc-guide-wrapper h2, .tc-guide-wrapper h3, .tc-guide-wrapper h4,
.tc-tool h2 {
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  background-image: none !important;
  color: #9b4dab !important;
}

.tc-tool h3, .tc-tool h4 {
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  background-image: none !important;
  color: #9B4DAB !important;
}

/* Kolory w hero (dark bg) */
.tc-hero h2, .tc-hero h3, .tc-hero h4,
.tc-tool-hero h2, .tc-tool-hero h3, .tc-tool-hero h4 {
  -webkit-text-fill-color: unset !important;
  color: var(--dt) !important;
  background-image: none !important;
}

.tc-hero-lead, .tc-hero-sub, .tc-tool-tagline {
  font-size: 1.12rem; color: var(--dtm);
  margin-bottom: 28px; line-height: 1.7;
}

.tc-breadcrumb { font-size: 0.85rem; color: var(--dtf); margin-bottom: 20px; }
.tc-breadcrumb a { color: var(--dtm); text-decoration: none; }
.tc-breadcrumb a:hover { color: var(--y); text-decoration: none; }

.tc-author-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tm);
}
.tc-author-bar__avatar {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.tc-author-bar__meta a { color: var(--tm); text-decoration: none; }
.tc-author-bar__meta a:hover { color: #9b4dab; }
.tc-author-bar__ai-badge {
  background: var(--y);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .tc-author-bar__ai-badge {
    display: table;
    margin-top: 8px;
  }
}

.tc-disclosure {
  margin-top: 48px;
  padding: 16px 20px;
  border-left: 3px solid var(--y);
  background: var(--bg-page);   /* solid — prevents theme palette var resolving to dark */
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--tm);
  line-height: 1.6;
}
/* Explicit dark text on cream disclosure bg — prevents cream inheritance from wrapper */
.tc-disclosure p,
.tc-disclosure strong { color: var(--tm) !important; }
.tc-disclosure a { color: var(--theme-palette-color-1); }

/* ── Guide Tool Strip ─────────────────────────────────────────────────────── */
/* ── Guide Tool Strip — dark full-width band ──────────────────────────────── */
/* ── Guide Tool Strip — dark band with pill/chip cards ── */
.tc-guide-tool-strip {
  width: 100%;
  background: var(--bg-ink);
  margin-bottom: 0;
}
.tc-guide-tool-strip__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-block: 18px;
}
.tc-guide-tool-strip__label {
  font-family: var(--f-m);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(250,246,239, 0.40);
  white-space: nowrap;
  flex-shrink: 0;
}
.tc-guide-tool-strip__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
}
/* Pill/chip cards — icon left, name right, one line */
.tc-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px 0 6px;
  border-radius: 24px;
  border: 1px solid rgba(250,246,239, 0.16);
  background: rgba(250,246,239, 0.08);
  font-family: var(--f-b);
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: border-color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast);
  white-space: nowrap;
  box-sizing: border-box;
}
.tc-guide-pill:hover {
  border-color: var(--y);
  background: rgba(241,229,45, 0.14);
  color: var(--y);
  transform: translateY(-1px);
  text-decoration: none;
}
.tc-guide-pill__logo-wrap {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-guide-pill__logo {
  width: 28px;
  height: 28px;
  object-fit: cover;
  display: block;
}
.tc-guide-pill__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(250,246,239, 0.18);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
}
.tc-guide-tool-strip__cta {
  font-family: var(--f-b);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--y);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--tr-fast);
}
.tc-guide-tool-strip__cta:hover { opacity: 0.75; text-decoration: underline; }

/* ── Guide Decision Block ─────────────────────────────────────────────────── */
.tc-guide-decision-block {
  margin: 40px 0 32px;
  padding: 28px 28px 24px;
  background: var(--bg-ink);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  color: #fff;
}
.tc-guide-decision-block__heading {
  font-family: var(--f-d);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}
.tc-guide-decision-block__heading em {
  font-style: italic;
  color: var(--li);
}
.tc-guide-decision-block__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
/* Decision card — pill/chip layout: icon left, name right */
.tc-decision-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: rgba(250,246,239,0.08);
  border: 1px solid rgba(250,246,239,0.14);
  border-radius: 24px;
  text-decoration: none;
  transition: border-color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast);
}
.tc-decision-card:hover {
  border-color: var(--y);
  background: rgba(241,229,45,0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.tc-decision-card__logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-decision-card__logo {
  width: 36px;
  height: 36px;
  object-fit: cover;
  display: block;
}
.tc-decision-card__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(250,246,239,0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.tc-decision-card__name {
  font-family: var(--f-b);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.tc-decision-card:hover .tc-decision-card__name { color: var(--y); }
.tc-guide-decision-block__cta {
  display: block;
  width: 100%;
  text-align: center;
}
.tc-guide-decision-block .tc-btn--primary {
  background: var(--y);
  color: var(--ink) !important;
  border-color: var(--y);
}
.tc-guide-decision-block .tc-btn--primary:hover {
  opacity: 0.88;
}
@media (max-width: 640px) {
  .tc-guide-decision-block { padding: 20px 18px; }
  .tc-guide-decision-block__grid { gap: 8px; }
}


.tc-hero-actions, .tc-tool-hero__buttons {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; margin-bottom: 16px;
}

/* =========================================================
   15. SINGLE TOOL: SPECIFICS
   ========================================================= */
.tc-tool-hero__left { display: flex; flex-direction: column; gap: 16px; }

.tc-tool-logo {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; margin-bottom: 12px;
  background: #fff; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(28,26,23,0.12);
  min-width: 124px; min-height: 52px; max-width: 180px;
}
.tc-tool-logo img { max-height: 64px; max-width: 160px; width: auto; height: auto; object-fit: contain; display: block; }

.tc-tool-category-line {
  font-size: 0.82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tc-text-muted); margin: 0;
}
.tc-tool-official-links { display: flex; gap: 16px; flex-wrap: wrap; }
.tc-tool-official-links a {
  font-size: 0.82rem; color: var(--tc-text-muted);
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;
}
.tc-tool-official-links a:hover { color: var(--tc-text); }

/* Quick Facts Card */
.tc-tool-hero__right { position: sticky; top: 88px; }
.tc-facts-card, .tc-card--quickfacts {
  background: #024139 !important; /* var(--green-dark) variant */
  padding: 1.5rem !important;
  border-radius: var(--tc-radius-md);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--dbdr); 
  color: #ffffff !important;
  position: relative; overflow: hidden;
}
/* Title inside the quick-facts card */
.tc-card--quickfacts > p:first-child,
.tc-facts-card > h2 {
  font-family: var(--f-m);
  font-weight: 500;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--y) !important;
  margin-bottom: 0.5rem !important;
  display: block;
}
/* Blue stripe na górze quick-facts */
.tc-facts-card::before {
  content: none;
}
.tc-fact-row, .tc-quickfact {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--dbdr);
}
.tc-fact-row:last-child, .tc-quickfact:last-child { border-bottom: none; }

.tc-fact-label, .tc-quickfact__label { 
  color: var(--dtm) !important; 
  font-family: var(--f-b);
  font-size: 0.95rem;
  font-weight: 400;
}

.tc-fact-val, .tc-quickfact__value { 
  font-weight: 700; 
  color: #ffffff !important; 
  font-family: var(--font-heading); 
  font-size: 1rem;
  text-align: right; 
}

/* Author badge styling within quickfacts (sync with tc-eeat-link) */
.tc-author-badge {
  margin-top: 1.25rem; 
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; 
  align-items: center; 
  gap: 1rem;
  text-decoration: none !important; 
  transition: opacity var(--tr-fast);
}
.tc-author-badge:hover { opacity: 0.75; }

.tc-author-img {
  border-radius: 50%;
  box-shadow: var(--tc-shadow-card);
  flex-shrink: 0;
}
.tc-author-name {
  color: #ffffff !important;
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.tc-author-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.4;
}

/* =========================================================
   16. SINGLE PAGES: COMPONENTS
   ========================================================= */

/* Verdict Strip */
.tc-verdict-strip {
  display: flex; flex-wrap: wrap; gap: 16px;
  background: var(--tc-bg-light); border-radius: var(--tc-radius-md);
  padding: 20px 24px; margin-bottom: 32px; border: 1px solid var(--tc-grey-light);
}
.tc-wrap > .tc-verdict-strip:first-child { margin-top: 40px; }
.tc-verdict__item { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.tc-verdict__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tc-text-muted); }
.tc-verdict__value { font-size: 0.95rem; font-weight: 600; color: var(--tc-text); }

/* Jump Nav (Single Task) */
.tc-jump-section { margin-bottom: 48px; }
.tc-jump-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-jump-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; background: var(--tc-white);
  border: 1px solid var(--tc-grey-light); border-radius: var(--tc-radius-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--tc-text);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), color var(--tr-fast);
}
.tc-jump-card:hover {
  border-color: #9b4dab; box-shadow: 0 2px 8px rgba(28,26,23,0.14);
  color: #9b4dab; text-decoration: none;
}
.tc-jump-logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--tc-bg-light); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; overflow: hidden;
}
.tc-jump-logo img { max-width: 24px; max-height: 24px; object-fit: contain; }

/* Callout / Alert boxes */
.tc-callout {
  background: var(--tc-bg-light); border-radius: var(--tc-radius-md);
  padding: 20px 24px; margin-bottom: 20px; color: var(--tc-text); line-height: 1.6;
}
.tc-task-wrapper .tc-callout, .tc-guide-wrapper .tc-callout, .tc-tool .tc-callout {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dbdr);
    color: #9b4dab;
}
.tc-callout--warning, .tc-callout.warning {
  background: var(--y-lo); border: 1px solid var(--y-bdr); color: var(--y-deep);
}
.tc-callout--note, .tc-callout.note {
  background: var(--y-lo); border: 1px solid var(--y-bdr); color: var(--ink);
}

/* Pros & Cons */
.tc-cols--2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media(min-width: 640px) { .tc-cols--2 { grid-template-columns: 1fr 1fr; } }
.tc-col h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin: 0 0 14px; }
.tc-list--pros, .tc-list--cons, .tc-list--checkmarks {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.tc-list--pros li, .tc-list--cons li, .tc-list--checkmarks li {
  position: relative; padding-left: 26px; color: var(--tc-muted); font-size: 0.92rem; line-height: 1.5;
}
.tc-list--pros li::before, .tc-list--checkmarks li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--tc-deal-green); font-weight: 700;
}
.tc-list--cons li::before {
  content: '✕'; position: absolute; left: 0; top: 0; color: var(--tc-danger); font-weight: 700;
}

/* Integrations Pills */
.tc-integrations-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tc-pill--integration {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: var(--tc-radius-pill); background: var(--tc-bg-light);
  border: 1px solid var(--tc-grey-light); font-size: 0.82rem; font-weight: 600;
  color: var(--tc-text-muted); transition: border-color 0.2s, color 0.2s;
}
.tc-pill--integration:hover { border-color: rgba(28,26,23,0.32); color: #9b4dab; }

/* Accordion / FAQ */
.tc-accordion { display: flex; flex-direction: column; gap: 8px; }
.tc-accordion__item {
  background: var(--tc-white); border: 1px solid var(--tc-grey-light);
  border-radius: var(--tc-radius-sm); overflow: hidden;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.tc-accordion__item[open] { border-color: rgba(28,26,23,0.30); box-shadow: 0 4px 12px rgba(28,26,23,0.06); }
.tc-accordion__item summary {
  display: flex; align-items: center; padding: 16px 20px; cursor: pointer;
  font-weight: 600; color: var(--tc-text); font-size: 0.95rem;
  list-style: none; gap: 12px; user-select: none;
}
.tc-accordion__item summary > span:first-child { flex: 1; }
.tc-accordion__item summary::-webkit-details-marker { display: none; }
.tc-accordion__item summary::after { content: '+'; flex-shrink: 0; font-size: 1.2rem; font-weight: 400; color: var(--tc-text-muted); transition: transform 0.2s; line-height: 1; }
.tc-accordion__item[open] summary::after { content: '−'; }
.tc-accordion__item summary:hover { background: var(--tc-bg-light); }
/* Accordion body on cream card bg — force dark text, overrides both the cream wrapper
   inheritance and the .tc-content-body p/li light-color rules (spec 0,2,0 → 0,2,1) */
.tc-accordion__content { padding: 0 20px 20px; color: var(--tm); font-size: 0.9rem; line-height: 1.6; }
.tc-accordion__content p,
.tc-accordion__content li { color: var(--tm) !important; }
.tc-accordion__content li::marker { color: var(--tc-text-faint); }

/* =========================================================
   17. TOOL CARDS ON SINGLE-TASK / SINGLE-GUIDE
   ========================================================= */
.tc-tool-card, .tc-tool-card-article {
  background: rgba(34, 56, 101, 0.04); 
  border: 1px solid var(--dbdr-sub);
  border-radius: var(--tc-radius-md); 
  padding: 32px !important; /* Zwiększony padding dla oddechu */
  margin-bottom: var(--sp-10); /* Większy odstęp między kartami */
  transition: transform var(--tr-normal);
  display: flex;
  flex-direction: column;
}

/* Poprawka nagłówka i pozycjonowania linku pricing */
.tc-tool-header {
  display: block;
  margin-bottom: 24px;
  width: 100%;
}

.tc-tool-badges {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

/* Styl dla samego linku pricing, żeby był czytelny */
.tc-badge-plan {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;     /* Zapobiega łamaniu tekstu "See pricing..." */
  padding: 4px 10px;
  border-radius: var(--tc-radius-sm);
  display: inline-block;
}

/* Tytuł narzędzia - upewnienie się, że nie jest za wysoko */
.tc-tool-title {
  font-size: 2rem !important;
  line-height: 1.1;
  margin: 0;
}

/* Opis "Best for" */
.tc-tool-meta {
  margin-top: 12px;
  line-height: 1.65;
  color: #f1e52d;
  font-size: 0.92rem;
}

/* How-to: ukryte itemy i show-more button */
.tc-howto-hidden { display: none; }
.tc-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}
.tc-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--tc-white);
  border: 1.5px solid var(--tc-grey-light);
  border-radius: var(--tc-radius-pill);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tc-show-more-btn:hover {
  background: var(--tc-bg-light);
  border-color: rgba(28,26,23,0.35);
  box-shadow: var(--tc-shadow-card);
}
.tc-show-more-btn::after {
  content: '↓';
  font-style: normal;
}
.tc-show-more-btn.expanded::after {
  content: '↑';
}

/* Sekcje How-to, FAQ i Mistakes - dodajemy wyraźne odstępy */
.tc-howto, 
.tc-tool-card > div[style*="margin-top"] {
  margin-top: 32px !important; 
  padding-top: 24px;
  border-top: 1px solid rgba(28,26,23,0.06);
}

.tc-tool-card h4 {
  margin-bottom: 18px !important;
  font-size: 1.1rem;
}

/* Lista kroków */
.tc-steps li {
  margin-bottom: 14px !important;
  line-height: 1.6;
}

/* Blok błędu */
.tc-mistake-item {
  background: rgba(155, 77, 171, 0.30);
  border-radius: var(--tc-radius-sm);
  padding: 16px;
  margin-bottom: 20px !important;
  border: 1px solid rgba(28,26,23,0.06);
}

/* Przyciski na dole */
.tc-tool-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--tc-grey-light);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tc-tool-card:hover, .tc-tool-card-article:hover {
  border-color: rgba(28,26,23,0.24); 
  box-shadow: var(--tc-shadow-hover);
  transform: translateY(-3px);
}

.tc-tool-card.recommended, .tc-tool-card-article.is-winner {
  border-color: #9b4dab; 
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(28,26,23,0.08), var(--tc-shadow-card);
}

/* =========================================================
   18. FLOW SECTION — na single-guide.php
   Strzałki: pionowe na mobile, poziome na desktop
   ========================================================= */
.tc-flow-section {
  padding-block: var(--sp-12);
  background: var(--tc-bg-light);
  border-top: 1px solid var(--tc-grey-light);
  border-bottom: 1px solid var(--tc-grey-light);
}

/* flow-grid, arrow-circle, arrow-desktop, arrow-mobile — patrz sekcja 28 */

/* =========================================================
   19. GUIDE SINGLE: CONTENT & NEXT STEP
   ========================================================= */
.tc-content-body {
  max-width: 760px; margin: 48px auto 0; padding-inline: var(--sp-6);
  font-size: 1rem; line-height: 1.8; color: var(--tc-text);
}
.tc-content-body h2 { font-size: 1.55rem; margin: 48px 0 18px; }
.tc-content-body h3 { font-size: 1.2rem; margin: 30px 0 12px; }
/* p/li on dark green body — use light cream, not dark ink */
.tc-content-body p  { margin-bottom: 18px; color: var(--dtm); }
.tc-content-body ul, .tc-content-body ol { padding-left: 1.4em; margin-bottom: 18px; }
.tc-content-body li { margin-bottom: 8px; color: #edc1f2; }
/* Bold in dark-bg lists — full-opacity cream so it stands out from 72% dtm text */
.tc-content-body li strong { color: var(--dt); font-weight: 700; }
/* Bullet markers — yellow accent */
.tc-content-body li::marker { color: var(--y); }
.tc-content-body a  { color: #9b4dab; text-decoration: underline; }
.tc-content-body a:hover { color: var(--tc-blue-dark); }
.tc-content-body code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--tc-bg-light); border: 1px solid var(--tc-grey-light);
  border-radius: 4px; padding: 0.15em 0.45em; color: var(--tc-blue-dark);
}

/* Next Step section (po treści) */
.tc-next-section {
  background: var(--tc-bg-light);
  border-top: 1px solid var(--tc-grey-light);
  padding-block: var(--sp-20);
  margin-top: var(--sp-16);
}

.tc-primary-task-wrapper {
  max-width: 640px; margin: 0 auto;
}

/* Karta "Start Here" — primary task */
.tc-card.primary {
  border: 2px solid rgba(155,77,171,0.28);
  box-shadow: 0 0 0 4px rgba(155,77,171,0.06), var(--tc-shadow-soft);
  flex-direction: column;
  padding: var(--sp-8);
}
.tc-card.primary:hover {
  border-color: rgba(155,77,171,0.48);
  box-shadow: 0 20px 48px rgba(155,77,171,0.16);
}

/* Tool tags w karcie task */
.tc-tool-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-6); }
.tc-tool-tag {
  background: var(--tc-blue-light); color: var(--tc-blue-dark);
  padding: 5px 12px; border-radius: var(--tc-radius-pill);
  font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(28,26,23,0.18);
}

/* =========================================================
   20. SINGLE PAGES: SECTIONS
   ========================================================= */

/* content-visibility: auto — browser skips rendering for off-screen sections,
   reducing CPU/layout work during initial page load and improving LCP. */
.tc-matrix-section,
.tc-wisdom-section,
.tc-decision-section,
.tc-compare-section,
.tc-next-section,
.tc-section#comparisons,
.tc-section#pros-cons {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.tc-context-section, .tc-matrix-section, .tc-wisdom-section,
.tc-decision-section, .tc-compare-section,
.tc-section#comparisons, .tc-section#pros-cons {
  padding-block: var(--sp-12);
}
.tc-matrix-section, .tc-decision-section, .tc-compare-section,
.tc-context-section,
.tc-section#comparisons, .tc-section#pros-cons {
  background: var(--tc-bg-light);
  border-top: 1px solid var(--tc-grey-light);
  border-bottom: 1px solid var(--tc-grey-light);
}

/* =========================================================
   21. TABLES — VS & Feature matrix
   ========================================================= */
.vs-table-wrapper, .tc-table-wrap {
  overflow-x: auto; border: 1px solid var(--tc-grey-light);
  border-radius: var(--tc-radius-md); background: var(--tc-white);
  margin-bottom: 32px; -webkit-overflow-scrolling: touch;
}
.tc-vs-table, .tc-table {
  width: 100%; border-collapse: collapse; background: var(--tc-white); table-layout: fixed;
}
.tc-vs-table th, .tc-table th {
  background: #1c1a17 !important; padding: 14px 16px;
  font-weight: 700; color: var(--dt); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
}
.tc-vs-table th:first-child, .tc-table th:first-child, .col-feature {
  width: 25%; min-width: 120px; text-align: left !important;
  font-weight: 600 !important; background: var(--tc-bg-light);
}
.tc-vs-table td, .tc-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--tc-grey-light);
  text-align: center; font-size: 0.9rem; vertical-align: top;
}
.tc-vs-table th:not(:first-child), .tc-vs-table td:not(:first-child),
.col-tool { width: 37.5%; word-wrap: break-word; vertical-align: top; text-align: center; }
.tc-vs-table tbody tr:last-child td, .tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-vs-table tbody tr:hover, .tc-table tbody tr:hover { background: var(--tc-bg-softer); }
@media (max-width: 768px) { .tc-vs-table, .tc-table { min-width: 600px; } }

/* =========================================================
   22. SINGLE COMPARISON PAGE (single-comparison.php)
   ========================================================= */
.tc-container-vs {
  max-width: var(--tc-container); margin: 0 auto; padding: 40px var(--sp-6) 100px;
}
.vs-hero-rich {
  text-align: center;
}
.vs-matchup {
  display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 20px;
}
.vs-fighter { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; }

/* Elastyczne logotypy wzorowane na karcie Toola */
.vs-logo, .vs-logo-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 124px; min-height: 52px; max-width: 180px; width: auto; height: auto;
  background: var(--bg-card); border-radius: 12px; padding: 10px 20px;
  box-shadow: 0 2px 10px rgba(28,26,23,0.12); border: none;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.vs-logo img {
  max-width: 100%; max-height: 32px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.vs-fighter:hover .vs-logo {
  transform: translateY(-3px); box-shadow: 0 4px 15px rgba(28,26,23,0.15);
}
.vs-logo-placeholder {
  font-size: 1.5rem; font-weight: 800; color: #9b4dab; background: var(--tc-bg-light);
}

.vs-name { font-size: 1.8rem; margin: 0; }
.vs-name a { color: #f1e52d; text-decoration: none; }
.vs-center { display: flex; flex-direction: column; align-items: center; }
.vs-icon {
  font-size: 1.2rem; font-weight: 900; color: #fff; background: var(--tc-text);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--tc-white); box-shadow: var(--tc-shadow-card);
}
.vs-sub { font-size: 1.1rem; color: #f1e52d; }

.vs-verdict-box {
  background: var(--tc-bg-light); border: 1px solid var(--tc-grey-light);
  border-radius: var(--tc-radius-md); padding: 30px; margin-bottom: 60px;
}
/* Override inline colors from PHP — brandbook palette */
.vs-verdict-box strong, .vs-verdict-box [style*="1e293b"], .vs-verdict-box [style*="color:#1e293b"] {
  color: var(--tc-text) !important;
}
.vs-verdict-box p, .vs-verdict-box [style*="475569"] {
  color: var(--tc-muted) !important;
}
.tc-container-vs [style*="color:#1e293b"], .tc-container-vs [style*="color: #1e293b"] {
  color: var(--tc-text) !important;
}
.tc-container-vs [style*="color:#475569"], .tc-container-vs [style*="color: #475569"],
.tc-container-vs [style*="color:#64748b"], .tc-container-vs [style*="color: #64748b"] {
  color: var(--tc-muted) !important;
}
/* vs-badge brandbook */
.vs-badge {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-primary);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: rgba(241, 229, 45, 0.30);
  color: #f0f0f1;
  border: 1px solid rgba(241, 229, 45, 0.45);
  border-radius: var(--tc-radius-pill);
}
.vs-score {
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #edc1f2;
}
.vs-score__label {
  font-size: .75rem;
  color: #edc1f2;
  font-weight: 400;
}
.vs-verdict-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width: 768px) { .vs-verdict-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }

.vs-actions-footer { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }

/* Dostosowanie mobilne dla nowych proporcji logotypów */
@media(max-width: 768px) {
  .vs-matchup { gap: 10px; }
  .vs-logo, .vs-logo-placeholder { 
    min-width: 90px; max-width: 130px; min-height: 44px; padding: 8px 12px; 
  }
  .vs-logo img { max-height: 24px; }
  .vs-name { font-size: 1.3rem; }
  .vs-actions-footer { flex-direction: column; }
}

/* Tabele w Comparison */
.tc-container-vs .tc-vs-table .feature-name { text-align: left; font-weight: 600; background: var(--tc-bg-light); }
.tc-container-vs .tc-vs-table .row-pros td, .tc-container-vs .tc-vs-table .row-cons td { text-align: left; vertical-align: top; }
.tc-container-vs .tc-vs-table ul { padding-left: 20px; margin: 0; }
.tc-container-vs .tc-vs-table li { margin-bottom: 8px; color: var(--tc-muted); }

/* Comparisons Grid (on single-tools) */
.tc-comparisons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media(min-width: 640px) { .tc-comparisons-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 900px)  { .tc-comparisons-grid { grid-template-columns: repeat(4, 1fr); } }
.tc-comparison-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 16px; background: var(--tc-white);
  border: 1px solid var(--tc-grey-light); border-radius: var(--tc-radius-md);
  text-align: center; text-decoration: none !important;
  transition: transform var(--tr-normal); color: var(--tc-text);
}
.tc-comparison-card:hover {
  border-color: rgba(28,26,23,0.30); box-shadow: var(--tc-shadow-hover);
  transform: translateY(-5px);
}
.tc-vs-icon { display: inline-block; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; background: var(--tc-bg-light); padding: 4px 8px; border-radius: 6px; color: var(--tc-text-muted); }
.tc-comp-title { font-size: 0.88rem; font-weight: 600; color: var(--tc-text); line-height: 1.3; }

/* =========================================================
   23. FOOTER — v2.0 (improved visual hierarchy)
   ========================================================= */

/* Footer is always below the fold — skip rendering until near-visible */
.tc-footer { content-visibility: auto; contain-intrinsic-size: auto 300px; }

/* ── Top CTA: dark, spójny z .tc-archive-hero ── */
.tc-footer__top {
  padding: 64px 0;
  background-color: var(--tc-bg-dark);
  position: relative;
  overflow: hidden;
  border-top: none;
}
/* No grid texture */
.tc-footer__top::before { display: none; }
/* Fade-out na dole (przejście do białej sekcji main) */
.tc-footer__top::after {
  content: "";
  position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--tc-bg-dark));
  pointer-events: none;
}
.tc-footer__top .tc-wrap { position: relative; z-index: 2; }

.tc-footer__top-inner {
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: center; justify-content: space-between;
}

.tc-footer__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.tc-footer__text {
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}
.tc-footer__top-actions {
  display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0;
}
/* Przyciski na ciemnym tle (override generic wariantów) */
.tc-footer__top .tc-btn--primary {
  background: #9b4dab;
  color: var(--y) !important;
  border-color: var(--dbdr);
  box-shadow: var(--tc-shadow-btn-blue);
}
.tc-footer__top .tc-btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
  border-color: rgba(255,255,255,0.22);
}
.tc-footer__top .tc-btn--secondary:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.40);
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* ── Main grid ── */
.tc-footer__main {
  padding: 56px 0 48px;
  background: var(--tc-white);
  border-top: 1px solid var(--tc-grey-light);
}
.tc-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 640px) { .tc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .tc-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* ── Column header ── */
.tc-footer__col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--tc-text-muted);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--tc-grey-light);
}

/* ── Links z animowaną strzałką ── */
.tc-footer__links {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.tc-footer__links a {
  display: inline-flex; align-items: center; gap: 0px;
  color: var(--tc-text);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 2px 0;
  transition: opacity var(--tr-fast);
}
/* Strzałka pojawia się przy hover — tylko opacity (GPU compositable) */
.tc-footer__links a::before {
  content: "→";
  font-size: 0.72rem;
  color: #9b4dab;
  opacity: 0;
  transition: opacity var(--tr-fast);
  flex-shrink: 0;
}
.tc-footer__links a:hover {
  color: #9b4dab;
  opacity: 0.75;
}
.tc-footer__links a:hover::before {
  opacity: 1;
}

/* ── Bottom bar ── */
.tc-footer__bottom {
  border-top: 1px solid var(--tc-grey-light);
  padding-block: 20px;
  background: var(--tc-bg-softer);
}
.tc-footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
}
.tc-footer__copy {
  font-size: 0.82rem;
  color: var(--tc-text-muted);
  font-weight: 600;
}
.tc-footer__disclaimer {
  font-size: 0.78rem;
  color: var(--tc-text-faint);
  max-width: 480px;
  text-align: right;
  line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tc-footer__top        { padding: 48px 0; }
  .tc-footer__top-inner  { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tc-footer__top-actions { width: 100%; }
  .tc-footer__top-actions .tc-btn { flex: 1; justify-content: center; }
  .tc-footer__main       { padding: 40px 0 32px; }
  .tc-footer__disclaimer { text-align: left; max-width: 100%; }
}

/* =========================================================
   24. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .tc-archive-hero   { padding: var(--sp-12) 0 var(--sp-10); padding-top: calc(var(--sp-12) + 60px); }
  .tc-toolbar        { flex-direction: column; }
  .tc-toolbar .tc-input, .tc-toolbar .tc-select, .tc-toolbar .tc-btn { width: 100%; }
  .tc-toolbar__apply { display: none; }

  .tc-hero, .tc-tool-hero { padding-block: 60px 44px; padding-top: calc(60px + 60px); }
  .tc-hero-grid, .tc-tool-hero__grid { grid-template-columns: 1fr; }
  .tc-hero-actions .tc-btn, .tc-tool-hero__buttons .tc-btn { width: 100%; }
  .tc-content-body   { padding-inline: 0; }
  .tc-tool-logo      { margin: 0 auto 12px; }

  .tc-footer__disclaimer { text-align: left; }
  .tc-footer__top        { padding: 40px 0; }
}

@media (max-width: 480px) {
  .tc-btn { width: 100%; }
  .vs-matchup { gap: 8px; }
  .vs-logo { width: 60px; height: 60px; }
  .vs-name { font-size: 1.1rem; }
}

/* =========================================================
   25. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tc-card, .tc-btn, .tc-tool-card, .tc-comparison-card, .tc-hub-card {
    transition: none !important; animation: none !important;
  }
  .tc-card:hover, .tc-btn:hover, .tc-comparison-card:hover { transform: none !important; }
  .tc-btn-primary::before, .tc-btn--primary::before, .tc-btn--deal::before { display: none; }
  .tc-archive-title { animation: none !important; }
}

/* =========================================================
   26. AUTHOR BADGE (Quick Facts — tools & tasks)
   Małe kółko ze zdjęciem + tekst obok
   ========================================================= */
.tc-author-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0 16px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(28,26,23,0.06);
  margin-bottom: 16px;
}
.tc-author-img {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--tc-grey-light) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.tc-author-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tc-author-label {
  font-size: 0.72rem; color: var(--tc-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.tc-author-name {
  font-size: 0.92rem; font-weight: 700; color: var(--tc-text);
}

/* =========================================================
   27. CARD LINK OVERLAY FIX
   PHP używa .tc-card-link AND .tc-link — oba muszą działać
   ========================================================= */
.tc-card .tc-link,
.tc-card .tc-card-link {
  position: absolute; inset: 0; z-index: 5;
  text-decoration: none !important;
}

/* =========================================================
   28. GUIDE FLOW SECTION — poprawione karty + strzałki
   PHP structure: .tc-flow-grid > .tc-card(+arrow inside) + .tc-arrow-mobile + .tc-card...
   ========================================================= */
.tc-flow-section {
  padding-block: var(--sp-12);
  background: #034f46;
  border-top: 1px solid var(--tc-grey-light);
  border-bottom: 1px solid var(--tc-grey-light);
}

/* Mobile: jedna kolumna, strzałki między kartami */
.tc-flow-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}

/* Desktop: 3 równe kolumny — mobile arrows hidden, desktop arrows absolutne */
@media (min-width: 768px) {
  .tc-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    align-items: stretch;
  }
}

/* Każda karta w flow */
.tc-flow-grid .tc-card {
  height: auto;
  flex-direction: column;
  overflow: visible; /* pozwala strzałce wystawać */
}
.tc-flow-grid .tc-card.active {
  border-color: rgba(28,26,23,0.35);
  box-shadow: 0 0 0 3px rgba(28,26,23,0.10), var(--tc-shadow-card);
}

/* Arrow circle — base style */
.tc-arrow-circle {
  width: 40px; height: 40px;
  background: var(--tc-white);
  border: 1.5px solid rgba(28,26,23,0.24);
  border-radius: 50%;
  color: #9b4dab;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  box-shadow: 0 4px 14px rgba(28,26,23,0.14);
  flex-shrink: 0;
  z-index: 20;
  font-style: normal;
}

/* Desktop arrow — inside card, hangs on right edge */
.tc-arrow-desktop {
  display: none;
}
@media (min-width: 768px) {
  .tc-arrow-desktop {
    display: flex;
    position: absolute;
    top: 50%;
    right: -24px; /* połowa 40px + 4px gap clearance */
    transform: translateY(-50%);
    z-index: 30;
  }
}

/* Mobile arrow — standalone sibling between cards */
.tc-arrow-mobile {
  display: flex;
  justify-content: center;
  margin: var(--sp-2) 0;
  z-index: 20;
}
@media (min-width: 768px) {
  .tc-arrow-mobile {
    display: none !important;
    /* Całkowicie usunięte z grid flow — nie zajmują komórek */
  }
}

/* =========================================================
   29. SINGLE GUIDE — "What to do next" — klikalna karta
   ========================================================= */
.tc-next-section {
  background: var(--tc-bg-light);
  border-top: 1px solid var(--tc-grey-light);
  padding-block: var(--sp-20);
  margin-top: var(--sp-16);
}
.tc-primary-task-wrapper {
  max-width: 640px; margin: 0 auto;
}

/* Karta "primary" — klikalna */
.tc-card.primary {
  background: #9b4dab;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 0 4px rgba(155,77,171,0.06), var(--tc-shadow-soft);
  flex-direction: column;
  padding: var(--sp-8);
  cursor: pointer;
}
.tc-card.primary:hover {
  border-color: rgba(155,77,171,0.50);
  box-shadow: 0 0 0 4px rgba(155,77,171,0.10), 0 20px 48px rgba(155,77,171,0.18);
  transform: translateY(-4px);
}
.tc-card.primary h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 16px;
  font-weight: 700;
}
.tc-card.primary p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
}
.tc-card.primary:hover h3 { color: #fff; }

/* =========================================================
   30. SINGLE TASKS — brakujące klasy
   ========================================================= */

/* Hero sub-elements */
.tc-hero-oneliner {
  font-size: 1.15rem; color: var(--tc-text-muted);
  margin-bottom: var(--sp-6); line-height: 1.65;
}
.tc-hero-intro {
  font-size: 0.95rem; color: var(--tc-text-muted);
  line-height: 1.7; margin-top: var(--sp-4);
}
.tc-hero-intro p { margin-bottom: 10px; color: inherit; }

/* Context section — info cards grid */
.tc-card-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
@media (min-width: 640px) { .tc-card-grid { grid-template-columns: 1fr 1fr; } }

.tc-info-card {
  background: #034f46; border: 1px solid var(--dbdr-sub);
  border-radius: var(--tc-radius-md); padding: var(--sp-6);
  box-shadow: var(--tc-shadow-card);
}
.tc-info-card h2,
.tc-info-card h4 {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--dtm);
  margin-bottom: var(--sp-3);
}
.tc-info-content {
  font-size: 0.92rem; color: var(--dt); line-height: 1.65;
}
.tc-info-content p { margin-bottom: 8px; }
.tc-info-content p:last-child { margin-bottom: 0; }

/* Workflow steps */
.tc-workflow { margin-top: var(--sp-6); }
.tc-workflow h3 {
  font-size: 1.1rem; font-weight: 700; margin-bottom: var(--sp-4);
  color: var(--tc-text);
}
.tc-workflow-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
  counter-reset: tc-wf-counter;
}
.tc-workflow-item {
  position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4) 52px;
  background: var(--tc-white); border: 1px solid var(--tc-grey-light);
  border-radius: var(--tc-radius-md); font-size: 0.92rem; line-height: 1.6;
  color: var(--tc-muted); counter-increment: tc-wf-counter;
  box-shadow: var(--tc-shadow-card);
}
.tc-workflow-item::before {
  content: counter(tc-wf-counter);
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--li-lo); color: #9b4dab;
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tc-wf-title { color: var(--tc-text); }
.tc-wf-desc  { color: var(--tc-muted); }

/* Section title (used inside task sections, smaller than archive variant) */
.tc-matrix-section .tc-section-title,
.tc-wisdom-section .tc-section-title,
.tc-decision-section .tc-section-title {
  font-size: 1.4rem;
  display: block;
  padding-bottom: 0;
  margin-bottom: var(--sp-5);
  letter-spacing: -0.015em;
}
.tc-matrix-section .tc-section-title::after,
.tc-wisdom-section .tc-section-title::after,
.tc-decision-section .tc-section-title::after {
  margin: var(--sp-2) 0 0;
}

/* Mistake / problem items */
.tc-mistake-item {
  background: rgba(155, 77, 171, 0.30); border: 1px solid rgba(28,26,23,0.06);
  border-radius: var(--tc-radius-md); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--tc-shadow-card);
}
.tc-mistake-title {
  font-weight: 700; margin-bottom: var(--sp-2); color: var(--tc-red);
  font-size: 0.95rem;
}
.tc-mistake-fix {
  font-size: 0.9rem; color: var(--tc-muted); line-height: 1.6;
}

/* Decision / which tool section */
.tc-decision-list {
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.tc-decision-item {
  background: #034f46; border: 1px solid var(--dbdr-sub);
  border-radius: var(--tc-radius-md); padding: var(--sp-6);
  box-shadow: var(--tc-shadow-card);
}
.tc-decision-item h4 {
  font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-3); color: #9b4dab;
}
.tc-decision-content {
  font-size: 0.92rem; color: var(--dt); line-height: 1.65;
}
.tc-decision-content p { margin-bottom: var(--sp-2); }
.tc-decision-content p:last-child { margin-bottom: 0; }

/* FAQ items (per-tool) */
.tc-faq-item {
  background: #034f46; border: 1px solid var(--dbdr-sub);
  border-radius: var(--tc-radius-md); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-3);
  box-shadow: var(--tc-shadow-card);
}

/* Table price column */
.tc-table-price a {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #9b4dab; text-decoration: none;
}
.tc-table-price a:hover { text-decoration: underline; }

/* Empty state (no tools found) */
.tc-empty-state {
  text-align: center; padding: var(--sp-20) var(--sp-6);
  background: var(--tc-bg-light); border-radius: var(--tc-radius-xl);
  border: 2px dashed var(--tc-grey-light); max-width: 600px; margin: 0 auto;
}
.tc-empty-icon {
  display: block; font-size: 3rem; margin-bottom: var(--sp-5);
}
.tc-empty-title {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700;
  margin-bottom: var(--sp-3); color: var(--tc-text);
}
.tc-empty-desc {
  font-size: 0.95rem; color: var(--tc-text-muted); line-height: 1.65;
  max-width: 420px; margin: 0 auto;
}

/* Jump fallback letter (tasks/tools jump nav) */
.tc-jump-fallback {
  font-size: 0.85rem; font-weight: 700; color: #9b4dab;
}

/* =========================================================
   31. QUICKFACTS LIST (single-tools — ul.tc-quickfacts__list)
   ========================================================= */
.tc-quickfacts__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.tc-quickfacts__list .tc-quickfact {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid rgba(28,26,23,0.05);
}
.tc-quickfacts__list .tc-quickfact:last-child { border-bottom: none; }

/* =========================================================
   32. EYEBROW SECTION PATTERN — JetBrains Mono + horizontal line
   ========================================================= */
.tc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-m);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--y-deep);
  margin-bottom: var(--sp-3);
}
.tc-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bdr) 0%, transparent 100%);
}

/* =========================================================
   33. BADGES & TAGS — pill-shaped, JetBrains Mono
   ========================================================= */
.tc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-m);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1.6;
}
/* Yellow variant */
.tc-badge--yellow {
  background: var(--y-lo);
  color: var(--y-deep);
}
/* Lilac variant */
.tc-badge--lilac {
  background: var(--li-lo);
  color: var(--li-sat);
}
/* Green variant */
.tc-badge--green {
  background: var(--green-lo);
  color: var(--green);
}
/* Recommended badge */
.tc-badge--recommended {
  background: var(--y-lo);
  color: var(--y-deep);
  border: 1px solid var(--y-bdr);
}

/* =========================================================
   34. RANKING / SUITABILITY SCORE BARS
   ========================================================= */
.tc-ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tc-ranking-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r-md);
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
/* Winner (#1) highlight */
.tc-ranking-item.is-winner {
  background: var(--y-lo);
  border-color: var(--y-bdr);
}
.tc-ranking-item__rank {
  font-family: var(--f-d);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--t);
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.tc-ranking-item__logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--y-lo);
  border: 1px solid var(--y-bdr);
}
.tc-ranking-item__logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-ranking-item__info { flex: 1; min-width: 0; }
.tc-ranking-item__name {
  font-family: var(--f-d);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--t);
  margin-bottom: 4px;
}
.tc-ranking-item__bar {
  width: 100%;
  height: 5px;
  background: var(--bdr);
  border-radius: 99px;
  overflow: hidden;
}
.tc-ranking-item__bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--bdr);
  transition: transform 0.4s ease;
  transform-origin: left center;
}
.tc-ranking-item.is-winner .tc-ranking-item__bar-fill {
  background: var(--y-dark);
}
.tc-ranking-item__score {
  font-family: var(--f-m);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tm);
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}

/* =========================================================
   35. CARD WINNER/RECOMMENDED HIGHLIGHT (--y tokens)
   ========================================================= */
.tc-card.is-winner,
.tc-card.recommended,
.tc-tool-card.recommended,
.tc-tool-card-article.is-winner {
  border-color: var(--y-bdr);
  background: var(--y-lo);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(107,100,0,0.06), var(--tc-shadow-card);
}

/* =========================================================
   36. BUTTON CTA — short labels, mobile-safe
   ========================================================= */
/* Desktop CTA: ink bg, yellow text */
.tc-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ink);
  color: var(--y) !important;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-b);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 0.72rem 1.5rem;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--tr-normal), opacity var(--tr-normal), box-shadow var(--tr-normal);
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.tc-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28,26,23,0.35);
  text-decoration: none !important;
}
/* Small variant for mobile */
.tc-btn-cta.btn-sm {
  font-size: .75rem;
  padding: .4rem .95rem;
}
/* Secondary yellow button */
.tc-btn--y {
  background: var(--y);
  color: var(--ink) !important;
  border: 1px solid var(--y);
  border-radius: var(--r-pill);
  font-family: var(--f-b);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 0.72rem 1.5rem;
}
.tc-btn--y:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(241,229,45,0.30);
}
/* Outline button */
.tc-btn--outline {
  background: transparent;
  color: var(--t) !important;
  border: 1px solid var(--bdr);
  border-radius: var(--r-pill);
  font-family: var(--f-b);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.72rem 1.5rem;
}
.tc-btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28,26,23,0.12);
  border-color: var(--ink);
}

/* =========================================================
   37. SECTION SPACING — minimum 64px padding
   ========================================================= */
.tc-section {
  padding-block: var(--sp-16); /* 64px */
}

/* =========================================================
   39. DARK SECTIONS — Wispr Flow aesthetic
   Light/dark rhythm, mauve accent on dark backgrounds
   ========================================================= */
.tc-section--dark {
  background-color: var(--ink);
  color: var(--dt);
  border-top: 1px solid var(--dbdr-sub);
  border-bottom: 1px solid var(--dbdr-sub);
}
.tc-section--dark h2,
.tc-section--dark h3,
.tc-section--dark h4 { color: var(--dt) !important; -webkit-text-fill-color: unset !important; }
.tc-section--dark p,
.tc-section--dark .tc-desc { color: var(--dtm); }
.tc-section--dark .tc-eyebrow { color: var(--li); border-color: rgba(155,77,171,0.30); }
.tc-section--dark .tc-eyebrow::before,
.tc-section--dark .tc-eyebrow::after { background: rgba(155,77,171,0.30); }

/* Dark card variant — inverted scheme */
.tc-section--dark .tc-card,
.tc-card--dark {
  background: rgba(250,246,239, 0.06);
  border: 1px solid rgba(250,246,239, 0.10);
  color: #fff;
}
.tc-section--dark .tc-card:hover,
.tc-card--dark:hover {
  border-color: rgba(155,77,171,0.35);
  box-shadow: 0 12px 32px rgba(0,0,0,0.30);
  transform: translateY(-4px);
}
.tc-section--dark .tc-card h3,
.tc-card--dark h3 { color: #fff !important; }
.tc-section--dark .tc-card .tc-desc,
.tc-card--dark .tc-desc { color: rgba(255,255,255,0.55); }
.tc-section--dark .tc-badge--yellow { background: rgba(241,229,45,0.15); color: var(--y); border-color: rgba(241,229,45,0.30); }
.tc-section--dark .tc-badge--lilac { background: rgba(155,77,171,0.15); color: var(--li); border-color: rgba(155,77,171,0.30); }

/* Mauve accent utility */
.tc-accent-mauve { color: var(--li) !important; }

/* =========================================================
   40. RECOMMENDED CARD — trophy highlight, dark bg
   ========================================================= */
.tc-card.recommended,
.tc-tool-card.recommended,
.tc-tool-card-article.is-winner {
  background: var(--bg-ink);
  border: 2px solid rgba(241,229,45,0.30);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(241,229,45,0.06), 0 8px 28px rgba(0,0,0,0.25);
  position: relative;
}
.tc-card.recommended h3,
.tc-tool-card.recommended h3 { color: #fff !important; }
.tc-card.recommended .tc-desc,
.tc-tool-card.recommended .tc-desc { color: rgba(255,255,255,0.60); }
.tc-card.recommended:hover,
.tc-tool-card.recommended:hover {
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(241,229,45,0.12), 0 12px 36px rgba(0,0,0,0.30);
  transform: translateY(-4px);
}
/* Recommended badge — gold trophy */
.tc-badge--recommended {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-m);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(241,229,45,0.18);
  color: var(--y);
  border: 1px solid rgba(241,229,45,0.35);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.tc-badge--recommended::before {
  content: "🏆";
  font-size: 0.72rem;
}

/* =========================================================
   38. MOBILE RESPONSIVE ADDITIONS
   ========================================================= */
@media (max-width: 640px) {
  /* Grids → single column */
  .tc-grid,
  .tc-card-grid,
  .tc-comparisons-grid,
  .tc-ranking-list { grid-template-columns: 1fr !important; }

  /* Buttons: full-width, safe text overflow */
  .tc-btn,
  .tc-btn--primary,
  .tc-btn--deal,
  .tc-btn-cta,
  .tc-btn-origin {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.72rem 1rem;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =========================================================
   41. DARK THEME — Guide, Task & Tool single pages
   Green-dark (#034f46) bg, cream text, white cards
   ========================================================= */

/* Wrapper backgrounds */
.tc-guide-wrapper,
.tc-task-wrapper,
.tc-tool {
  background: #1c1a17 !important;
  color: var(--dt);
}

/* Headings: dt */
.tc-guide-wrapper h1, .tc-guide-wrapper h2, .tc-guide-wrapper h3, .tc-guide-wrapper h4,
.tc-task-wrapper h1, .tc-task-wrapper h2, .tc-task-wrapper h3, .tc-task-wrapper h4,
.tc-tool h1, .tc-tool h2, .tc-tool h3, .tc-tool h4 {
  color: var(--dt) !important;
  -webkit-text-fill-color: var(--dt) !important;
  background: none !important;
}

/* Paragraphs & muted text */
.tc-guide-wrapper p, .tc-guide-wrapper .tc-desc,
.tc-task-wrapper p, .tc-task-wrapper .tc-desc,
.tc-tool p, .tc-tool .tc-desc {
  color: var(--dtm);
}
.tc-guide-wrapper .tc-lead, .tc-task-wrapper .tc-lead, .tc-tool .tc-lead,
.tc-guide-wrapper .tc-hero-lead, .tc-task-wrapper .tc-hero-lead, .tc-tool .tc-hero-lead,
.tc-guide-wrapper .tc-hero-sub, .tc-task-wrapper .tc-hero-sub, .tc-tool .tc-hero-sub {
  color: var(--dtm);
}

/* Hero: green-dark bg */
.tc-guide-wrapper .tc-hero,
.tc-task-wrapper .tc-hero,
.tc-tool .tc-hero,
.tc-tool .tc-tool-hero {
  background-color: #1c1a17 !important;
  border-bottom: 1px solid var(--dbdr);
  color: var(--dt);
}
.tc-guide-wrapper .tc-hero-h1,
.tc-task-wrapper .tc-hero-h1,
.tc-tool .tc-hero-h1,
.tc-tool .tc-tool-hero__title {
  color: var(--dt) !important;
  -webkit-text-fill-color: var(--dt) !important;
}

/* Breadcrumbs on dark */
.tc-guide-wrapper .tc-breadcrumb,
.tc-task-wrapper .tc-breadcrumb,
.tc-tool .tc-breadcrumb { color: var(--dtf); }
.tc-guide-wrapper .tc-breadcrumb a,
.tc-task-wrapper .tc-breadcrumb a,
.tc-tool .tc-breadcrumb a { color: var(--dtm); }
.tc-guide-wrapper .tc-breadcrumb a:hover,
.tc-task-wrapper .tc-breadcrumb a:hover,
.tc-tool .tc-breadcrumb a:hover { color: var(--y); }

/* Author bar on dark */
.tc-guide-wrapper .tc-author-bar,
.tc-task-wrapper .tc-author-bar,
.tc-tool .tc-author-bar { color: var(--dtf); }
.tc-guide-wrapper .tc-author-bar__meta a,
.tc-task-wrapper .tc-author-bar__meta a,
.tc-tool .tc-author-bar__meta a { color: var(--dtm); }
.tc-guide-wrapper .tc-author-bar__ai-badge,
.tc-task-wrapper .tc-author-bar__ai-badge,
.tc-tool .tc-author-bar__ai-badge { background: var(--li); color: var(--ink); }

/* Cards: white on dark */
.tc-guide-wrapper .tc-card,
.tc-task-wrapper .tc-card,
.tc-tool .tc-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  color: var(--t);
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.tc-guide-wrapper .tc-card:hover,
.tc-task-wrapper .tc-card:hover,
.tc-tool .tc-card:hover {
  border-color: var(--bdr);
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
}
.tc-guide-wrapper .tc-card h3, .tc-guide-wrapper .tc-card h4,
.tc-task-wrapper .tc-card h3, .tc-task-wrapper .tc-card h4,
.tc-tool .tc-card h3, .tc-tool .tc-card h4 {
  color: var(--t) !important;
  -webkit-text-fill-color: var(--t) !important;
}
/* Journey/flow-section cards: extra-specific override (spec 0,3,1) ensures dark h3
   on white cards even inside .tc-flow-section which has its own !important h3 rule */
.tc-guide-wrapper .tc-flow-section .tc-card h3,
.tc-task-wrapper .tc-flow-section .tc-card h3 {
  color: var(--t) !important;
  -webkit-text-fill-color: var(--t) !important;
}
.tc-guide-wrapper .tc-card p, .tc-guide-wrapper .tc-card .tc-desc,
.tc-task-wrapper .tc-card p, .tc-task-wrapper .tc-card .tc-desc,
.tc-tool .tc-card p, .tc-tool .tc-card .tc-desc {
  color: var(--tm);
}

/* Sections on dark */
.tc-guide-wrapper .tc-section,
.tc-task-wrapper .tc-section,
.tc-tool .tc-section {
  background-color: #1c1a17 !important;
  color: var(--dt);
}

/* Section dark variant: ink */
.tc-guide-wrapper .tc-section--dark,
.tc-task-wrapper .tc-section--dark,
.tc-tool .tc-section--dark {
  background-color: var(--ink) !important;
}

/* Eyebrow on green */
.tc-guide-wrapper .tc-eyebrow,
.tc-task-wrapper .tc-eyebrow {
  color: var(--li);
  border-color: rgba(155,77,171,0.30);
}

/* Serif italic accent on green */
.tc-guide-wrapper em, .tc-guide-wrapper .tc-em,
.tc-task-wrapper em, .tc-task-wrapper .tc-em {
  color: var(--li);
}

/* Step badge on green */
.tc-guide-wrapper .tc-step-badge,
.tc-task-wrapper .tc-step-badge {
  background: rgba(241, 229, 45, 0.12);
  color: #034f46;
}

/* Pill badges on dark */
.tc-guide-wrapper .tc-guide-pill,
.tc-task-wrapper .tc-guide-pill,
.tc-tool .tc-guide-pill {
  background: rgba(255,255,255,0.08);
  border-color: var(--dbdr);
  color: var(--dt);
}

/* Tool card articles on green */
.tc-guide-wrapper .tc-tool-card-article,
.tc-task-wrapper .tc-tool-card-article {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  color: var(--t);
}
.tc-guide-wrapper .tc-tool-card-article:hover,
.tc-task-wrapper .tc-tool-card-article:hover {
  border-color: rgba(28,26,23,0.28);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.tc-guide-wrapper .tc-tool-card-article h3,
.tc-task-wrapper .tc-tool-card-article h3 { color: var(--t) !important; }
.tc-guide-wrapper .tc-tool-card-article .tc-desc,
.tc-task-wrapper .tc-tool-card-article .tc-desc { color: var(--tm); }

/* Decision card */
.tc-guide-wrapper .tc-decision-card,
.tc-task-wrapper .tc-decision-card,
.tc-tool .tc-decision-card {
  background: rgba(255,255,255,0.06);
  border-color: var(--dbdr);
  color: var(--dt);
}

/* Flow section on green */
.tc-guide-wrapper .tc-flow-section,
.tc-task-wrapper .tc-flow-section {
  background: #1c1a17 !important;
}

/* Footer CTA override */
.tc-guide-wrapper .tc-footer__top,
.tc-task-wrapper .tc-footer__top,
.tc-tool .tc-footer__top {
  background-color: var(--ink) !important;
}

/* Muted text helpers */
.tc-guide-wrapper .tc-meta-note,
.tc-guide-wrapper .tc-disclaimer,
.tc-task-wrapper .tc-meta-note,
.tc-task-wrapper .tc-disclaimer,
.tc-tool .tc-meta-note,
.tc-tool .tc-disclaimer {
  color: var(--dtf);
}

/* Badge colors on green */
.tc-guide-wrapper .tc-badge--yellow, .tc-task-wrapper .tc-badge--yellow {
  background: rgba(241,229,45,0.15); color: var(--y); border-color: rgba(241,229,45,0.30);
}
.tc-guide-wrapper .tc-badge--lilac, .tc-task-wrapper .tc-badge--lilac {
  background: rgba(155,77,171,0.15); color: var(--li); border-color: rgba(155,77,171,0.30);
}
.tc-guide-wrapper .tc-badge--green, .tc-task-wrapper .tc-badge--green {
  background: rgba(255,255,255,0.12); color: #4ade80; border-color: rgba(255,255,255,0.20);
}

/* FAQ & mistake items on green — override hardcoded inline colors */
.tc-task-wrapper .tc-faq-answer,
.tc-guide-wrapper .tc-faq-answer {
  color: var(--dtm);
}
.tc-task-wrapper .tc-mistake-title,
.tc-guide-wrapper .tc-mistake-title {
  color: #fca5a5 !important; /* light red on dark green */
}

/* Links on dark pages */
.tc-task-wrapper a,
.tc-guide-wrapper a,
.tc-tool a { color: #9b4dab; }
.tc-task-wrapper a:hover,
.tc-guide-wrapper a:hover,
.tc-tool a:hover { color: var(--y); }

/* Tables on dark pages — white bg with dark text */
.tc-task-wrapper .tc-table,
.tc-guide-wrapper .tc-table,
.tc-tool .tc-table {
  background: var(--bg-white);
  color: var(--t);
}
.tc-task-wrapper .tc-table th,
.tc-guide-wrapper .tc-table th,
.tc-tool .tc-table th {
  background: #1c1a17 !important;
  color: var(--dt);
  border-bottom-color: var(--dbdr);
}
.tc-task-wrapper .tc-table td,
.tc-guide-wrapper .tc-table td,
.tc-tool .tc-table td {
  border-bottom-color: var(--bdr-sub);
  color: var(--tm);
}
.tc-task-wrapper .tc-table a,
.tc-guide-wrapper .tc-table a,
.tc-tool .tc-table a { color: var(--green-dark); }

/* Callouts on dark */
.tc-task-wrapper .tc-callout,
.tc-guide-wrapper .tc-callout,
.tc-tool .tc-callout {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--dbdr);
  color: var(--dtm);
}
.tc-task-wrapper .tc-callout.warning,
.tc-guide-wrapper .tc-callout.warning {
  background: rgba(241,229,45,0.08);
  border-color: rgba(241,229,45,0.20);
  color: var(--y);
}

/* Quick facts card (overrides inline var(--tc-white) bg) */
.tc-task-wrapper .tc-card--quickfacts,
.tc-task-wrapper [style*="background:var(--tc-white)"],
.tc-guide-wrapper .tc-card--quickfacts,
.tc-tool .tc-card--quickfacts {
  background: var(--ink) !important;
  border-color: var(--dbdr) !important;
  color: var(--dt) !important;
}

/* Buttons: secondary-light on green pages */
.tc-task-wrapper .tc-btn--secondary-light,
.tc-guide-wrapper .tc-btn--secondary-light {
  background: rgba(255,255,255,0.08) !important;
  color: var(--dt) !important;
  border-color: var(--dbdr) !important;
}
.tc-task-wrapper .tc-btn--secondary-light:hover,
.tc-guide-wrapper .tc-btn--secondary-light:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.42) !important;
}

/* Section titles on green */
.tc-task-wrapper .tc-section-title,
.tc-guide-wrapper .tc-section-title { color: var(--dt) !important; }
.tc-task-wrapper .tc-section-title::after,
.tc-guide-wrapper .tc-section-title::after {
  background: linear-gradient(90deg, var(--li) 0%, rgba(155,77,171,0.2) 100%) !important;
}

/* Hero sub-elements on green */
.tc-task-wrapper .tc-hero-oneliner,
.tc-task-wrapper .tc-hero-intro,
.tc-task-wrapper .tc-hero-sub,
.tc-guide-wrapper .tc-hero-oneliner,
.tc-guide-wrapper .tc-hero-intro,
.tc-guide-wrapper .tc-hero-sub {
  color: var(--dtm) !important;
}

/* Fact card values */
.tc-task-wrapper .tc-fact-label,
.tc-guide-wrapper .tc-fact-label,
.tc-tool .tc-fact-label { color: var(--dtf) !important; }
.tc-task-wrapper .tc-fact-val,
.tc-guide-wrapper .tc-fact-val,
.tc-tool .tc-fact-val { color: var(--dt) !important; }

/* List items on dark */
.tc-task-wrapper li,
.tc-guide-wrapper li,
.tc-tool li { color: #edc1f2; }
.tc-task-wrapper li::marker,
.tc-guide-wrapper li::marker,
.tc-tool li::marker { color: var(--y); }

/* Inline text with var(--tc-text-muted) etc. override on green */
.tc-task-wrapper [style*="color:var(--tc-text-muted)"],
.tc-guide-wrapper [style*="color:var(--tc-text-muted)"] {
  color: var(--dtf) !important;
}

/* Content sections on green — override light bg */
.tc-task-wrapper .tc-context-section,
.tc-task-wrapper .tc-matrix-section,
.tc-task-wrapper .tc-wisdom-section,
.tc-task-wrapper .tc-decision-section,
.tc-task-wrapper .tc-compare-section,
.tc-task-wrapper .tc-section#comparisons,
.tc-task-wrapper .tc-section#pros-cons,
.tc-guide-wrapper .tc-context-section,
.tc-guide-wrapper .tc-matrix-section,
.tc-guide-wrapper .tc-wisdom-section,
.tc-guide-wrapper .tc-decision-section,
.tc-guide-wrapper .tc-compare-section {
  background: rgba(255,255,255,0.04) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Table wrappers on green */
.tc-task-wrapper .vs-table-wrapper,
.tc-task-wrapper .tc-table-wrap,
.tc-guide-wrapper .vs-table-wrapper,
.tc-guide-wrapper .tc-table-wrap {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* =========================================================
   42. DARK THEME — Archive pages (all CPTs)
   ========================================================= */

/* Archive wrapper: green-dark bg */
body.post-type-archive-guide .tc-archive,
body.post-type-archive-tasks .tc-archive,
body.post-type-archive-tools .tc-archive {
  background: #1c1a17 !important;
  color: var(--dt);
}

body.post-type-archive-guide .tc-archive h1,
body.post-type-archive-guide .tc-archive h2,
body.post-type-archive-guide .tc-archive h3,
body.post-type-archive-tasks .tc-archive h1,
body.post-type-archive-tasks .tc-archive h2,
body.post-type-archive-tasks .tc-archive h3,
body.post-type-archive-tools .tc-archive h1,
body.post-type-archive-tools .tc-archive h2,
body.post-type-archive-tools .tc-archive h3 {
  color: var(--dt) !important;
  -webkit-text-fill-color: #9b4dab !important;
  background: none !important;
}

/* Archive hero: green-dark */
body.post-type-archive-guide .tc-archive-hero,
body.post-type-archive-tasks .tc-archive-hero,
body.post-type-archive-tools .tc-archive-hero {
  background-color: #1c1a17 !important;
  border-bottom: 1px solid var(--dbdr);
}
body.post-type-archive-guide .tc-archive-title,
body.post-type-archive-tasks .tc-archive-title,
body.post-type-archive-tools .tc-archive-title { color: var(--dt) !important; }
body.post-type-archive-guide .tc-archive-lead,
body.post-type-archive-tasks .tc-archive-lead,
body.post-type-archive-tools .tc-archive-lead { color: var(--dtm); }

/* Toolbar on dark */
body.post-type-archive-guide .tc-toolbar,
body.post-type-archive-tasks .tc-toolbar,
body.post-type-archive-tools .tc-toolbar {
  border-color: var(--dbdr);
}
body.post-type-archive-guide .tc-input,
body.post-type-archive-tasks .tc-input,
body.post-type-archive-tools .tc-input,
body.post-type-archive-guide .tc-select,
body.post-type-archive-tasks .tc-select,
body.post-type-archive-tools .tc-select {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--dbdr) !important;
  color: var(--dt) !important;
}
body.post-type-archive-guide .tc-input::placeholder,
body.post-type-archive-tasks .tc-input::placeholder,
body.post-type-archive-tools .tc-input::placeholder {
  color: var(--dtf) !important;
}
/* Apply button: yellow accent */
body.post-type-archive-guide .tc-btn-primary,
body.post-type-archive-tasks .tc-btn-primary,
body.post-type-archive-tools .tc-btn-primary {
  background: var(--y) !important;
  color: var(--ink) !important;
  border-color: var(--y) !important;
}

/* Section bg override on archives */
body.post-type-archive-guide .tc-archive .tc-section,
body.post-type-archive-tasks .tc-archive .tc-section,
body.post-type-archive-tools .tc-archive .tc-section {
  background: #1c1a17 !important;
  border-top-color: var(--dbdr-sub) !important;
  border-bottom-color: var(--dbdr-sub) !important;
}

/* All sections on homepage: dark base */
.tc-front section {
  background-color: #1c1a17 !important;
  border-top: 1px solid var(--dbdr-sub) !important;
}

/* Cards on archive — white cards on dark */
body.post-type-archive-guide .tc-archive .tc-card,
body.post-type-archive-tasks .tc-archive .tc-card,
body.post-type-archive-tools .tc-archive .tc-card {
  background: var(--bg-white);
  border: 1px solid var(--bdr-sub);
  color: var(--t);
}
body.post-type-archive-guide .tc-archive .tc-card:hover,
body.post-type-archive-tasks .tc-archive .tc-card:hover,
body.post-type-archive-tools .tc-archive .tc-card:hover {
  border-color: var(--bdr);
  box-shadow: var(--sh-md);
}
body.post-type-archive-guide .tc-archive .tc-card h3,
body.post-type-archive-tasks .tc-archive .tc-card h3,
body.post-type-archive-tools .tc-archive .tc-card h3 { color: var(--t) !important; }
body.post-type-archive-guide .tc-archive .tc-card .tc-desc,
body.post-type-archive-tasks .tc-archive .tc-card .tc-desc,
body.post-type-archive-tools .tc-archive .tc-card .tc-desc { color: var(--tm); }

/* Card meta (date, term) */
body.post-type-archive-guide .tc-archive .tc-meta,
body.post-type-archive-guide .tc-archive .tc-meta-date,
body.post-type-archive-tasks .tc-archive .tc-meta,
body.post-type-archive-tasks .tc-archive .tc-meta-date,
body.post-type-archive-tools .tc-archive .tc-meta,
body.post-type-archive-tools .tc-archive .tc-meta-date {
  color: var(--tf) !important;
}

/* Card footer — CTA */
body.post-type-archive-guide .tc-archive .tc-read-more,
body.post-type-archive-tasks .tc-archive .tc-read-more,
body.post-type-archive-tools .tc-archive .tc-read-more {
  color: var(--green-dark) !important;
  font-weight: 700;
}
body.post-type-archive-guide .tc-archive .tc-best-tool,
body.post-type-archive-tasks .tc-archive .tc-best-tool,
body.post-type-archive-tools .tc-archive .tc-best-tool {
  color: var(--tf);
}
body.post-type-archive-guide .tc-archive .tc-card-foot,
body.post-type-archive-tasks .tc-archive .tc-card-foot,
body.post-type-archive-tools .tc-archive .tc-card-foot {
  border-top-color: var(--bdr-sub) !important;
}

/* Category headers */
body.post-type-archive-guide .tc-cat-head,
body.post-type-archive-tasks .tc-cat-head,
body.post-type-archive-tools .tc-cat-head { color: var(--dt); }
body.post-type-archive-guide .tc-cat-line,
body.post-type-archive-tasks .tc-cat-line,
body.post-type-archive-tools .tc-cat-line { background: var(--dbdr); }
body.post-type-archive-guide .tc-cat-count,
body.post-type-archive-tasks .tc-cat-count,
body.post-type-archive-tools .tc-cat-count {
  background: rgba(255,255,255,0.10);
  color: var(--dtf);
}

/* Muted text on archive */
body.post-type-archive-guide .tc-archive .tc-desc,
body.post-type-archive-guide .tc-archive p,
body.post-type-archive-tasks .tc-archive .tc-desc,
body.post-type-archive-tasks .tc-archive p,
body.post-type-archive-tools .tc-archive .tc-desc,
body.post-type-archive-tools .tc-archive p { color: var(--dtm); }

/* Empty state & Results placeholders */
.tc-empty-state {
    text-align: center;
    padding: var(--sp-20, 80px) var(--sp-6, 24px);
    background: #034f46;
    border-radius: var(--tc-radius-xl, 28px);
    border: 2px dashed var(--tc-grey-light, #C8BAA5);
    max-width: 600px;
    margin: 40px auto;
}
.tc-empty-state h3 { color: #fff; margin-bottom: 12px; }
.tc-empty-state p { color: rgba(255,255,255,0.8); }

@media (max-width: 480px) {
  .tc-btn,
  .tc-btn--primary,
  .tc-btn--deal,
  .tc-btn-cta,
  .tc-btn-origin {
    width: 100%;
    max-width: 100%;
    font-size: 0.78rem;
    padding: 0.65rem 0.85rem;
  }
}