/*
Theme Name: WP-DOS
Theme URI:
Author: Automattic
Author URI: https://wordpress.org
Description: WP-DOS modernized into a cleaner premium green portfolio theme.
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 5.7
Version: 3.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-dos
*/

:root {
  --jt-bg: #08110d;
  --jt-bg-soft: #0d1913;
  --jt-panel: rgba(13, 25, 19, 0.78);
  --jt-panel-strong: rgba(15, 31, 22, 0.92);
  --jt-border: rgba(115, 230, 155, 0.22);
  --jt-border-strong: rgba(115, 230, 155, 0.34);
  --jt-text: #eef7f0;
  --jt-muted: #9fb4a7;
  --jt-accent: #73e69b;
  --jt-accent-2: #4dd97f;
  --jt-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
  --jt-radius: 28px;
  --jt-radius-sm: 20px;
  --jt-content: min(1240px, calc(100vw - 32px));
  --jt-content-narrow: min(1120px, calc(100vw - 32px));
  --jt-warm-line: rgba(230, 224, 206, 0.12);
  --jt-warm-muted: #c8d2c7;
  /* v3.3 — surface, nav and font tokens */
  --jt-panel-bg: #0d1913;
  --jt-panel-strong-bg: #13231b;
  --jt-card-bg: rgba(255, 255, 255, 0.03);
  --jt-card-bg-elevated: rgba(255, 255, 255, 0.05);
  --jt-nav-bg: #0f1f17;
  --jt-nav-text: #dfeae3;
  --jt-nav-hover-bg: rgba(115, 230, 155, 0.12);
  --jt-font-sans: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jt-font-mono: "JetBrains Mono", "SF Mono", monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(97, 242, 143, 0.12), transparent 22%),
    radial-gradient(circle at 100% 10%, rgba(53, 180, 108, 0.12), transparent 24%),
    linear-gradient(180deg, #08110d 0%, #09140f 35%, #07100b 100%) !important;
  color: var(--jt-text) !important;
  font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
}

body::before {
  display: none;
}

p,
li,
.wp-block-paragraph,
.wp-block-list {
  color: var(--jt-muted) !important;
  font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1rem, 1.2vw, 1.06rem) !important;
  line-height: 1.75 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-site-title,
.wp-block-heading {
  color: #f4fbf5 !important;
  font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

h1,
.wp-block-post-title {
  font-size: clamp(2.7rem, 5vw, 5.4rem) !important;
}

h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.9rem) !important;
}

h3 {
  font-size: clamp(1.18rem, 1.8vw, 1.5rem) !important;
}

code,
pre,
.jt-eyebrow,
.jt-brand__tag,
.jt-card__eyebrow,
.jt-pill,
.jt-badge,
.jt-metric strong {
  font-family: "JetBrains Mono", monospace !important;
}

a {
  color: var(--jt-accent) !important;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

a:hover {
  color: #87ffab !important;
}

body {
  opacity: 1;
}

.wp-site-blocks {
  opacity: 1;
  transition: opacity 0.14s ease;
}

body.jt-page-out .wp-site-blocks {
  opacity: 0.12;
}

.wp-site-blocks {
  overflow-x: clip;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--jt-content-narrow) !important;
}

.alignwide,
.is-layout-constrained > .alignwide {
  max-width: var(--jt-content) !important;
}

.jt-topbar {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 40;
  backdrop-filter: blur(20px);
  background: rgba(8, 17, 13, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.jt-topbar__inner,
.jt-home-shell,
.jt-page-shell,
.jt-footer__inner {
  width: var(--jt-content);
  margin-inline: auto;
}

.jt-topbar__inner {
  gap: 1rem;
  padding: 1.15rem 0 !important;
}

.jt-brand {
  gap: 0.9rem;
  align-items: center;
}

.jt-brand .wp-block-site-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
}

.jt-brand__tag,
.jt-eyebrow,
.jt-card__eyebrow {
  color: var(--jt-accent) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.jt-brand__tag {
  opacity: 0.9;
}

.jt-main-nav {
  gap: 0.45rem !important;
}

.jt-main-nav .wp-block-navigation-item__content {
  padding: 0.65rem 0.95rem !important;
  border-radius: 999px;
  color: #dce8df !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jt-main-nav .wp-block-navigation-item__content:hover,
.jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
.jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  background: rgba(97, 242, 143, 0.12) !important;
  color: #fff !important;
}

.jt-home-shell,
.jt-page-shell {
  padding: clamp(1.5rem, 2.6vw, 2.4rem) 0 clamp(4.5rem, 7vw, 7rem) !important;
}

.jt-page-hero,
.jt-section,
.jt-page-content-shell .wp-block-post-content > * {
  position: relative;
  padding: clamp(1.45rem, 2.8vw, 2.5rem) !important;
  border-radius: var(--jt-radius) !important;
  border: 1px solid var(--jt-border) !important;
  background: linear-gradient(180deg, rgba(16, 29, 22, 0.88), rgba(11, 20, 15, 0.78)) !important;
  box-shadow: var(--jt-shadow) !important;
}

.jt-hero-section {
  overflow: visible;
  min-height: clamp(31rem, 56vh, 42rem);
  background:
    linear-gradient(135deg, rgba(14, 31, 22, 0.95), rgba(6, 14, 10, 0.84) 58%),
    radial-gradient(circle at 78% 18%, rgba(115, 230, 155, 0.18), transparent 30%) !important;
}

.jt-hero-section::after {
  content: "";
  position: absolute;
  inset: auto clamp(1.45rem, 2.8vw, 2.5rem) clamp(1.45rem, 2.8vw, 2.5rem) auto;
  width: min(28rem, 42%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(115, 230, 155, 0.52));
  opacity: 0.75;
}

.jt-section--open,
.jt-section--quiet {
  box-shadow: none !important;
}

.jt-section--open {
  border-color: rgba(115, 230, 155, 0.1) !important;
  background: rgba(7, 15, 11, 0.42) !important;
}

.jt-section--quiet {
  border-color: var(--jt-warm-line) !important;
  background: linear-gradient(180deg, rgba(238, 247, 240, 0.035), rgba(238, 247, 240, 0.018)) !important;
}

.jt-page-content-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.jt-page-content-shell .wp-block-post-content > * + * {
  margin-top: 1.55rem !important;
}

.jt-page-hero {
  margin-bottom: 1.25rem;
}

.jt-page-title {
  margin: 0.35rem 0 0.85rem !important;
}

.jt-page-intro,
.jt-hero-lead {
  max-width: 42rem;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem) !important;
}

.jt-hero-grid {
  display: flex !important;
  gap: clamp(2rem, 5vw, 4.2rem) !important;
  align-items: center;
}

.jt-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 34rem;
}

.jt-proof-panel {
  flex: 0 1 31rem;
}

.jt-hero-aside {
  display: grid !important;
  gap: 1rem !important;
  align-content: start !important;
  padding: clamp(1.2rem, 2vw, 1.6rem) !important;
  border-radius: calc(var(--jt-radius) - 4px) !important;
  border: 1px solid var(--jt-border-strong) !important;
  background:
    radial-gradient(circle at top right, rgba(97, 242, 143, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(17, 36, 26, 0.96), rgba(11, 22, 16, 0.92)) !important;
}

.jt-proof-panel {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) !important;
  border: 1px solid rgba(230, 224, 206, 0.14);
  border-radius: calc(var(--jt-radius) - 6px);
  background:
    linear-gradient(180deg, rgba(238, 247, 240, 0.06), rgba(238, 247, 240, 0.025)),
    rgba(9, 18, 13, 0.54);
}

.jt-proof-panel__lead {
  color: #eef7f0;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.42;
}

.jt-proof-list {
  display: grid;
  gap: 0.1rem;
  border-top: 1px solid var(--jt-warm-line);
}

.jt-proof-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--jt-warm-line);
}

.jt-proof-list strong {
  display: block;
  color: #f4fbf5;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
}

.jt-proof-list span {
  display: block;
  color: var(--jt-warm-muted);
  line-height: 1.6;
}

.jt-proof-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.jt-proof-card {
  padding: 1rem;
  border: 1px solid rgba(115, 230, 155, 0.12);
  border-radius: 16px;
  background: rgba(4, 10, 7, 0.28);
}

.jt-proof-card strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #f4fbf5;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
}

.jt-proof-card span {
  display: block;
  color: var(--jt-muted);
  font-size: 0.96rem;
  line-height: 1.62;
}

.jt-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

.jt-metric {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  padding: 1rem !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.jt-metric strong {
  display: block !important;
  margin: 0 0 0.2rem 0 !important;
}

.jt-metric span {
  display: block !important;
  color: var(--jt-muted);
}

.jt-pill-row,
.jt-cta-row,
.jt-kpi-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-top: 1.25rem !important;
}

/* Unified CTA-row spacing — applies to both .jt-section and .jt-section--compact
   so a paragraph directly above the button row always gets the same breathing
   room, regardless of which section variant wraps it. */
.jt-section .wp-block-buttons,
.jt-section .jt-cta-row,
.jt-section p + .wp-block-buttons,
.jt-section p + .jt-cta-row,
.jt-section .wp-block-paragraph + .wp-block-buttons,
.jt-section .wp-block-paragraph + .jt-cta-row {
  margin-top: 2rem !important;
}

.jt-pill,
.jt-badge,
.jt-kpi {
  display: inline-flex !important;
  align-items: center;
  padding: 0.65rem 0.95rem !important;
  border-radius: 999px !important;
  background: rgba(97, 242, 143, 0.08) !important;
  border: 1px solid rgba(97, 242, 143, 0.14) !important;
  color: #d9eee0 !important;
}

.wp-block-buttons.jt-cta-row,
.jt-cta-row .wp-block-button {
  margin: 0 !important;
}

.wp-block-button__link,
.wp-element-button {
  border-radius: 999px !important;
  font-weight: 600 !important;
  color: #07110d !important;
  background: linear-gradient(135deg, #73e69b, #4dd97f) !important;
}

.jt-cta-row .wp-block-button__link,
.jt-cta-row .wp-element-button {
  min-width: 11.75rem;
  box-shadow: 0 12px 28px rgba(77, 217, 127, 0.16);
  white-space: nowrap;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background: linear-gradient(135deg, #86edaa, #5fe08c) !important;
  color: #07110d !important;
}

.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #eef7f0 !important;
  border: 1px solid var(--jt-border-strong) !important;
  box-shadow: none !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: rgba(115, 230, 155, 0.08) !important;
  color: #f6fbf7 !important;
}

.jt-card-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
  margin-top: 1.1rem !important;
}

.jt-card-grid > * {
  grid-column: span 4;
}

.jt-card-grid--two > * {
  grid-column: span 6 !important;
}

.jt-card-grid--four > * {
  grid-column: span 3 !important;
}

.jt-card,
.jt-card-grid > * {
  padding: 1.3rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.75) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-card:hover,
.jt-card-grid > *:hover {
  transform: translateY(-4px);
  border-color: var(--jt-border-strong) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.jt-card h3,
.jt-card-grid h3 {
  margin: 0.35rem 0 0.55rem !important;
}

.jt-card h3 + p,
.jt-card-grid h3 + p {
  margin-top: 0.55rem !important;
}

.jt-card p,
.jt-card-grid p {
  margin: 0 !important;
}

.jt-service-list,
.jt-case-list,
.jt-case-grid,
.jt-principle-strip {
  margin-top: 1.85rem;
}

.jt-section > h2,
.jt-section > .wp-block-heading {
  margin-bottom: 1.25rem !important;
  line-height: 1.12 !important;
}

.jt-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  border-top: 0;
}

.jt-section > h2 + .jt-service-list,
.jt-section > .wp-block-heading + .jt-service-list,
.jt-section > h2 + .jt-principle-strip,
.jt-section > .wp-block-heading + .jt-principle-strip {
  margin-top: 1.75rem;
}

.jt-service-list article {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(115, 230, 155, 0.12);
  border-radius: var(--jt-radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012)),
    rgba(9, 18, 13, 0.58);
}

.jt-service-list article:nth-child(odd) {
  border-right: 1px solid rgba(115, 230, 155, 0.12);
}

.jt-service-list article:nth-child(even) {
  padding-left: 1.2rem;
}

.jt-service-list span,
.jt-case-list .jt-card__eyebrow,
.jt-case-grid .jt-card__eyebrow {
  color: var(--jt-accent) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

.jt-service-list h3,
.jt-case-list h3,
.jt-case-grid h3,
.jt-principle-strip strong {
  margin: 0 0 0.45rem !important;
  color: #f4fbf5;
}

.jt-service-list p,
.jt-case-list p,
.jt-case-grid p,
.jt-principle-strip p {
  margin: 0 !important;
  line-height: 1.68;
}

.jt-principle-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--jt-warm-line);
  border-radius: var(--jt-radius-sm);
  background: var(--jt-warm-line);
}

.jt-principle-strip > div {
  padding: 1.35rem;
  background: rgba(8, 17, 13, 0.78);
}

.jt-principle-strip strong {
  display: block;
}

.jt-case-list {
  display: grid;
  gap: 0.85rem;
}

.jt-case-list article {
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 0.68fr);
  gap: 1.2rem;
  align-items: start;
  padding: 1.2rem 0;
  border-top: 1px solid var(--jt-border);
}

.jt-case-list article:last-child {
  border-bottom: 1px solid var(--jt-border);
}

.jt-case-list .jt-card__eyebrow {
  margin: 0 !important;
}

.jt-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.jt-case-grid article {
  display: flex;
  flex-direction: column;
  min-height: 13rem;
  padding: 1.2rem;
  border: 1px solid rgba(115, 230, 155, 0.12);
  border-radius: var(--jt-radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.65);
}

.jt-cert-grid .jt-card {
  min-height: 9rem;
}

.jt-cert-grid.jt-cert-grid--preview {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.jt-cert-grid.jt-cert-grid--preview .jt-cert-card {
  min-width: 0;
  min-height: 16rem;
  flex-direction: column !important;
  justify-content: space-between;
}

.jt-cert-grid.jt-cert-grid--preview .jt-cert-card__badge {
  width: 76px;
  height: 76px;
}

.jt-cert-grid.jt-cert-grid--preview .jt-cert-card__badge img {
  max-width: 62px;
  max-height: 62px;
}

.jt-cert-grid.jt-cert-grid--preview .jt-cert-card__body {
  width: 100%;
}

.jt-contact-form-section .wpforms-container {
  margin-top: 1.5rem;
}

.jt-contact-form-section .wpforms-field-label,
.jt-contact-form-section .wpforms-field-sublabel,
.jt-contact-form-section .wpforms-field-description {
  color: var(--jt-text) !important;
}

.jt-contact-form-section input[type="text"],
.jt-contact-form-section input[type="email"],
.jt-contact-form-section input[type="tel"],
.jt-contact-form-section textarea,
.jt-contact-form-section select {
  width: 100% !important;
  border: 1px solid var(--jt-border-strong) !important;
  border-radius: 14px !important;
  background: rgba(8, 17, 13, 0.72) !important;
  color: var(--jt-text) !important;
  padding: 0.85rem 1rem !important;
}

.jt-contact-form-section textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.jt-contact-form-section .wpforms-error,
.jt-contact-form-section label.wpforms-error {
  color: #ffb8b8 !important;
  font-size: 0.9rem !important;
  margin-top: 0.35rem !important;
}

.jt-contact-form-section button[type="submit"],
.jt-contact-form-section .wpforms-submit {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #73e69b, #4dd97f) !important;
  color: #07110d !important;
  font-weight: 600 !important;
  padding: 0.9rem 1.35rem !important;
}

.jt-cert-mini {
  display: grid !important;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.jt-cert-mini__badge {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

.jt-contact-band {
  background:
    linear-gradient(135deg, rgba(22, 47, 32, 0.94), rgba(8, 17, 13, 0.88)) !important;
}

.jt-split {
  display: grid !important;
  grid-template-columns: minmax(290px, 0.88fr) minmax(0, 1.12fr) !important;
  gap: 1.4rem !important;
  align-items: center;
}

.jt-profile-photo img {
  width: 100% !important;
  aspect-ratio: 0.9 / 1 !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}

.jt-footer {
  padding: 0 0 2rem !important;
}

.jt-footer__inner {
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding: 1.4rem 1.5rem !important;
}

.jt-footer__meta,
.jt-footer__links {
  gap: 0.85rem !important;
}

.jt-footer__links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.jt-footer__lab {
  border-top: 1px solid var(--jt-border) !important;
  margin-top: 0.5rem !important;
  padding-top: 0.75rem !important;
  gap: 1.5rem !important;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.jt-footer__lab:hover {
  opacity: 0.7;
}
.jt-footer__lab p {
  font-size: 0.75rem !important;
  margin: 0 !important;
}
.jt-footer__lab a {
  color: var(--jt-muted) !important;
  text-decoration: none !important;
}
.jt-footer__lab a:hover {
  color: var(--jt-accent) !important;
}

.jt-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--jt-delay, 0ms);
}

.jt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.jt-card,
.jt-card-grid > *,
.jt-section,
.jt-page-hero,
.jt-main-nav .wp-block-navigation-item__content,
.wp-block-button__link,
.wp-element-button {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease, opacity 0.24s ease, color 0.24s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body,
  a,
  .jt-reveal,
  .jt-card,
  .jt-card-grid > *,
  .jt-section,
  .jt-page-hero,
  .jt-main-nav .wp-block-navigation-item__content,
  .wp-block-button__link {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .jt-reveal {
    opacity: 1 !important;
  }
}

@media (max-width: 1080px) {
  .jt-card-grid > *,
  .jt-card-grid--four > * {
    grid-column: span 6 !important;
  }

  .jt-service-list,
  .jt-principle-strip {
    grid-template-columns: 1fr;
  }

  .jt-service-list article:nth-child(odd) {
    border-right: 1px solid rgba(115, 230, 155, 0.12);
  }

  .jt-service-list article:nth-child(even) {
    padding-left: 0;
  }

  .jt-case-list article {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .jt-proof-card-grid,
  .jt-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jt-cert-grid.jt-cert-grid--preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jt-cert-grid.jt-cert-grid--preview .jt-cert-card {
    min-height: 15rem;
  }
}

@media (max-width: 860px) {
  .jt-hero-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .jt-split {
    grid-template-columns: 1fr !important;
  }

  .jt-metric-grid {
    grid-template-columns: 1fr !important;
  }

  .jt-proof-list > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .jt-proof-card-grid,
  .jt-case-grid {
    grid-template-columns: 1fr;
  }

  .jt-cert-grid.jt-cert-grid--preview {
    grid-template-columns: 1fr !important;
  }

  .jt-cert-grid.jt-cert-grid--preview .jt-cert-card {
    min-height: 0;
  }

  .jt-proof-panel {
    flex: none;
    width: auto;
  }

  .jt-topbar__inner {
    padding: 1rem 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .jt-brand {
    width: 100%;
  }

  .jt-main-nav {
    width: 100%;
    justify-content: flex-start !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 14px;
    color: var(--jt-text) !important;
    background: rgba(115, 230, 155, 0.08) !important;
    border: 1px solid var(--jt-border-strong) !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-open svg,
  .jt-main-nav .wp-block-navigation__responsive-container-close svg {
    fill: currentColor !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(8, 17, 13, 0.98) !important;
    color: var(--jt-text) !important;
    padding: 1.2rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .jt-main-nav .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-close,
  .jt-main-nav .wp-block-navigation__responsive-container-content,
  .jt-main-nav .wp-block-navigation__container {
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-content {
    padding-top: 3.6rem !important;
    gap: 0.5rem !important;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-close {
    color: var(--jt-text) !important;
  }

  .jt-main-nav .wp-block-navigation-item,
  .jt-main-nav .wp-block-navigation-item__content {
    width: 100%;
  }

  .jt-main-nav .wp-block-navigation-item__content {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0.85rem 1rem !important;
    border-radius: 14px;
    background: transparent !important;
  }

  .jt-main-nav .wp-block-navigation-item__content:hover,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
    background: rgba(115, 230, 155, 0.1) !important;
  }
}

@media (max-width: 720px) {
  .jt-card-grid > *,
  .jt-card-grid--two > *,
  .jt-card-grid--four > * {
    grid-column: span 12 !important;
  }

  .jt-page-hero,
  .jt-section,
  .jt-page-content-shell .wp-block-post-content > * {
    padding: 1.2rem !important;
    border-radius: 22px !important;
  }

  .jt-hero-section {
    min-height: auto;
  }

  .jt-service-list article {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    padding-block: 1.1rem;
  }

  .jt-brand {
    align-items: flex-start;
  }

  .jt-brand__tag {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
 * JT Security Feed
 * -------------------------------------------------------------------------
 * Styles for the [jt_security_feed] shortcode rendered inside
 * .jt-page-content-shell. Matches the existing jt-* design tokens —
 * no new colors, fonts or radii are introduced.
 * ------------------------------------------------------------------------- */

.jt-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.jt-feed__bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.6rem 1rem !important;
  padding: 0 0.15rem !important;
}

.jt-feed__eyebrow-label {
  margin: 0 !important;
}

.jt-feed__meta {
  margin: 0 !important;
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.jt-feed__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  padding: 0.15rem 0 0.35rem !important;
}

.jt-feed__filter {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--jt-border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #dce8df !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.jt-feed__filter:hover {
  background: rgba(115, 230, 155, 0.08) !important;
  border-color: var(--jt-border-strong) !important;
  color: #f4fbf5 !important;
  transform: translateY(-1px);
}

.jt-feed__filter.is-active {
  background: rgba(115, 230, 155, 0.14) !important;
  border-color: var(--jt-border-strong) !important;
  color: var(--jt-accent) !important;
}

.jt-feed__filter:focus-visible {
  outline: 2px solid var(--jt-accent) !important;
  outline-offset: 2px;
}

.jt-feed__empty {
  margin: 0 !important;
  padding: 1.4rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px dashed var(--jt-border) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--jt-muted) !important;
  text-align: center;
}

.jt-feed__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.1rem !important;
}

.jt-feed__card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  padding: 1.3rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.75) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.jt-feed__card:hover {
  transform: translateY(-4px);
  border-color: var(--jt-border-strong) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.jt-feed__card[hidden] {
  display: none !important;
}

.jt-feed__card-eyebrow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin: 0 !important;
}

.jt-feed__source {
  color: var(--jt-accent) !important;
}

.jt-feed__dot {
  color: var(--jt-muted);
  opacity: 0.7;
}

.jt-feed__card-eyebrow time {
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.jt-feed__title {
  margin: 0 !important;
  font-size: clamp(1.08rem, 1.4vw, 1.22rem) !important;
  line-height: 1.25 !important;
}

.jt-feed__title a {
  color: #f4fbf5 !important;
  display: inline-block;
}

.jt-feed__title a:hover {
  color: var(--jt-accent) !important;
}

.jt-feed__excerpt {
  margin: 0 !important;
  color: var(--jt-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.jt-feed__pill {
  align-self: flex-start;
  margin-top: auto !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.jt-feed__pill--security {
  background: rgba(115, 230, 155, 0.1) !important;
  border-color: rgba(115, 230, 155, 0.22) !important;
  color: var(--jt-accent) !important;
}

.jt-feed__pill--microsoft {
  background: rgba(93, 169, 255, 0.1) !important;
  border-color: rgba(93, 169, 255, 0.22) !important;
  color: #9cc9ff !important;
}

.jt-feed__pill--tech {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e3ecec !important;
}

.jt-feed__pill--dutch {
  background: rgba(255, 138, 80, 0.1) !important;
  border-color: rgba(255, 138, 80, 0.28) !important;
  color: #ffb28a !important;
}

@media (max-width: 720px) {
  .jt-feed__grid {
    grid-template-columns: 1fr !important;
  }

  .jt-feed__bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* -------------------------------------------------------------------------
 * JT Security Feed — Dashboard layout
 * -------------------------------------------------------------------------
 * Adds ticker, stats strip, highlights, search, sticky filters, sidebar
 * and thumbnail support. All tokens (colors, fonts, radii, shadows) are
 * inherited from the :root jt-* variables at the top of this file.
 * ------------------------------------------------------------------------- */

.jt-feed-dash {
  gap: 1.5rem !important;
}

/* ----- Ticker ----- */
.jt-feed-ticker {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 0 !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid var(--jt-border) !important;
  background:
    linear-gradient(90deg, rgba(8,17,13,1) 0%, rgba(13,25,19,0.85) 10%, rgba(13,25,19,0.85) 90%, rgba(8,17,13,1) 100%),
    rgba(9, 18, 13, 0.75) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.jt-feed-ticker__track {
  display: flex !important;
  gap: 2.75rem !important;
  width: max-content;
  animation: jt-feed-ticker-scroll 55s linear infinite;
  will-change: transform;
}

.jt-feed-ticker:hover .jt-feed-ticker__track,
.jt-feed-ticker--paused .jt-feed-ticker__track {
  animation-play-state: paused;
}

@keyframes jt-feed-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.jt-feed-ticker__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0 0.25rem !important;
  color: #dce8df !important;
  font-size: 0.88rem !important;
  white-space: nowrap;
}

.jt-feed-ticker__item:hover .jt-feed-ticker__title {
  color: var(--jt-accent) !important;
}

.jt-feed-ticker__source {
  color: var(--jt-accent) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.jt-feed-ticker__title {
  color: #eef7f0 !important;
  font-weight: 500 !important;
  transition: color 0.22s ease;
}

.jt-feed-ticker__time {
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ----- Stats strip ----- */
.jt-feed-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

.jt-feed-stats__item {
  appearance: none;
  -webkit-appearance: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  padding: 0.95rem 1.1rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid var(--jt-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(9, 18, 13, 0.65) !important;
  color: inherit !important;
  cursor: pointer;
  text-align: left;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.jt-feed-stats__item:hover {
  transform: translateY(-2px);
  border-color: var(--jt-border-strong) !important;
  background:
    linear-gradient(180deg, rgba(115,230,155,0.05), rgba(115,230,155,0.015)),
    rgba(9, 18, 13, 0.65) !important;
}

.jt-feed-stats__item--meta {
  cursor: default;
}

.jt-feed-stats__item--meta:hover {
  transform: none;
}

.jt-feed-stats__value {
  color: #f4fbf5 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 1.55rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

.jt-feed-stats__label {
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ----- Highlights ----- */
.jt-feed-highlights {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
}

.jt-feed-highlights__bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 0.75rem !important;
  padding: 0 0.15rem !important;
}

.jt-feed-highlights__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
}

/* ----- Card (shared base, extends .jt-feed__card) ----- */
.jt-feed-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.75) !important;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-feed-card:hover,
.jt-feed-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(115, 230, 155, 0.35) !important;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(115, 230, 155, 0.18) inset;
  outline: none;
}

.jt-feed-card[hidden] {
  display: none !important;
}

.jt-feed-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: rgba(9, 18, 13, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.jt-feed-card__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease, opacity 0.3s ease;
  opacity: 0.92;
}

.jt-feed-card:hover .jt-feed-card__thumb-img {
  transform: scale(1.04);
  opacity: 1;
}

.jt-feed-card__thumb-label {
  position: absolute;
  left: 0.85rem;
  bottom: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(8, 17, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef7f0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  max-width: calc(100% - 1.7rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jt-feed-card__thumb--placeholder .jt-feed-card__thumb-img {
  display: none;
}

.jt-feed-card__thumb--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(8,17,13,0.7) 100%);
  pointer-events: none;
}

.jt-feed-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.2rem 1.3rem 1.25rem;
  flex: 1;
}

/* Featured card variant in the highlights block */
.jt-feed-card--featured .jt-feed-card__thumb {
  aspect-ratio: 16 / 10;
}

.jt-feed-card--featured .jt-feed__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  line-height: 1.2 !important;
}

.jt-feed-card--featured .jt-feed__excerpt {
  font-size: 0.98rem !important;
  -webkit-line-clamp: 4;
}

/* Inline expand — triggered by JS toggling .is-expanded */
.jt-feed-card .jt-feed__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jt-feed-card.is-expanded .jt-feed__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.jt-feed-card.is-expanded {
  border-color: rgba(115, 230, 155, 0.38) !important;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(115, 230, 155, 0.22) inset;
}

/* ----- Layout: main grid + sidebar ----- */
.jt-feed-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 1.4rem !important;
  align-items: start;
}

.jt-feed-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  min-width: 0;
}

.jt-feed-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
  z-index: 15;
  padding: 0.9rem 1rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid var(--jt-border) !important;
  background: rgba(8, 17, 13, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-feed-search {
  position: relative;
  display: flex !important;
  align-items: center !important;
}

.jt-feed-search__icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jt-muted);
  pointer-events: none;
}

.jt-feed-search input[type="search"] {
  width: 100%;
  padding: 0.75rem 0.95rem 0.75rem 2.4rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--jt-border) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--jt-text) !important;
  font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 0.95rem !important;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.jt-feed-search input[type="search"]::placeholder {
  color: var(--jt-muted);
  opacity: 0.7;
}

.jt-feed-search input[type="search"]:focus {
  outline: none;
  border-color: var(--jt-border-strong) !important;
  background: rgba(115, 230, 155, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(115, 230, 155, 0.12);
}

/* Remove default browser search-cancel styling that clashes with dark bg */
.jt-feed-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  background: rgba(239, 246, 240, 0.4);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  cursor: pointer;
}

.jt-feed-filters--sticky {
  padding: 0 !important;
  flex-wrap: wrap;
}

.jt-feed__no-results {
  margin: 0 !important;
  padding: 1.4rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px dashed var(--jt-border) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--jt-muted) !important;
  text-align: center;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.jt-feed__no-results[hidden] {
  display: none !important;
}

/* AI category pill */
.jt-feed__pill--ai {
  background: rgba(186, 135, 255, 0.1) !important;
  border-color: rgba(186, 135, 255, 0.24) !important;
  color: #ceaaff !important;
}

.jt-feed__card-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.6rem;
}

/* ----- Sidebar ----- */
.jt-feed-aside {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
}

.jt-feed-aside__block {
  padding: 1.25rem 1.3rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid var(--jt-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(9, 18, 13, 0.7) !important;
}

.jt-feed-aside__block .jt-eyebrow {
  margin: 0 0 0.85rem !important;
}

.jt-feed-tags {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.jt-feed-tags li {
  margin: 0 !important;
}

.jt-feed-tag {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.03);
  color: #dce8df;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.jt-feed-tag:hover,
.jt-feed-tag:focus-visible {
  background: rgba(115, 230, 155, 0.1);
  border-color: var(--jt-border-strong);
  color: var(--jt-accent);
  transform: translateY(-1px);
  outline: none;
}

.jt-feed-tag__count {
  color: var(--jt-muted);
  font-size: 0.66rem;
}

.jt-feed-tag:hover .jt-feed-tag__count {
  color: var(--jt-accent);
  opacity: 0.8;
}

.jt-feed-sources-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.jt-feed-sources-list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0.2rem !important;
  margin: 0 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
}

.jt-feed-sources-list li:last-child {
  border-bottom: 0 !important;
}

.jt-feed-sources-list__name {
  color: #dce8df;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jt-feed-sources-list__count {
  color: var(--jt-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----- Responsive ----- */
@media (max-width: 1080px) {
  .jt-feed-layout {
    grid-template-columns: 1fr !important;
  }

  .jt-feed-aside {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jt-feed-highlights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jt-feed-highlights__grid > *:nth-child(3) {
    grid-column: 1 / -1;
  }

  .jt-feed-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .jt-feed-highlights__grid {
    grid-template-columns: 1fr !important;
  }

  .jt-feed-highlights__grid > *:nth-child(3) {
    grid-column: auto;
  }

  .jt-feed-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jt-feed-aside {
    grid-template-columns: 1fr !important;
  }

  .jt-feed-controls {
    padding: 0.75rem 0.85rem !important;
  }

  .jt-feed-ticker__track {
    animation-duration: 40s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jt-feed-ticker__track,
  .jt-feed-card,
  .jt-feed-card__thumb-img,
  .jt-feed-stats__item {
    animation: none !important;
    transition: none !important;
  }

  .jt-feed-card:hover .jt-feed-card__thumb-img {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * JT Certificates — card grid with Microsoft tier badges
 * -------------------------------------------------------------------------
 * Minimal horizontal cards: SVG badge on the left, text on the right.
 * Inherits the exact card background / border / radius tokens from .jt-card
 * so it sits visually consistent with the rest of the theme.
 * ------------------------------------------------------------------------- */

.jt-cert-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.1rem !important;
  margin-top: 1.1rem !important;
}

.jt-cert-grid--fundamentals {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

.jt-cert-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1.2rem 1.25rem !important;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.75) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-cert-card:hover {
  transform: translateY(-3px);
  border-color: rgba(115, 230, 155, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(115, 230, 155, 0.14) inset;
}

.jt-cert-card__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(115, 230, 155, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.jt-cert-card:hover .jt-cert-card__badge {
  background:
    radial-gradient(circle at 30% 25%, rgba(115, 230, 155, 0.22), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(115, 230, 155, 0.22);
  transform: scale(1.04);
}

.jt-cert-card__badge img {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  /* Microsoft's badge SVGs are dark-on-light — a subtle soft glow keeps
     them legible against the near-black card without tinting the artwork. */
  filter: drop-shadow(0 0 6px rgba(115, 230, 155, 0.08));
}

.jt-cert-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.jt-cert-card__eyebrow {
  margin: 0 0 0.25rem !important;
}

.jt-cert-card__code {
  margin: 0 !important;
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: #f4fbf5 !important;
}

.jt-cert-card__name {
  margin: 0.2rem 0 0 !important;
  color: var(--jt-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

.jt-cert-card__tier {
  margin: 0.55rem 0 0 !important;
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.7;
}

/* Tier accents — very subtle, only a left hint so the card stays clean */
.jt-cert-card--expert {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(11, 22, 16, 0.8) !important;
}

.jt-cert-card--expert .jt-cert-card__tier {
  color: var(--jt-accent) !important;
  opacity: 0.85;
}

.jt-cert-card--associate .jt-cert-card__tier {
  color: #9cc9ff !important;
  opacity: 0.75;
}

.jt-cert-card--fundamentals .jt-cert-card__tier {
  color: #dce8df !important;
  opacity: 0.6;
}

@media (max-width: 720px) {
  .jt-cert-grid,
  .jt-cert-grid--fundamentals {
    grid-template-columns: 1fr !important;
  }

  .jt-cert-card__badge {
    width: 56px;
    height: 56px;
  }

  .jt-cert-card__badge img {
    width: 48px;
    height: 48px;
  }

  .jt-cert-card__code {
    font-size: 1.35rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jt-cert-card,
  .jt-cert-card__badge {
    transition: none !important;
  }

  .jt-cert-card:hover {
    transform: none;
  }

  .jt-cert-card:hover .jt-cert-card__badge {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * Theme toggle button (topbar)
 * -------------------------------------------------------------------------
 * The button lives inside the new .jt-topbar__actions group which wraps the
 * navigation and the toggle together on the right side of the topbar.
 * ------------------------------------------------------------------------- */

.jt-topbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: nowrap !important;
}

.jt-theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--jt-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.jt-theme-toggle:hover {
  background: rgba(115, 230, 155, 0.1);
  border-color: var(--jt-border-strong);
  color: var(--jt-accent);
  transform: translateY(-1px);
}

.jt-theme-toggle:focus-visible {
  outline: 2px solid var(--jt-accent);
  outline-offset: 2px;
}

.jt-theme-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Sun/moon visibility — scoped with .jt-theme-toggle parent so specificity
   (0,2,0) beats the generic `.jt-theme-toggle svg` rule (0,1,1). Without
   this scope, both icons would be visible at the same time in dark mode. */
.jt-theme-toggle .jt-theme-toggle__sun {
  display: block;
}

.jt-theme-toggle .jt-theme-toggle__moon {
  display: none;
}

/* Smooth transition between themes on the largest surfaces */
body,
.jt-topbar,
.jt-page-hero,
.jt-section,
.jt-card,
.jt-card-grid > *,
.jt-feed-card,
.jt-cert-card,
.jt-feed-ticker,
.jt-feed-stats__item,
.jt-feed-aside__block,
.jt-feed-controls {
  transition: background-color 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

@media (max-width: 860px) {
  .jt-topbar__actions {
    gap: 0.5rem !important;
    flex: 0 0 auto;
  }
}

/* -------------------------------------------------------------------------
 * Light mode — steel-green palette on an off-white background
 * -------------------------------------------------------------------------
 * Activated by setting [data-theme="light"] on <html>. The initial value
 * is chosen by jt-theme-init in <head> based on localStorage or the OS
 * preference, so the correct theme is in place before first paint.
 *
 * All overrides below either (a) flip an existing :root variable that is
 * already consumed by the dark-mode rules, or (b) re-state a hardcoded
 * rgba/hex value that the dark rules set with !important, using the same
 * specificity trick (attribute-scoped) to win the cascade.
 * ------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --jt-bg: #f3f1ec;
  --jt-bg-soft: #ece9e1;
  --jt-panel: #fafaf6;
  --jt-panel-strong: #f6f4ee;
  --jt-border: rgba(31, 82, 56, 0.20);
  --jt-border-strong: rgba(31, 82, 56, 0.32);
  --jt-text: #1a1f1c;
  --jt-muted: #3d4a42;
  --jt-accent: #1f5238;
  --jt-accent-2: #2f6b48;
  --jt-shadow: 0 20px 60px rgba(31, 82, 56, 0.10);
  /* v3.3 — surface, nav and font overrides */
  --jt-panel-bg: #fafaf6;
  --jt-panel-strong-bg: #f6f4ee;
  --jt-card-bg: #f6f4ed;
  --jt-card-bg-elevated: #fbfaf3;
  --jt-nav-bg: #173d28;
  --jt-nav-text: #eef7f0;
  --jt-nav-hover-bg: rgba(115, 230, 155, 0.16);
}

/* ----- Base surfaces + type ----- */

[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(47, 107, 72, 0.07), transparent 22%),
    radial-gradient(circle at 100% 10%, rgba(47, 107, 72, 0.05), transparent 24%),
    linear-gradient(180deg, #f3f1ec 0%, #ece9e1 55%, #f3f1ec 100%) !important;
  color: var(--jt-text) !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .wp-block-post-title,
[data-theme="light"] .wp-block-site-title,
[data-theme="light"] .wp-block-heading {
  color: #0a1613 !important;
}

[data-theme="light"] a:hover {
  color: #2f6b48 !important;
}

/* ----- Topbar + navigation ----- */

[data-theme="light"] .jt-topbar {
  background: var(--jt-nav-bg) !important;
  border-bottom: 1px solid var(--jt-border-strong) !important;
}

[data-theme="light"] .jt-main-nav .wp-block-navigation-item__content {
  color: var(--jt-nav-text) !important;
}

[data-theme="light"] .jt-main-nav .wp-block-navigation-item__content:hover,
[data-theme="light"] .jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
[data-theme="light"] .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  background: var(--jt-nav-hover-bg) !important;
  color: #ffffff !important;
}

@media (max-width: 860px) {
  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container-open {
    background: var(--jt-nav-hover-bg) !important;
    color: var(--jt-nav-text) !important;
  }
  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--jt-nav-bg) !important;
    color: var(--jt-nav-text) !important;
  }
}

/* ----- Section/hero panels + page content shell ----- */

[data-theme="light"] .jt-page-hero,
[data-theme="light"] .jt-section,
[data-theme="light"] .jt-page-content-shell .wp-block-post-content > * {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border: 1px solid var(--jt-border) !important;
  box-shadow: 0 20px 50px rgba(31, 82, 56, 0.10) !important;
}

[data-theme="light"] .jt-hero-section {
  background:
    linear-gradient(135deg, var(--jt-panel-bg), var(--jt-card-bg-elevated) 62%),
    radial-gradient(circle at 78% 18%, rgba(47, 107, 72, 0.10), transparent 30%) !important;
}

[data-theme="light"] .jt-section--open {
  background: var(--jt-panel-bg) !important;
  border: 1px solid var(--jt-border) !important;
}

[data-theme="light"] .jt-section--quiet {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-card-bg-elevated)) !important;
  border: 1px solid var(--jt-border) !important;
}

[data-theme="light"] .jt-page-content-shell {
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="light"] .jt-proof-panel {
  background: linear-gradient(180deg, var(--jt-card-bg-elevated), var(--jt-card-bg)) !important;
  border: 1px solid var(--jt-border-strong) !important;
}

[data-theme="light"] .jt-proof-panel__lead,
[data-theme="light"] .jt-proof-card strong,
[data-theme="light"] .jt-service-list h3,
[data-theme="light"] .jt-case-grid h3,
[data-theme="light"] .jt-principle-strip strong {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-proof-card {
  background: var(--jt-card-bg) !important;
  border: 1px solid var(--jt-border) !important;
}

[data-theme="light"] .jt-proof-card span,
[data-theme="light"] .jt-service-list p,
[data-theme="light"] .jt-case-grid p,
[data-theme="light"] .jt-principle-strip p {
  color: var(--jt-muted) !important;
}

[data-theme="light"] .jt-service-list,
[data-theme="light"] .jt-service-list article,
[data-theme="light"] .jt-case-list article,
[data-theme="light"] .jt-case-list article:last-child {
  border-color: rgba(31, 82, 56, 0.13);
}

[data-theme="light"] .jt-service-list article {
  background:
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg));
  border: 1px solid var(--jt-border-strong);
  box-shadow: 0 14px 34px rgba(14, 38, 27, 0.08);
}

[data-theme="light"] .jt-case-grid article {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-card-bg-elevated));
  border: 1px solid var(--jt-border);
}

[data-theme="light"] .jt-principle-strip {
  background: rgba(31, 82, 56, 0.10);
  border: 1px solid var(--jt-border);
}

[data-theme="light"] .jt-principle-strip > div {
  background: var(--jt-panel-bg);
}

[data-theme="light"] .jt-contact-form-section .wpforms-error,
[data-theme="light"] .jt-contact-form-section label.wpforms-error {
  color: #9f1d1d !important;
}

[data-theme="light"] .jt-contact-form-section .wpforms-field-label,
[data-theme="light"] .jt-contact-form-section .wpforms-field-sublabel,
[data-theme="light"] .jt-contact-form-section .wpforms-field-description {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-contact-form-section input[type="text"],
[data-theme="light"] .jt-contact-form-section input[type="email"],
[data-theme="light"] .jt-contact-form-section input[type="tel"],
[data-theme="light"] .jt-contact-form-section textarea,
[data-theme="light"] .jt-contact-form-section select {
  background: var(--jt-panel-bg) !important;
  color: #0a1613 !important;
  border: 1px solid var(--jt-border-strong) !important;
}

[data-theme="light"] .jt-hero-aside {
  background:
    radial-gradient(circle at top right, rgba(47, 107, 72, 0.10), transparent 34%),
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-card-bg-elevated)) !important;
  border: 1px solid var(--jt-border-strong) !important;
}

[data-theme="light"] .jt-metric {
  background: var(--jt-card-bg) !important;
  border: 1px solid var(--jt-border-strong) !important;
}

/* ----- Pills, badges, kpis, buttons ----- */

[data-theme="light"] .jt-pill,
[data-theme="light"] .jt-badge,
[data-theme="light"] .jt-kpi {
  background: rgba(31, 82, 56, 0.06) !important;
  border-color: rgba(31, 82, 56, 0.15) !important;
  color: #26332d !important;
}

[data-theme="light"] .wp-block-button__link,
[data-theme="light"] .wp-element-button {
  background: linear-gradient(135deg, #2f6b48, #1f5238) !important;
  color: #fbfcfb !important;
  box-shadow: 0 12px 28px rgba(31, 82, 56, 0.14);
}

[data-theme="light"] .wp-block-button__link:hover,
[data-theme="light"] .wp-element-button:hover {
  background: linear-gradient(135deg, #3a7c54, #265e3f) !important;
  color: #fbfcfb !important;
}

[data-theme="light"] .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #1f5238 !important;
  border: 1px solid rgba(31, 82, 56, 0.32) !important;
  box-shadow: none !important;
}

[data-theme="light"] .is-style-outline .wp-block-button__link:hover {
  background: rgba(31, 82, 56, 0.06) !important;
  color: #0a1613 !important;
}

/* ----- Generic card grid ----- */

[data-theme="light"] .jt-card,
[data-theme="light"] .jt-card-grid > * {
  background:
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-card:hover,
[data-theme="light"] .jt-card-grid > *:hover {
  border-color: rgba(31, 82, 56, 0.28) !important;
  box-shadow: 0 18px 36px rgba(31, 82, 56, 0.08) !important;
}

[data-theme="light"] .jt-profile-photo img {
  border: 1px solid rgba(31, 82, 56, 0.1) !important;
  box-shadow: 0 20px 44px rgba(31, 82, 56, 0.1);
}

/* ----- Security Feed Dashboard ----- */

[data-theme="light"] .jt-feed__filter {
  border-color: rgba(31, 82, 56, 0.14) !important;
  background: var(--jt-panel-bg) !important;
  color: #26332d !important;
}

[data-theme="light"] .jt-feed__filter:hover {
  background: rgba(47, 107, 72, 0.08) !important;
  border-color: rgba(31, 82, 56, 0.28) !important;
  color: #0a1613 !important;
}

[data-theme="light"] .jt-feed__filter.is-active {
  background: rgba(47, 107, 72, 0.12) !important;
  border-color: rgba(31, 82, 56, 0.32) !important;
  color: #1f5238 !important;
}

[data-theme="light"] .jt-feed-ticker {
  background:
    linear-gradient(90deg, var(--jt-panel-bg) 0%, var(--jt-panel-strong-bg) 10%, var(--jt-panel-strong-bg) 90%, var(--jt-panel-bg) 100%),
    var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-feed-ticker__title {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-feed-ticker__source {
  color: #1f5238 !important;
}

[data-theme="light"] .jt-feed-stats__item {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-feed-stats__item:hover {
  background: linear-gradient(180deg, rgba(47, 107, 72, 0.05), var(--jt-panel-bg)) !important;
  border-color: rgba(31, 82, 56, 0.28) !important;
}

[data-theme="light"] .jt-feed-stats__value {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-feed-card {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-feed-card:hover,
[data-theme="light"] .jt-feed-card:focus-visible {
  border-color: rgba(31, 82, 56, 0.32) !important;
  box-shadow: 0 22px 42px rgba(31, 82, 56, 0.1), 0 0 0 1px rgba(47, 107, 72, 0.15) inset !important;
}

[data-theme="light"] .jt-feed-card.is-expanded {
  border-color: rgba(31, 82, 56, 0.38) !important;
  box-shadow: 0 22px 42px rgba(31, 82, 56, 0.12), 0 0 0 1px rgba(47, 107, 72, 0.22) inset !important;
}

[data-theme="light"] .jt-feed-card__thumb {
  background-color: #eef3ef !important;
  border-bottom-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-feed-card__thumb-label {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.14);
  color: #1a2521;
}

[data-theme="light"] .jt-feed__title a {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-feed__title a:hover {
  color: #1f5238 !important;
}

[data-theme="light"] .jt-feed__source {
  color: #1f5238 !important;
}

[data-theme="light"] .jt-feed-controls {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.12) !important;
}

[data-theme="light"] .jt-feed-search input[type="search"] {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.14) !important;
  color: #0f1a15 !important;
}

[data-theme="light"] .jt-feed-search input[type="search"]::placeholder {
  color: rgba(15, 26, 21, 0.5);
}

[data-theme="light"] .jt-feed-search input[type="search"]:focus {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.32) !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 72, 0.14);
}

[data-theme="light"] .jt-feed-aside__block {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-feed-tag {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.14);
  color: #26332d;
}

[data-theme="light"] .jt-feed-tag:hover,
[data-theme="light"] .jt-feed-tag:focus-visible {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.28);
  color: #1f5238;
}

[data-theme="light"] .jt-feed-tag__count {
  color: #5a6a62;
}

[data-theme="light"] .jt-feed-sources-list li {
  border-bottom-color: rgba(31, 82, 56, 0.08) !important;
}

[data-theme="light"] .jt-feed-sources-list__name {
  color: #26332d;
}

[data-theme="light"] .jt-feed-sources-list__count {
  background: rgba(31, 82, 56, 0.06);
  border-color: rgba(31, 82, 56, 0.12);
  color: #55685e;
}

[data-theme="light"] .jt-feed__pill--security {
  background: rgba(47, 107, 72, 0.1) !important;
  border-color: rgba(47, 107, 72, 0.22) !important;
  color: #1f5238 !important;
}

[data-theme="light"] .jt-feed__pill--microsoft {
  background: rgba(55, 99, 170, 0.08) !important;
  border-color: rgba(55, 99, 170, 0.22) !important;
  color: #3763aa !important;
}

[data-theme="light"] .jt-feed__pill--ai {
  background: rgba(120, 70, 190, 0.08) !important;
  border-color: rgba(120, 70, 190, 0.22) !important;
  color: #7846be !important;
}

[data-theme="light"] .jt-feed__pill--tech {
  background: rgba(31, 82, 56, 0.05) !important;
  border-color: rgba(31, 82, 56, 0.12) !important;
  color: #26332d !important;
}

[data-theme="light"] .jt-feed__pill--dutch {
  background: rgba(214, 90, 40, 0.08) !important;
  border-color: rgba(214, 90, 40, 0.24) !important;
  color: #b84a1c !important;
}

[data-theme="light"] .jt-feed__no-results {
  background: rgba(31, 82, 56, 0.03) !important;
  border-color: rgba(31, 82, 56, 0.14) !important;
  color: #55685e !important;
}

[data-theme="light"] .jt-feed__empty {
  background: rgba(31, 82, 56, 0.03) !important;
  border-color: rgba(31, 82, 56, 0.14) !important;
  color: #55685e !important;
}

[data-theme="light"] .jt-feed-ticker::before,
[data-theme="light"] .jt-feed-ticker::after {
  background: none;
}

/* ----- Certificates ----- */

[data-theme="light"] .jt-cert-card {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-cert-card--expert {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
}

[data-theme="light"] .jt-cert-card:hover {
  border-color: rgba(31, 82, 56, 0.28) !important;
  box-shadow: 0 20px 40px rgba(31, 82, 56, 0.08), 0 0 0 1px rgba(47, 107, 72, 0.14) inset !important;
}

[data-theme="light"] .jt-cert-card__badge {
  background:
    radial-gradient(circle at 30% 25%, rgba(47, 107, 72, 0.12), transparent 60%),
    var(--jt-panel-strong-bg) !important;
  border-color: rgba(31, 82, 56, 0.12);
}

[data-theme="light"] .jt-cert-card:hover .jt-cert-card__badge {
  background:
    radial-gradient(circle at 30% 25%, rgba(47, 107, 72, 0.18), transparent 60%),
    #f0f6f2 !important;
  border-color: rgba(31, 82, 56, 0.24);
}

/* Drop the green drop-shadow on the Microsoft badge SVG — the originals
   are dark-on-light and look clean against the white card as-is. */
[data-theme="light"] .jt-cert-card__badge img {
  filter: none;
}

[data-theme="light"] .jt-cert-card__code {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-cert-card--expert .jt-cert-card__tier {
  color: #1f5238 !important;
}

[data-theme="light"] .jt-cert-card--associate .jt-cert-card__tier {
  color: #3763aa !important;
}

[data-theme="light"] .jt-cert-card--fundamentals .jt-cert-card__tier {
  color: #55685e !important;
}

/* ----- Footer ----- */

[data-theme="light"] .jt-footer {
  color: var(--jt-muted) !important;
}

/* ----- Theme toggle colours in light mode ----- */

[data-theme="light"] .jt-theme-toggle {
  background: rgba(115, 230, 155, 0.10);
  border-color: rgba(115, 230, 155, 0.30);
  color: #eef7f0;
}

[data-theme="light"] .jt-theme-toggle:hover {
  background: rgba(115, 230, 155, 0.22);
  border-color: rgba(115, 230, 155, 0.50);
  color: #ffffff;
}

[data-theme="light"] .jt-theme-toggle .jt-theme-toggle__sun {
  display: none;
}

[data-theme="light"] .jt-theme-toggle .jt-theme-toggle__moon {
  display: block;
}

/* ----- Force same transition on theme flip for SVG icon colours ----- */

[data-theme="light"] .jt-brand .wp-block-site-title,
[data-theme="light"] .jt-brand .wp-block-site-title a {
  color: var(--jt-nav-text) !important;
}

[data-theme="light"] .jt-brand__tag {
  color: #a8d4b8 !important;
  opacity: 0.95;
}

/* -------------------------------------------------------------------------
 * Mobile optimisation pass
 * -------------------------------------------------------------------------
 * Brings the site up to modern mobile-web standards:
 *   - Proper touch-target sizes (≥ 44px)
 *   - No iOS auto-zoom on input focus (≥ 16px)
 *   - Single-row compact topbar with brand + hamburger + toggle
 *   - Safe-area insets for notched devices
 *   - Hover effects limited to devices that can actually hover
 *   - Consistent active tap-state feedback
 * ------------------------------------------------------------------------- */

/* ----- Safe-area insets (notched iPhones, edge-to-edge Androids) ----- */
@supports (padding: env(safe-area-inset-left)) {
  .jt-topbar__inner,
  .jt-home-shell,
  .jt-page-shell,
  .jt-footer__inner {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
}

/* ----- Prevent iOS zoom + reset tap highlight globally ----- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

input,
button,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ----- Ensure search input is >= 16px so iOS does not auto-zoom ----- */
.jt-feed-search input[type="search"] {
  font-size: 16px !important;
}

/* ----- Top-bar: one-row compact layout on mobile ----- */
@media (max-width: 860px) {
  /* Revert the old "stack vertically" behaviour: keep brand + actions side-by-side. */
  .jt-topbar__inner {
    padding: 0.85rem 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }

  .jt-brand {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem !important;
  }

  .jt-brand .wp-block-site-title {
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tagline eats space on narrow screens — hide it below 860px. */
  .jt-brand__tag {
    display: none !important;
  }

  /* Actions wrapper stays content-sized on the right with a compact gap. */
  .jt-topbar__actions {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
  }

  /* Override the older "width: 100%" rule from the existing <=860px block. */
  .jt-main-nav {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
}

/* ----- Touch-target minimums (44×44 WCAG 2.1 AAA / iOS HIG) ----- */

.jt-theme-toggle {
  /* Bump size on mobile; keep 38 on desktop via the base rule. */
}

@media (max-width: 860px) {
  .jt-theme-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .jt-theme-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Hamburger: the default ~46px square is fine, but ensure explicit size. */
  .jt-main-nav .wp-block-navigation__responsive-container-open {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.65rem !important;
  }
}

/* ----- Filter tabs and tag buttons: bigger hit area on touch ----- */
@media (max-width: 860px) {
  .jt-feed__filter {
    padding: 0.72rem 1.05rem !important;
    font-size: 0.78rem !important;
    min-height: 40px;
  }

  .jt-feed-tag {
    padding: 0.6rem 0.85rem !important;
    font-size: 0.76rem !important;
    min-height: 36px;
  }

  .jt-feed-stats__item {
    padding: 0.9rem 1rem !important;
    min-height: 72px;
  }

  .jt-feed-stats__value {
    font-size: 1.4rem !important;
  }

  .wp-block-button__link,
  .wp-element-button {
    min-height: 44px;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }
}

/* ----- Feed dashboard tightening on small screens ----- */
@media (max-width: 720px) {
  .jt-feed-dash {
    gap: 1.15rem !important;
  }

  .jt-feed-ticker {
    padding: 0.6rem 0 !important;
  }

  .jt-feed-ticker__track {
    gap: 1.75rem !important;
  }

  .jt-feed-ticker__item {
    font-size: 0.82rem !important;
  }

  .jt-feed-ticker__source,
  .jt-feed-ticker__time {
    font-size: 0.66rem !important;
  }

  /* Give "Totaal" the full row so the 2x2 + 1 layout reads cleanly. */
  .jt-feed-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jt-feed-stats__item--meta {
    grid-column: 1 / -1 !important;
    min-height: 56px;
  }

  .jt-feed-card__body {
    padding: 1rem 1.1rem 1.15rem !important;
    gap: 0.55rem !important;
  }

  .jt-feed__title {
    font-size: 1.05rem !important;
    line-height: 1.28 !important;
  }

  .jt-feed__excerpt {
    font-size: 0.9rem !important;
    -webkit-line-clamp: 3;
  }

  .jt-feed-card--featured .jt-feed__title {
    font-size: 1.18rem !important;
  }

  .jt-feed-card--featured .jt-feed__excerpt {
    -webkit-line-clamp: 3;
  }

  .jt-feed-controls {
    padding: 0.7rem 0.75rem !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 4px);
  }

  .jt-feed__filters {
    gap: 0.4rem !important;
  }

  .jt-feed-aside__block {
    padding: 1rem 1.1rem !important;
  }

  .jt-feed-search input[type="search"] {
    padding: 0.85rem 0.95rem 0.85rem 2.4rem !important;
  }

  /* Card eyebrow: shorter line on mobile, no wrap */
  .jt-feed__card-eyebrow {
    gap: 0.35rem !important;
  }

  /* No-results: slightly smaller on mobile */
  .jt-feed__no-results {
    padding: 1.1rem !important;
    font-size: 0.78rem !important;
  }
}

/* ----- Certificate cards on mobile ----- */
@media (max-width: 720px) {
  .jt-cert-card {
    padding: 1rem 1.1rem !important;
    gap: 0.85rem !important;
  }

  .jt-cert-card__name {
    font-size: 0.88rem !important;
  }
}

/* ----- Page sections breathing room on very small screens ----- */
@media (max-width: 480px) {
  .jt-page-hero,
  .jt-section,
  .jt-page-content-shell .wp-block-post-content > * {
    padding: 1.05rem !important;
    border-radius: 20px !important;
  }

  .jt-feed-dash {
    gap: 1rem !important;
  }

  /* Tighter ticker mask on very narrow screens */
  .jt-feed-ticker__track {
    animation-duration: 32s;
  }

  /* CTA buttons become full-width for easy thumb reach */
  .jt-cta-row {
    width: 100%;
  }
  .jt-cta-row .wp-block-button {
    flex: 1 1 100%;
  }
  .jt-cta-row .wp-block-button__link,
  .jt-cta-row .wp-element-button {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ----- Hover-only effects: only on devices that actually hover -----
 * Touch screens report `(hover: none)` which means hover-triggered transforms
 * would "stick" between a tap-start and the next interaction. Scope the lift
 * and glow transforms so touch devices only get the tap feedback.
 * ------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .jt-card:hover,
  .jt-card-grid > *:hover,
  .jt-feed-card:hover,
  .jt-cert-card:hover,
  .jt-feed-stats__item:hover,
  .jt-feed__filter:hover,
  .jt-feed-tag:hover,
  .jt-theme-toggle:hover,
  .wp-block-button__link:hover,
  .wp-element-button:hover {
    transform: none !important;
  }

  .jt-feed-card:hover .jt-feed-card__thumb-img {
    transform: none !important;
  }

  .jt-cert-card:hover .jt-cert-card__badge {
    transform: none !important;
  }
}

/* ----- Active (tap) state feedback for touch devices ----- */
.jt-feed__filter:active,
.jt-feed-tag:active,
.jt-feed-stats__item:active,
.jt-theme-toggle:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

.jt-feed-card:active,
.jt-cert-card:active,
.jt-card:active {
  transform: scale(0.995) !important;
  transition-duration: 0.08s !important;
}

/* ----- Small niceties: no text-selection on tappable buttons ----- */
.jt-theme-toggle,
.jt-feed__filter,
.jt-feed-tag,
.jt-feed-stats__item {
  -webkit-user-select: none;
  user-select: none;
}

/* -------------------------------------------------------------------------
 * Mobile navigation overlay redesign
 * -------------------------------------------------------------------------
 * Replaces the utilitarian WordPress default with a proper app-drawer:
 *   - Content column centered (max 420px) so text is never glued to the edge
 *   - Cards with subtle background + border, 52px min-height
 *   - Left accent bar + right chevron on hover/active
 *   - Staggered fade-in when the menu opens
 *   - Safe-area aware padding on notched devices
 *   - Styled close button in the top-right
 * The selectors have the same specificity as the earlier <=860px rules;
 * placing them at the end of the file means source order lets them win.
 * ------------------------------------------------------------------------- */

@media (max-width: 860px) {

  /* ----- Overlay container: depth + safe-area padding ----- */
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    background:
      radial-gradient(circle at 0% 0%, rgba(115, 230, 155, 0.07), transparent 42%),
      radial-gradient(circle at 100% 100%, rgba(77, 217, 127, 0.05), transparent 42%),
      rgba(8, 17, 13, 0.985) !important;
    padding: 1.5rem 1.5rem 2rem !important;
    padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
  }

  /* ----- Content wrapper: centered column, max 420px ----- */
  .jt-main-nav .wp-block-navigation__responsive-container-content {
    padding-top: 4.5rem !important;
    gap: 0.55rem !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    width: 100% !important;
  }

  .jt-main-nav .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-inline: auto !important;
  }

  /* ----- Close button: 44px pill, clearly affordance-shaped ----- */
  .jt-main-nav .wp-block-navigation__responsive-container-close {
    top: max(1.25rem, env(safe-area-inset-top)) !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(115, 230, 155, 0.2) !important;
    color: var(--jt-text) !important;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-close:hover,
  .jt-main-nav .wp-block-navigation__responsive-container-close:focus-visible {
    background: rgba(115, 230, 155, 0.14) !important;
    border-color: rgba(115, 230, 155, 0.32) !important;
    outline: none;
  }

  .jt-main-nav .wp-block-navigation__responsive-container-close svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ----- Navigation items: card-like with presence ----- */
  .jt-main-nav .wp-block-navigation-item {
    width: 100%;
  }

  .jt-main-nav .wp-block-navigation-item__content {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1.05rem 3rem 1.05rem 1.75rem !important;
    border-radius: var(--jt-radius-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
      rgba(13, 25, 19, 0.55) !important;
    color: #eef7f0 !important;
    font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    min-height: 54px;
    text-align: left !important;
    transition:
      background 0.22s ease,
      border-color 0.22s ease,
      color 0.22s ease,
      padding-left 0.22s ease,
      transform 0.22s ease;
  }

  /* Left accent bar — grows from nothing on hover/active */
  .jt-main-nav .wp-block-navigation-item__content::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--jt-accent);
    transition: height 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Right chevron indicator */
  .jt-main-nav .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid rgba(255, 255, 255, 0.32);
    border-top: 1.6px solid rgba(255, 255, 255, 0.32);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.22s ease, transform 0.22s ease, right 0.22s ease;
  }

  .jt-main-nav .wp-block-navigation-item__content:hover,
  .jt-main-nav .wp-block-navigation-item__content:focus-visible,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
    background:
      linear-gradient(180deg, rgba(115, 230, 155, 0.1), rgba(115, 230, 155, 0.04)),
      rgba(13, 25, 19, 0.75) !important;
    border-color: rgba(115, 230, 155, 0.28) !important;
    color: #ffffff !important;
    padding-left: 2rem !important;
    outline: none;
  }

  .jt-main-nav .wp-block-navigation-item__content:hover::before,
  .jt-main-nav .wp-block-navigation-item__content:focus-visible::before,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content::before,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content::before {
    height: 26px;
  }

  .jt-main-nav .wp-block-navigation-item__content:hover::after,
  .jt-main-nav .wp-block-navigation-item__content:focus-visible::after,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content::after,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
    border-color: var(--jt-accent);
    right: 1.15rem;
  }

  .jt-main-nav .wp-block-navigation-item__content:active {
    transform: scale(0.985);
    transition-duration: 0.08s;
  }

  /* ----- Staggered fade-in when the drawer opens ----- */
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    opacity: 0;
    transform: translateY(10px);
    animation: jt-nav-item-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }

  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.08s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.12s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.16s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.20s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.24s; }
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.28s; }
}

@keyframes jt-nav-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- Light mode counterparts ----- */
@media (max-width: 860px) {
  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    background:
      radial-gradient(circle at 0% 0%, rgba(47, 107, 72, 0.07), transparent 42%),
      radial-gradient(circle at 100% 100%, rgba(47, 107, 72, 0.05), transparent 42%),
      rgba(250, 251, 250, 0.985) !important;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container-close {
    background: rgba(31, 82, 56, 0.05) !important;
    border-color: rgba(31, 82, 56, 0.2) !important;
    color: #0a1613 !important;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container-close:hover,
  [data-theme="light"] .jt-main-nav .wp-block-navigation__responsive-container-close:focus-visible {
    background: rgba(47, 107, 72, 0.12) !important;
    border-color: rgba(31, 82, 56, 0.32) !important;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content {
    background:
      linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)),
      var(--jt-panel-bg) !important;
    border-color: rgba(31, 82, 56, 0.1) !important;
    color: #0f1a15 !important;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content::before {
    background: #1f5238;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content::after {
    border-color: rgba(31, 82, 56, 0.3);
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content:hover,
  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content:focus-visible,
  [data-theme="light"] .jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
  [data-theme="light"] .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
    background:
      linear-gradient(180deg, rgba(47, 107, 72, 0.08), rgba(47, 107, 72, 0.03)),
      var(--jt-panel-bg) !important;
    border-color: rgba(31, 82, 56, 0.28) !important;
    color: #0a1613 !important;
  }

  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content:hover::after,
  [data-theme="light"] .jt-main-nav .wp-block-navigation-item__content:focus-visible::after,
  [data-theme="light"] .jt-main-nav .current-menu-item > .wp-block-navigation-item__content::after,
  [data-theme="light"] .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
    border-color: #1f5238;
  }
}

/* -------------------------------------------------------------------------
 * Mobile navigation overlay — compact overrides
 * -------------------------------------------------------------------------
 * The earlier redesign was too generous for narrow phones (the Galaxy S24+
 * has a ~412px CSS viewport and items were overflowing). These rules trim
 * padding, font-size and max-width so the drawer fits comfortably while
 * keeping the card-with-accent-bar-and-chevron visual language.
 * ------------------------------------------------------------------------- */

@media (max-width: 860px) {

  /* Belt-and-suspenders: every element inside the drawer respects its
     own width, so horizontal overflow can't sneak in. */
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open,
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open * {
    box-sizing: border-box;
  }

  /* Tighter container padding: 1rem instead of 1.5rem. */
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 1rem !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  /* Drop the max-width column — just fill the container. */
  .jt-main-nav .wp-block-navigation__responsive-container-content {
    padding-top: 3.75rem !important;
    gap: 0.45rem !important;
    max-width: none !important;
    width: 100% !important;
  }

  .jt-main-nav .wp-block-navigation__container {
    max-width: none !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  /* Compact item: smaller font, tighter padding, smaller min-height. */
  .jt-main-nav .wp-block-navigation-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  .jt-main-nav .wp-block-navigation-item__content {
    padding: 0.85rem 2.1rem 0.85rem 1.3rem !important;
    border-radius: 16px !important;
    font-size: 0.98rem !important;
    min-height: 48px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  /* Labels: never force overflow. */
  .jt-main-nav .wp-block-navigation-item__label {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Smaller accent bar, closer to the edge. */
  .jt-main-nav .wp-block-navigation-item__content::before {
    left: 0.55rem !important;
  }

  /* Smaller, closer chevron. */
  .jt-main-nav .wp-block-navigation-item__content::after {
    right: 1rem !important;
    width: 8px !important;
    height: 8px !important;
  }

  /* Less aggressive padding-shift on hover/active. */
  .jt-main-nav .wp-block-navigation-item__content:hover,
  .jt-main-nav .wp-block-navigation-item__content:focus-visible,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content {
    padding-left: 1.5rem !important;
  }

  .jt-main-nav .wp-block-navigation-item__content:hover::after,
  .jt-main-nav .wp-block-navigation-item__content:focus-visible::after,
  .jt-main-nav .current-menu-item > .wp-block-navigation-item__content::after,
  .jt-main-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
    right: 0.8rem !important;
  }

  /* Close button: move up to free vertical room, keep 44×44. */
  .jt-main-nav .wp-block-navigation__responsive-container-close {
    top: max(0.9rem, env(safe-area-inset-top)) !important;
    right: max(0.9rem, env(safe-area-inset-right)) !important;
  }

  /* Slightly smaller translateY on the stagger entrance. */
  .jt-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    transform: translateY(6px);
  }
}

/* -------------------------------------------------------------------------
 * JT Tools Dashboard
 * -------------------------------------------------------------------------
 * Matches the theme's existing jt-* tokens: dark card gradients, subtle
 * borders, monospace uppercase labels, accent-green hover states.
 * ------------------------------------------------------------------------- */

/* ----- PIN gate ----- */
.jt-tools-gate {
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem) 0;
}

.jt-tools-gate__card {
  width: 100%;
  max-width: 440px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--jt-radius);
  border: 1px solid var(--jt-border-strong);
  background:
    radial-gradient(circle at 30% 0%, rgba(115, 230, 155, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(16, 29, 22, 0.9), rgba(9, 18, 13, 0.82));
  box-shadow: var(--jt-shadow);
  text-align: center;
}

.jt-tools-gate__card .jt-eyebrow {
  display: block;
  margin: 0 0 0.5rem;
}

.jt-tools-gate__title {
  margin: 0 0 0.6rem !important;
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
}

.jt-tools-gate__lead {
  margin: 0 0 1.75rem !important;
  color: var(--jt-muted) !important;
  font-size: 0.95rem !important;
}

.jt-tools-gate__digits {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.jt-tools-gate__digit {
  width: 48px;
  height: 56px;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--jt-border) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--jt-text) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  caret-color: var(--jt-accent);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.jt-tools-gate__digit:focus {
  outline: none;
  border-color: rgba(115, 230, 155, 0.5) !important;
  background: rgba(115, 230, 155, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(115, 230, 155, 0.15);
  transform: translateY(-1px);
}

.jt-tools-gate__error {
  margin: 0 0 0.75rem !important;
  min-height: 1.2em;
  color: #ff8a9c !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.jt-tools-gate__error.is-visible {
  opacity: 1;
}

.jt-tools-gate__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #73e69b, #4dd97f);
  color: #07110d;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(77, 217, 127, 0.16);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.jt-tools-gate__submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #86edaa, #5fe08c);
}

.jt-tools-gate__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Unlock + Change-PIN action row (submit button + ghost link). */
.jt-tools-gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

/* Ghost "link" button (Change PIN, Terug, Annuleren). */
.jt-tools-gate__link {
  background: transparent;
  border: 0;
  padding: 0.4rem 0.85rem;
  color: var(--jt-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.jt-tools-gate__link:hover,
.jt-tools-gate__link:focus-visible {
  outline: none;
  color: var(--jt-text);
  background: rgba(115, 230, 155, 0.08);
  transform: translateY(-1px);
}

/* Change-PIN form — three labelled digit groups stacked vertically. */
.jt-tools-gate__form--change {
  text-align: left;
}

.jt-tools-gate__form--change .jt-tools-gate__lead {
  text-align: center;
  margin-bottom: 1.25rem !important;
}

.jt-tools-gate__group {
  margin-bottom: 1.1rem;
}

.jt-tools-gate__group:last-of-type {
  margin-bottom: 0.65rem;
}

.jt-tools-gate__group-label {
  margin: 0 0 0.45rem !important;
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.jt-tools-gate__form--change .jt-tools-gate__digits {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Success message — mirrors __error but in accent-green. */
.jt-tools-gate__success {
  margin: 0 0 0.75rem !important;
  min-height: 1.2em;
  color: #73e69b !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.jt-tools-gate__success.is-visible {
  opacity: 1;
}

/* ----- Dashboard ----- */
.jt-tools-dash {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.jt-tools-dash__header {
  padding: 0 0.15rem;
}

.jt-tools-dash__header .jt-eyebrow {
  margin: 0 !important;
}

.jt-tools-dash__title {
  margin: 0.35rem 0 0.5rem !important;
}

.jt-tools-dash__lead {
  margin: 0 !important;
  color: var(--jt-muted) !important;
  max-width: 42rem;
}

/* ============================================================
 *  Launcher — panel wrapper used for both the Apps grid and the
 *  Tools grid. Each launcher is a section with its own header +
 *  responsive grid of tiles.
 * ============================================================ */

.jt-launcher {
  padding: clamp(1.35rem, 2.4vw, 2.1rem);
  border-radius: var(--jt-radius);
  border: 1px solid var(--jt-border);
  background:
    radial-gradient(circle at 0% 0%, rgba(115, 230, 155, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(16, 29, 22, 0.88), rgba(11, 20, 15, 0.78));
  box-shadow: var(--jt-shadow);
}

.jt-launcher + .jt-launcher {
  margin-top: 0;
}

.jt-launcher__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.2rem;
}

.jt-launcher__header .jt-eyebrow {
  margin: 0 !important;
}

.jt-launcher__title {
  margin: 0 !important;
  font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
  color: #f4fbf5 !important;
}

.jt-launcher__lead {
  margin: 0 !important;
  color: var(--jt-muted) !important;
  font-size: 0.95rem !important;
  max-width: 44rem;
}

.jt-launcher__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
}

/* Tools grid is slightly more generous on column width so each tile has
 * room for its slightly longer descriptor row. */
.jt-launcher__grid--tools {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.9rem;
}

@media (max-width: 640px) {
  .jt-launcher__grid,
  .jt-launcher__grid--tools {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 *  .jt-tile — shared tile styling used by both .jt-tile--app
 *  anchors in the apps grid AND by .jt-tool articles in their
 *  closed state (via .jt-tool__head grid inheritance).
 * ============================================================ */

.jt-tile {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas: "icon body arrow";
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--jt-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(9, 18, 13, 0.7);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.jt-tile:hover,
.jt-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--jt-border-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  outline: none;
}

.jt-tile__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(115, 230, 155, 0.08);
  border: 1px solid var(--jt-border);
  color: var(--jt-accent);
  transition: background 0.22s ease, border-color 0.22s ease;
}

.jt-tile__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0; /* allow text-overflow ellipsis */
}

.jt-tile__name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--jt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt-tile__desc {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt-tile__arrow {
  grid-area: arrow;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jt-muted);
  transition: color 0.22s ease, transform 0.22s ease;
}

.jt-tile--app:hover .jt-tile__arrow {
  color: var(--jt-accent);
  transform: translate(2px, -2px);
}

/* ============================================================
 *  Per-brand tinting for app tile icons. The icon box + glyph
 *  take on the brand's primary color while the rest of the tile
 *  keeps the standard theme surface.
 * ============================================================ */

.jt-tile[data-jt-brand="plex"]      .jt-tile__icon { background: rgba(229, 160,  13, 0.12); border-color: rgba(229, 160,  13, 0.32); color: #ffbc3a; }
.jt-tile[data-jt-brand="ha"]        .jt-tile__icon { background: rgba( 24, 188, 242, 0.12); border-color: rgba( 24, 188, 242, 0.32); color: #5ad0f5; }
.jt-tile[data-jt-brand="jellyfin"]  .jt-tile__icon { background: rgba(170,  92, 195, 0.12); border-color: rgba(170,  92, 195, 0.32); color: #c785dc; }
.jt-tile[data-jt-brand="jellyseerr"] .jt-tile__icon { background: rgba( 99, 102, 241, 0.14); border-color: rgba( 99, 102, 241, 0.36); color: #a5a8f8; }
.jt-tile[data-jt-brand="proxmox"]   .jt-tile__icon { background: rgba(229, 112,   0, 0.12); border-color: rgba(229, 112,   0, 0.32); color: #ff932a; }
.jt-tile[data-jt-brand="portainer"] .jt-tile__icon { background: rgba( 19, 190, 249, 0.12); border-color: rgba( 19, 190, 249, 0.32); color: #5ad0f9; }
.jt-tile[data-jt-brand="grafana"]   .jt-tile__icon { background: rgba(244, 104,   0, 0.12); border-color: rgba(244, 104,   0, 0.32); color: #ff8e3d; }
.jt-tile[data-jt-brand="nextcloud"] .jt-tile__icon { background: rgba(  0, 130, 201, 0.12); border-color: rgba(  0, 130, 201, 0.32); color: #56b4e9; }
.jt-tile[data-jt-brand="sonarr"]    .jt-tile__icon { background: rgba( 53, 198, 244, 0.12); border-color: rgba( 53, 198, 244, 0.32); color: #6cd7f6; }
.jt-tile[data-jt-brand="radarr"]    .jt-tile__icon { background: rgba(255, 193,   0, 0.12); border-color: rgba(255, 193,   0, 0.32); color: #ffd04d; }
.jt-tile[data-jt-brand="adguard"]   .jt-tile__icon { background: rgba( 86, 188,  78, 0.12); border-color: rgba( 86, 188,  78, 0.32); color: #83d978; }

/* ----- Tool accordion card (grid-tile variant) ----- */
.jt-tool {
  display: flex;
  flex-direction: column;
  border-radius: var(--jt-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(9, 18, 13, 0.7) !important;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, grid-column 0.22s ease;
}

/* Hover lift matches the .jt-tile pattern, so apps and closed tools share
 * the same interaction language. Disabled once the tool is expanded so the
 * open card sits flat and doesn't jump under the cursor. */
.jt-tool:not(.is-open):hover {
  transform: translateY(-3px);
  border-color: var(--jt-border-strong) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.jt-tool.is-open {
  border-color: rgba(115, 230, 155, 0.28) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(115, 230, 155, 0.15) inset;
}

/* When a tool is open inside the grid, break it out to full row width so
 * its body has room for forms, textareas, dropzones, etc. Requires the
 * parent grid to use `auto-fill` (explicit grid lines) so `1 / -1` resolves. */
.jt-launcher__grid--tools .jt-tool.is-open {
  grid-column: 1 / -1;
}

.jt-tool__head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "icon title chevron" "icon desc chevron";
  align-items: center;
  width: 100%;
  padding: 1rem 1.2rem;
  gap: 0.2rem 0.9rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.22s ease;
}

.jt-tool__head:hover {
  background: rgba(115, 230, 155, 0.05);
}

.jt-tool__head:focus-visible {
  outline: 2px solid var(--jt-accent);
  outline-offset: -4px;
}

.jt-tool__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(115, 230, 155, 0.08);
  border: 1px solid var(--jt-border);
  color: var(--jt-accent);
}

.jt-tool__title {
  grid-area: title;
  font-size: 1.02rem;
  font-weight: 600;
  color: #f4fbf5;
}

.jt-tool__desc {
  grid-area: desc;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-muted);
}

.jt-tool__chevron {
  grid-area: chevron;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
  margin-right: 0.5rem;
  transition: transform 0.3s ease, border-color 0.22s ease;
}

.jt-tool.is-open .jt-tool__chevron {
  transform: rotate(-135deg);
  border-color: var(--jt-accent);
}

/* Collapse animation via grid-template-rows 0fr → 1fr. The body uses an
 * inner wrapper (div.jt-tool__body-inner) that holds the actual content,
 * so the grid row can collapse without mangling child layout. */
.jt-tool__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jt-tool__body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.2rem;
}

.jt-tool.is-open .jt-tool__body {
  grid-template-rows: 1fr;
}

.jt-tool.is-open .jt-tool__body-inner {
  padding: 0.15rem 1.2rem 1.2rem;
}

.jt-tool__body-inner > * + * {
  margin-top: 0.75rem;
}

/* ----- Form controls shared by all tools ----- */
.jt-tool__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.jt-tool__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 140px;
  min-width: 0;
}

.jt-tool__label--full {
  flex: 1 1 100%;
}

.jt-tool__label > span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jt-muted);
}

.jt-tool__input,
.jt-tool__select,
.jt-tool__textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--jt-text);
  font-family: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box;
}

.jt-tool__textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

.jt-tool__textarea--mono,
.jt-tool__input--mono {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.88rem !important;
}

.jt-tool__input:focus,
.jt-tool__select:focus,
.jt-tool__textarea:focus {
  outline: none;
  border-color: rgba(115, 230, 155, 0.35);
  background: rgba(115, 230, 155, 0.05);
  box-shadow: 0 0 0 3px rgba(115, 230, 155, 0.12);
}

.jt-tool__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239fb4a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

.jt-tool__color {
  width: 56px;
  height: 44px;
  padding: 0.25rem;
  border-radius: 12px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.jt-tool__range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(115, 230, 155, 0.15);
  border-radius: 999px;
  outline: none;
}

.jt-tool__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jt-accent);
  border: 2px solid #08110d;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(115, 230, 155, 0.2);
}

.jt-tool__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jt-accent);
  border: 2px solid #08110d;
  cursor: pointer;
}

.jt-tool__button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #73e69b, #4dd97f);
  color: #07110d;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
  white-space: nowrap;
  min-height: 42px;
}

.jt-tool__button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #86edaa, #5fe08c);
  box-shadow: 0 12px 24px rgba(77, 217, 127, 0.16);
}

.jt-tool__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.jt-tool__button.is-outline {
  background: transparent;
  color: #eef7f0;
  border: 1px solid var(--jt-border-strong);
  box-shadow: none;
}

.jt-tool__button.is-outline:hover:not(:disabled) {
  background: rgba(115, 230, 155, 0.08);
  color: #f4fbf5;
}

.jt-tool__button.is-copied {
  background: linear-gradient(135deg, #ffffff, #dcf3e3) !important;
}

.jt-tool__check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.jt-tool__check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.04);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-muted);
  cursor: pointer;
  user-select: none;
}

.jt-tool__check input {
  accent-color: var(--jt-accent);
}

.jt-tool__check:has(input:checked) {
  border-color: rgba(115, 230, 155, 0.3);
  background: rgba(115, 230, 155, 0.1);
  color: #f4fbf5;
}

.jt-tool__error {
  margin: 0 !important;
  color: #ff8a9c !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  min-height: 1em;
  display: none;
}

.jt-tool__error.is-visible {
  display: block;
}

.jt-tool__status {
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--jt-muted) !important;
  min-height: 1em;
}

.jt-tool__status.is-ok    { color: var(--jt-accent) !important; }
.jt-tool__status.is-error { color: #ff8a9c !important; }
.jt-tool__status.is-busy  { color: #a7dbff !important; }

.jt-tool__strength {
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.jt-tool__strength--weak    { color: #ff8a9c !important; }
.jt-tool__strength--ok      { color: #ffd27d !important; }
.jt-tool__strength--strong  { color: var(--jt-accent) !important; }
.jt-tool__strength--vstrong { color: #a8f4c1 !important; }

/* ----- Dropzone ----- */
.jt-tool__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  border-radius: var(--jt-radius-sm);
  border: 2px dashed var(--jt-border-strong);
  background: rgba(115, 230, 155, 0.02);
  cursor: pointer;
  text-align: center;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.jt-tool__dropzone:hover,
.jt-tool__dropzone.is-dragging {
  background: rgba(115, 230, 155, 0.08);
  border-color: rgba(115, 230, 155, 0.4);
}

.jt-tool__dropzone-title {
  margin: 0 !important;
  font-weight: 500;
}

.jt-tool__dropzone-hint {
  margin: 0.35rem 0 0 !important;
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.jt-tool__file-info {
  display: none;
  margin: 0 !important;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: rgba(115, 230, 155, 0.06);
  border: 1px solid rgba(115, 230, 155, 0.2);
  color: var(--jt-accent) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem !important;
}

.jt-tool__file-info.is-visible {
  display: block;
}

.jt-tool__file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px dashed var(--jt-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--jt-muted);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.jt-tool__file-chip:hover {
  background: rgba(115, 230, 155, 0.06);
  color: var(--jt-accent);
  border-color: rgba(115, 230, 155, 0.32);
}

/* ----- QR preview ----- */
.jt-tool__qr-preview {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-radius: var(--jt-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--jt-border);
}

.jt-tool__qr-preview canvas {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* ----- Hash rows ----- */
.jt-tool__hash-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0.55rem;
  align-items: center;
}

.jt-tool__hash-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jt-muted);
}

/* ----- Toast ----- */
.jt-tools-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(115, 230, 155, 0.28);
  background: rgba(13, 25, 19, 0.95);
  color: var(--jt-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  pointer-events: none;
}

.jt-tools-toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.jt-tools-toast.is-error {
  border-color: rgba(255, 138, 156, 0.4);
  color: #ff8a9c;
}

/* ----- Mobile ----- */
@media (max-width: 720px) {
  .jt-tool__head {
    grid-template-columns: 38px 1fr auto;
    padding: 0.9rem 1rem;
  }
  .jt-tool__icon {
    width: 36px;
    height: 36px;
  }
  .jt-tool__body-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .jt-tool.is-open .jt-tool__body-inner {
    padding-bottom: 1rem;
  }
  .jt-tools-gate__digit {
    width: 40px;
    height: 52px;
    font-size: 1.35rem !important;
  }
  .jt-tools-gate__digits {
    gap: 0.4rem;
  }
  /* On narrow screens, shrink the change-form digits a hair further so three
   * rows of six still fit comfortably inside the card. */
  .jt-tools-gate__form--change .jt-tools-gate__digit {
    width: 38px;
    height: 48px;
    font-size: 1.2rem !important;
  }
  .jt-tools-gate__form--change .jt-tools-gate__digits {
    gap: 0.35rem;
  }
  .jt-tools-gate__group {
    margin-bottom: 0.9rem;
  }
  .jt-tool__hash-row {
    grid-template-columns: 70px 1fr auto;
  }
}

/* ----- Light mode ----- */
[data-theme="light"] .jt-tools-gate__card {
  background:
    radial-gradient(circle at 30% 0%, rgba(47, 107, 72, 0.08), transparent 55%),
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.2) !important;
  box-shadow: 0 20px 60px rgba(31, 82, 56, 0.08) !important;
}

[data-theme="light"] .jt-tools-gate__digit {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.14) !important;
  color: #0f1a15 !important;
}

[data-theme="light"] .jt-tools-gate__digit:focus {
  background: rgba(47, 107, 72, 0.06) !important;
  border-color: rgba(31, 82, 56, 0.32) !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 72, 0.14);
}

[data-theme="light"] .jt-tools-gate__submit {
  background: linear-gradient(135deg, #2f6b48, #1f5238);
  color: #fbfcfb;
  box-shadow: 0 12px 28px rgba(31, 82, 56, 0.14);
}

[data-theme="light"] .jt-tools-gate__submit:hover {
  background: linear-gradient(135deg, #3a7c54, #265e3f);
}

[data-theme="light"] .jt-tools-gate__group-label {
  color: rgba(31, 82, 56, 0.72) !important;
}

[data-theme="light"] .jt-tools-gate__link {
  color: rgba(31, 82, 56, 0.72);
}

[data-theme="light"] .jt-tools-gate__link:hover,
[data-theme="light"] .jt-tools-gate__link:focus-visible {
  color: #0f1a15;
  background: rgba(47, 107, 72, 0.08);
}

[data-theme="light"] .jt-tools-gate__success {
  color: #2f6b48 !important;
}

/* Launcher panel — white gradient + subtle green-tinted border, mirrors
 * the .jt-section light-mode surface so Quick access / Mini tools blend
 * in with the rest of the page. */
[data-theme="light"] .jt-launcher {
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 107, 72, 0.05), transparent 32%),
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
  box-shadow: 0 20px 50px rgba(31, 82, 56, 0.07) !important;
}

[data-theme="light"] .jt-launcher__title {
  color: #0f1a15 !important;
}

[data-theme="light"] .jt-launcher__lead {
  color: rgba(31, 82, 56, 0.72) !important;
}

/* Base tile (app anchors + closed tool cards share these rules). */
[data-theme="light"] .jt-tile {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

[data-theme="light"] .jt-tile:hover,
[data-theme="light"] .jt-tile:focus-visible {
  border-color: rgba(31, 82, 56, 0.28) !important;
  box-shadow: 0 14px 32px rgba(31, 82, 56, 0.08) !important;
}

[data-theme="light"] .jt-tile__icon {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.16);
  color: #1f5238;
}

[data-theme="light"] .jt-tile__name {
  color: #0a1613;
}

[data-theme="light"] .jt-tile__desc {
  color: rgba(31, 82, 56, 0.62);
}

[data-theme="light"] .jt-tile__arrow {
  color: rgba(31, 82, 56, 0.55);
}

[data-theme="light"] .jt-tile--app:hover .jt-tile__arrow {
  color: #1f5238;
}

/* Brand-tinted app icons — light mode versions use darker, more saturated
 * colors than their dark-mode counterparts so they stay legible on white
 * surfaces (the pastel neons of dark mode wash out on light backgrounds). */
[data-theme="light"] .jt-tile[data-jt-brand="plex"]      .jt-tile__icon { background: rgba(229, 160,  13, 0.12); border-color: rgba(229, 160,  13, 0.42); color: #a06500; }
[data-theme="light"] .jt-tile[data-jt-brand="ha"]        .jt-tile__icon { background: rgba( 24, 188, 242, 0.1);  border-color: rgba( 24, 118, 190, 0.40); color: #155f9c; }
[data-theme="light"] .jt-tile[data-jt-brand="jellyfin"]  .jt-tile__icon { background: rgba(170,  92, 195, 0.1);  border-color: rgba(140,  70, 170, 0.40); color: #6b2e94; }
[data-theme="light"] .jt-tile[data-jt-brand="jellyseerr"] .jt-tile__icon { background: rgba( 99, 102, 241, 0.1);  border-color: rgba( 79,  70, 229, 0.42); color: #4338ca; }
[data-theme="light"] .jt-tile[data-jt-brand="proxmox"]   .jt-tile__icon { background: rgba(229, 112,   0, 0.1);  border-color: rgba(200,  90,   0, 0.40); color: #9d4200; }
[data-theme="light"] .jt-tile[data-jt-brand="portainer"] .jt-tile__icon { background: rgba( 19, 190, 249, 0.1);  border-color: rgba( 15, 150, 210, 0.40); color: #0a6f95; }
[data-theme="light"] .jt-tile[data-jt-brand="grafana"]   .jt-tile__icon { background: rgba(244, 104,   0, 0.1);  border-color: rgba(210,  85,   0, 0.40); color: #a03e00; }
[data-theme="light"] .jt-tile[data-jt-brand="nextcloud"] .jt-tile__icon { background: rgba(  0, 130, 201, 0.1);  border-color: rgba(  0, 110, 180, 0.40); color: #006397; }
[data-theme="light"] .jt-tile[data-jt-brand="sonarr"]    .jt-tile__icon { background: rgba( 53, 198, 244, 0.1);  border-color: rgba( 30, 140, 195, 0.40); color: #0f6e99; }
[data-theme="light"] .jt-tile[data-jt-brand="radarr"]    .jt-tile__icon { background: rgba(255, 193,   0, 0.14); border-color: rgba(200, 150,   0, 0.42); color: #8a6500; }
[data-theme="light"] .jt-tile[data-jt-brand="adguard"]   .jt-tile__icon { background: rgba( 34, 139,  34, 0.1);  border-color: rgba( 34, 139,  34, 0.40); color: #1f5c1f; }

[data-theme="light"] .jt-tool {
  background:
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg)),
    var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.1) !important;
}

/* The hover-lift shadow I added on .jt-tool uses pure-black alpha which
 * looks ugly on a white surface — reclassify to the muted-green shadow. */
[data-theme="light"] .jt-tool:not(.is-open):hover {
  border-color: rgba(31, 82, 56, 0.28) !important;
  box-shadow: 0 14px 32px rgba(31, 82, 56, 0.08) !important;
}

[data-theme="light"] .jt-tool.is-open {
  border-color: rgba(31, 82, 56, 0.28) !important;
  box-shadow: 0 20px 48px rgba(31, 82, 56, 0.08), 0 0 0 1px rgba(47, 107, 72, 0.14) inset;
}

[data-theme="light"] .jt-tool__head:hover {
  background: rgba(47, 107, 72, 0.05);
}

[data-theme="light"] .jt-tool__icon {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.14);
  color: #1f5238;
}

[data-theme="light"] .jt-tool__title {
  color: #0a1613;
}

[data-theme="light"] .jt-tool__chevron {
  border-color: rgba(31, 82, 56, 0.4);
}

[data-theme="light"] .jt-tool.is-open .jt-tool__chevron {
  border-color: #1f5238;
}

[data-theme="light"] .jt-tool__input,
[data-theme="light"] .jt-tool__select,
[data-theme="light"] .jt-tool__textarea {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.14) !important;
  color: #0f1a15 !important;
}

[data-theme="light"] .jt-tool__input:focus,
[data-theme="light"] .jt-tool__select:focus,
[data-theme="light"] .jt-tool__textarea:focus {
  background: var(--jt-panel-bg) !important;
  border-color: rgba(31, 82, 56, 0.32) !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 72, 0.14);
}

[data-theme="light"] .jt-tool__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2355685e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
}

[data-theme="light"] .jt-tool__button {
  background: linear-gradient(135deg, #2f6b48, #1f5238);
  color: #fbfcfb;
}

[data-theme="light"] .jt-tool__button:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a7c54, #265e3f);
}

[data-theme="light"] .jt-tool__button.is-outline {
  background: transparent;
  color: #1f5238;
  border-color: rgba(31, 82, 56, 0.3);
}

[data-theme="light"] .jt-tool__button.is-outline:hover:not(:disabled) {
  background: rgba(31, 82, 56, 0.06);
  color: #0a1613;
}

[data-theme="light"] .jt-tool__check {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.14);
  color: #55685e;
}

[data-theme="light"] .jt-tool__check:has(input:checked) {
  background: rgba(47, 107, 72, 0.1);
  border-color: rgba(31, 82, 56, 0.28);
  color: #0a1613;
}

[data-theme="light"] .jt-tool__dropzone {
  background: rgba(47, 107, 72, 0.03);
  border-color: rgba(31, 82, 56, 0.24);
}

[data-theme="light"] .jt-tool__dropzone:hover,
[data-theme="light"] .jt-tool__dropzone.is-dragging {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.38);
}

[data-theme="light"] .jt-tool__dropzone-hint {
  color: #55685e !important;
}

[data-theme="light"] .jt-tool__file-info {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.24);
  color: #1f5238 !important;
}

[data-theme="light"] .jt-tool__qr-preview {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.12);
}

[data-theme="light"] .jt-tool__range::-webkit-slider-thumb {
  background: #1f5238;
  border-color: var(--jt-panel-bg);
}

[data-theme="light"] .jt-tools-toast {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.2);
  color: #0f1a15;
}

/* ----- IP Checker result display ----- */
.jt-tool__ip-result {
  text-align: center;
  padding: 1.2rem 0 0.5rem;
}

.jt-tool__ip-label {
  margin: 0 0 0.35rem !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--jt-muted) !important;
}

.jt-tool__ip-value {
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 600 !important;
  color: var(--jt-accent) !important;
  letter-spacing: 0.02em;
  word-break: break-all;
  transition: color 0.22s ease;
}

.jt-tool__ip-value.is-loaded {
  color: var(--jt-text) !important;
}

.jt-tool__ip-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.jt-tool__ip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.jt-tool__ip-row-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jt-muted);
  flex-shrink: 0;
}

.jt-tool__ip-row-value {
  font-size: 0.88rem;
  color: var(--jt-text);
  text-align: right;
  word-break: break-word;
}

[data-theme="light"] .jt-tool__ip-row {
  background: rgba(31, 82, 56, 0.03);
  border-color: rgba(31, 82, 56, 0.08);
}

[data-theme="light"] .jt-tool__ip-value {
  color: #1f5238 !important;
}

[data-theme="light"] .jt-tool__ip-value.is-loaded {
  color: #0f1a15 !important;
}

/* =========================================================================
 * JT Tools Dashboard — in-page app editor
 * Edit button lives in the dashboard header (authed only) and opens a full
 * modal for managing public/private app tiles. All styling lives here.
 * ========================================================================= */

/* ----- Dashboard header row (left = text, right = edit button) ----- */
.jt-tools-dash__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0 0.15rem;
}

.jt-tools-dash__header-text {
  flex: 1 1 22rem;
  min-width: 0;
}

/* ----- Edit button ----- */
.jt-edit-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--jt-border-strong);
  background: rgba(115, 230, 155, 0.08);
  color: var(--jt-accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.jt-edit-button:hover,
.jt-edit-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: rgba(115, 230, 155, 0.14);
  color: #a8f4c1;
}

.jt-edit-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .jt-edit-button {
  background: rgba(47, 107, 72, 0.06);
  border-color: rgba(31, 82, 56, 0.32);
  color: #1f5238;
}

[data-theme="light"] .jt-edit-button:hover,
[data-theme="light"] .jt-edit-button:focus-visible {
  background: rgba(47, 107, 72, 0.12);
  color: #0f1a15;
}

/* ----- Modal overlay ----- */
.jt-editor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.jt-editor.is-open {
  opacity: 1;
  pointer-events: auto;
}

.jt-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 7, 0.72);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

[data-theme="light"] .jt-editor__backdrop {
  background: rgba(14, 28, 20, 0.45);
}

.jt-editor__card {
  position: relative;
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--jt-radius);
  border: 1px solid var(--jt-border-strong);
  background:
    radial-gradient(circle at 0% 0%, rgba(115, 230, 155, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(16, 29, 22, 0.97), rgba(9, 18, 13, 0.95));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.22s ease;
  overflow: hidden;
}

.jt-editor.is-open .jt-editor__card {
  transform: scale(1) translateY(0);
}

[data-theme="light"] .jt-editor__card {
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 107, 72, 0.06), transparent 35%),
    linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg));
  border-color: rgba(31, 82, 56, 0.22);
  box-shadow: 0 40px 100px rgba(31, 82, 56, 0.18);
}

/* ----- Modal header ----- */
.jt-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1rem;
  border-bottom: 1px solid var(--jt-border);
}

.jt-editor__title {
  margin: 0.3rem 0 0 !important;
  font-size: 1.45rem !important;
  color: #f4fbf5 !important;
}

[data-theme="light"] .jt-editor__title {
  color: #0f1a15 !important;
}

.jt-editor__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--jt-muted);
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.jt-editor__close:hover {
  color: #ff8a9c;
  background: rgba(255, 138, 156, 0.08);
  border-color: rgba(255, 138, 156, 0.28);
}

[data-theme="light"] .jt-editor__close {
  background: rgba(31, 82, 56, 0.05);
  border-color: rgba(31, 82, 56, 0.14);
  color: rgba(31, 82, 56, 0.7);
}

[data-theme="light"] .jt-editor__close:hover {
  color: #c2283a;
  background: rgba(194, 40, 58, 0.08);
  border-color: rgba(194, 40, 58, 0.28);
}

/* ----- Modal tabs ----- */
.jt-editor__tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.9rem 1.5rem 0;
}

.jt-editor__tab {
  padding: 0.55rem 1rem;
  border: 1px solid var(--jt-border);
  border-radius: 999px;
  background: transparent;
  color: var(--jt-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.jt-editor__tab:hover {
  color: var(--jt-text);
  border-color: var(--jt-border-strong);
}

.jt-editor__tab.is-active {
  background: rgba(115, 230, 155, 0.12);
  border-color: rgba(115, 230, 155, 0.38);
  color: var(--jt-accent);
}

[data-theme="light"] .jt-editor__tab.is-active {
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(47, 107, 72, 0.4);
  color: #1f5238;
}

/* ----- Modal body (scrollable) ----- */
.jt-editor__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.jt-editor__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ----- Editor row (collapsed + expanded) ----- */
.jt-editor-row {
  border-radius: var(--jt-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(9, 18, 13, 0.55);
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-editor-row.is-expanded {
  border-color: rgba(115, 230, 155, 0.32);
  box-shadow: 0 0 0 1px rgba(115, 230, 155, 0.12) inset;
}

[data-theme="light"] .jt-editor-row {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg));
  border-color: rgba(31, 82, 56, 0.12);
}

[data-theme="light"] .jt-editor-row.is-expanded {
  border-color: rgba(31, 82, 56, 0.32);
  box-shadow: 0 0 0 1px rgba(47, 107, 72, 0.14) inset;
}

.jt-editor-row__summary {
  display: grid;
  grid-template-columns: 42px 1fr 14px;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.jt-editor-row__summary:hover {
  background: rgba(115, 230, 155, 0.04);
}

[data-theme="light"] .jt-editor-row__summary:hover {
  background: rgba(47, 107, 72, 0.04);
}

.jt-editor-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--jt-swatch, #73e69b) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--jt-swatch, #73e69b) 40%, transparent);
  color: var(--jt-swatch, var(--jt-accent));
}

.jt-editor-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.jt-editor-row__name {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--jt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt-editor-row__url {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--jt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt-editor-row__chevron {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.22s ease;
}

.jt-editor-row.is-expanded .jt-editor-row__chevron {
  transform: rotate(-135deg);
  border-color: var(--jt-accent);
}

[data-theme="light"] .jt-editor-row__chevron {
  border-color: rgba(31, 82, 56, 0.4);
}

[data-theme="light"] .jt-editor-row.is-expanded .jt-editor-row__chevron {
  border-color: #1f5238;
}

/* Expanded form body */
.jt-editor-row__form {
  display: none;
  padding: 0 1rem 1.1rem;
  flex-direction: column;
  gap: 0.85rem;
}

.jt-editor-row.is-expanded .jt-editor-row__form {
  display: flex;
}

.jt-editor-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.jt-editor-field > span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jt-muted);
}

.jt-editor-field > input[type="text"],
.jt-editor-field > input[type="url"] {
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--jt-text);
  font: inherit;
  font-size: 0.92rem;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-editor-field > input:focus {
  outline: none;
  background: rgba(115, 230, 155, 0.06);
  border-color: rgba(115, 230, 155, 0.5);
  box-shadow: 0 0 0 3px rgba(115, 230, 155, 0.15);
}

[data-theme="light"] .jt-editor-field > input[type="text"],
[data-theme="light"] .jt-editor-field > input[type="url"] {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.14);
  color: #0f1a15;
}

[data-theme="light"] .jt-editor-field > input:focus {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.38);
  box-shadow: 0 0 0 3px rgba(47, 107, 72, 0.14);
}

/* ----- Brand swatch picker ----- */
.jt-editor-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.jt-editor-swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.jt-editor-swatch__dot {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--jt-swatch, #73e69b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.jt-editor-swatch:hover {
  transform: translateY(-1px);
  border-color: var(--jt-border-strong);
}

.jt-editor-swatch.is-selected {
  border-color: var(--jt-accent);
  box-shadow: 0 0 0 2px rgba(115, 230, 155, 0.25);
}

[data-theme="light"] .jt-editor-swatch {
  background: var(--jt-panel-bg);
  border-color: rgba(31, 82, 56, 0.14);
}

[data-theme="light"] .jt-editor-swatch.is-selected {
  border-color: #1f5238;
  box-shadow: 0 0 0 2px rgba(47, 107, 72, 0.2);
}

/* ----- Icon picker grid ----- */
.jt-editor-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.45rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--jt-border);
  background: rgba(0, 0, 0, 0.14);
}

.jt-editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0.4rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--jt-muted);
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.jt-editor-icon > svg {
  width: 24px;
  height: 24px;
}

.jt-editor-icon:hover {
  color: var(--jt-accent);
  border-color: var(--jt-border-strong);
  background: rgba(115, 230, 155, 0.06);
  transform: translateY(-1px);
}

.jt-editor-icon.is-selected {
  color: var(--jt-accent);
  border-color: var(--jt-accent);
  background: rgba(115, 230, 155, 0.12);
}

[data-theme="light"] .jt-editor-icons {
  background: rgba(31, 82, 56, 0.03);
  border-color: rgba(31, 82, 56, 0.12);
}

[data-theme="light"] .jt-editor-icon {
  background: var(--jt-card-bg);
  color: rgba(31, 82, 56, 0.65);
}

[data-theme="light"] .jt-editor-icon:hover {
  color: #1f5238;
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.3);
}

[data-theme="light"] .jt-editor-icon.is-selected {
  color: #1f5238;
  border-color: #1f5238;
  background: rgba(47, 107, 72, 0.12);
}

/* ----- Row actions ----- */
.jt-editor-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--jt-border);
}

.jt-editor-row__action {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--jt-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--jt-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.jt-editor-row__action:hover {
  color: var(--jt-text);
  background: rgba(115, 230, 155, 0.05);
  border-color: var(--jt-border-strong);
}

.jt-editor-row__action--danger:hover {
  color: #ff8a9c;
  background: rgba(255, 138, 156, 0.08);
  border-color: rgba(255, 138, 156, 0.32);
}

[data-theme="light"] .jt-editor-row__action {
  background: rgba(31, 82, 56, 0.03);
  color: rgba(31, 82, 56, 0.65);
}

[data-theme="light"] .jt-editor-row__action:hover {
  color: #0f1a15;
  background: rgba(47, 107, 72, 0.08);
  border-color: rgba(31, 82, 56, 0.32);
}

[data-theme="light"] .jt-editor-row__action--danger:hover {
  color: #c2283a;
  background: rgba(194, 40, 58, 0.08);
  border-color: rgba(194, 40, 58, 0.32);
}

/* ----- "Add app" button ----- */
.jt-editor__add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--jt-radius-sm);
  border: 1px dashed var(--jt-border-strong);
  background: rgba(115, 230, 155, 0.04);
  color: var(--jt-accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.jt-editor__add:hover {
  transform: translateY(-1px);
  background: rgba(115, 230, 155, 0.1);
  border-color: rgba(115, 230, 155, 0.5);
}

[data-theme="light"] .jt-editor__add {
  background: rgba(47, 107, 72, 0.04);
  color: #1f5238;
  border-color: rgba(31, 82, 56, 0.32);
}

[data-theme="light"] .jt-editor__add:hover {
  background: rgba(47, 107, 72, 0.1);
}

/* ----- Modal footer ----- */
.jt-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--jt-border);
}

.jt-editor__hint {
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--jt-muted) !important;
  min-height: 1.2em;
}

.jt-editor__hint.is-error {
  color: #ff8a9c !important;
}

.jt-editor__footer-buttons {
  display: flex;
  gap: 0.55rem;
}

.jt-editor__btn {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.jt-editor__btn--primary {
  background: linear-gradient(135deg, #73e69b, #4dd97f);
  color: #07110d;
  box-shadow: 0 12px 28px rgba(77, 217, 127, 0.16);
}

.jt-editor__btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #86edaa, #5fe08c);
}

.jt-editor__btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.jt-editor__btn--ghost {
  background: transparent;
  color: var(--jt-muted);
  border: 1px solid var(--jt-border-strong);
}

.jt-editor__btn--ghost:hover {
  color: var(--jt-text);
  background: rgba(115, 230, 155, 0.06);
}

[data-theme="light"] .jt-editor__btn--primary {
  background: linear-gradient(135deg, #2f6b48, #1f5238);
  color: #fbfcfb;
  box-shadow: 0 12px 28px rgba(31, 82, 56, 0.18);
}

[data-theme="light"] .jt-editor__btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a7c54, #265e3f);
}

[data-theme="light"] .jt-editor__btn--ghost {
  color: rgba(31, 82, 56, 0.7);
  border-color: rgba(31, 82, 56, 0.32);
}

[data-theme="light"] .jt-editor__btn--ghost:hover {
  color: #0f1a15;
  background: rgba(47, 107, 72, 0.06);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .jt-editor__card {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    border-radius: 22px;
  }
  .jt-editor__header,
  .jt-editor__body,
  .jt-editor__footer,
  .jt-editor__tabs {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .jt-editor-row__summary {
    grid-template-columns: 38px 1fr 12px;
    gap: 0.65rem;
  }
  .jt-editor__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .jt-editor__footer-buttons {
    justify-content: flex-end;
  }
}

/* =========================================================================
   Diensten page – service blocks
   ========================================================================= */
.jt-service-block {
  background: var(--jt-panel);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  padding: 2rem 2.2rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s;
}
.jt-service-block:hover {
  border-color: var(--jt-border-strong);
}
.jt-service-header h3 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.jt-service-header p:last-child {
  margin-bottom: 1.2rem !important;
}
.jt-service-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem 2rem;
}
.jt-service-list li {
  position: relative;
  padding-left: 1.4rem !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}
.jt-service-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--jt-accent);
  font-weight: 600;
}

[data-theme="light"] .jt-service-block {
  background: var(--jt-panel-bg);
  border-color: rgba(47, 107, 72, 0.12);
}
[data-theme="light"] .jt-service-block:hover {
  border-color: rgba(47, 107, 72, 0.25);
}

/* =========================================================================
   Cases / Projecten – case cards
   ========================================================================= */
.jt-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 840px) {
  .jt-case-grid {
    grid-template-columns: 1fr;
  }
}
.jt-case-card {
  background: var(--jt-panel);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  padding: 1.8rem 2rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.jt-case-card:hover {
  border-color: var(--jt-border-strong);
  box-shadow: var(--jt-shadow);
}
.jt-case-meta {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.jt-case-meta .jt-pill {
  font-size: 0.7rem !important;
  padding: 0.15rem 0.6rem !important;
}
.jt-case-card h3 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}
.jt-case-body p {
  margin-bottom: 0.4rem !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}
.jt-case-body strong {
  color: var(--jt-accent) !important;
  font-weight: 600;
}

[data-theme="light"] .jt-case-card {
  background: var(--jt-panel-bg);
  border-color: rgba(47, 107, 72, 0.12);
}
[data-theme="light"] .jt-case-card:hover {
  border-color: rgba(47, 107, 72, 0.25);
}
[data-theme="light"] .jt-case-body strong {
  color: #1a6b3a !important;
}

/* Case card type pills */
.jt-pill--pro {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
.jt-pill--lab {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
[data-theme="light"] .jt-pill--pro {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}
[data-theme="light"] .jt-pill--lab {
  background: rgba(147, 51, 234, 0.08) !important;
  color: #7c3aed !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
}

/* Case screenshot placeholder */
.jt-case-screenshot {
  min-height: 3rem;
  border-radius: 12px;
  border: 1px dashed var(--jt-border);
  margin: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}
.jt-case-screenshot:empty::after {
  content: "Screenshot / diagram";
  font-family: var(--jt-font-mono);
  font-size: 0.7rem;
  color: var(--jt-muted);
  letter-spacing: 0.05em;
}

/* Case action buttons */
.jt-case-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--jt-border);
}
.jt-case-btn {
  display: inline-block;
  font-family: var(--jt-font-mono);
  font-size: 0.78rem !important;
  letter-spacing: 0.03em;
  color: var(--jt-accent) !important;
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--jt-border-strong);
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.jt-case-btn:hover {
  background: rgba(115, 230, 155, 0.08);
  border-color: var(--jt-accent);
}
[data-theme="light"] .jt-case-btn {
  color: #1a6b3a !important;
  border-color: rgba(47, 107, 72, 0.25);
}
[data-theme="light"] .jt-case-btn:hover {
  background: rgba(47, 107, 72, 0.06);
  border-color: #1a6b3a;
}

/* =========================================================================
   Contact – intake grid
   ========================================================================= */
.jt-card-grid--intake {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
.jt-card-grid--intake .jt-card {
  padding: 1.4rem 1.6rem !important;
}
.jt-card-grid--intake .jt-card h3 {
  font-size: 1.05rem !important;
  margin-bottom: 0.3rem !important;
}
.jt-card-grid--intake .jt-card p {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}

/* =========================================================================
   Certificaten – verification link
   ========================================================================= */
.jt-cert-card__verify {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--jt-font-mono);
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
  color: var(--jt-accent) !important;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.jt-cert-card__verify:hover {
  opacity: 1;
  text-decoration: underline;
}
[data-theme="light"] .jt-cert-card__verify {
  color: #1a6b3a !important;
}
/* =========================================================================
   JT Secure Solutions — Enhancement Layer
   Added: 2026-05-03
   ========================================================================= */

/* -------------------------------------------------------------------------
   Animation system tokens
   ------------------------------------------------------------------------- */
:root {
  --jt-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --jt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jt-duration-fast: 0.22s;
  --jt-duration-normal: 0.4s;
  --jt-duration-slow: 0.65s;
  --jt-blue: #5da9ff;
  --jt-blue-glow: rgba(93, 169, 255, 0.12);
  --jt-purple: #ba87ff;
  --jt-purple-glow: rgba(186, 135, 255, 0.12);
  --jt-amber: #ffb84d;
  --jt-amber-glow: rgba(255, 184, 77, 0.1);
}

[data-theme="light"] {
  --jt-blue: #3b82c4;
  --jt-blue-glow: rgba(59, 130, 196, 0.1);
  --jt-purple: #9466d6;
  --jt-purple-glow: rgba(148, 102, 214, 0.1);
  --jt-amber: #d49020;
  --jt-amber-glow: rgba(212, 144, 32, 0.1);
}

/* -------------------------------------------------------------------------
   Enhanced reveal animations — data-jt-reveal system
   ------------------------------------------------------------------------- */
[data-jt-reveal] {
  opacity: 0;
  transition: opacity var(--jt-duration-slow) var(--jt-ease-out),
              transform var(--jt-duration-slow) var(--jt-ease-out),
              filter var(--jt-duration-slow) var(--jt-ease-out);
}
[data-jt-reveal].jt-revealed { opacity: 1; }

[data-jt-reveal="fade-up"] { transform: translateY(32px); }
[data-jt-reveal="fade-up"].jt-revealed { transform: translateY(0); }

[data-jt-reveal="fade-left"] { transform: translateX(-32px); }
[data-jt-reveal="fade-left"].jt-revealed { transform: translateX(0); }

[data-jt-reveal="fade-right"] { transform: translateX(32px); }
[data-jt-reveal="fade-right"].jt-revealed { transform: translateX(0); }

[data-jt-reveal="scale"] { transform: scale(0.92); }
[data-jt-reveal="scale"].jt-revealed { transform: scale(1); }

[data-jt-reveal="blur"] {
  filter: blur(8px);
  transform: translateY(16px);
}
[data-jt-reveal="blur"].jt-revealed {
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger children */
[data-jt-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--jt-ease-out),
              transform 0.45s var(--jt-ease-out);
  transition-delay: calc(var(--jt-stagger-index, 0) * 80ms);
}
[data-jt-stagger].jt-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax positioning */
[data-jt-parallax] {
  transform: translateY(var(--jt-parallax-y, 0));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-jt-reveal],
  [data-jt-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Card glow follows mouse
   ------------------------------------------------------------------------- */
.jt-card,
.jt-card-grid > *,
.jt-cert-card,
.jt-case-card,
.jt-testimonial,
.jt-service-list article {
  position: relative;
}

.jt-card::before,
.jt-card-grid > *::before,
.jt-cert-card::before,
.jt-case-card::before,
.jt-testimonial::before,
.jt-service-list article::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(115, 230, 155, 0.06), transparent 55%);
}

.jt-card:hover::before,
.jt-card-grid > *:hover::before,
.jt-cert-card:hover::before,
.jt-case-card:hover::before,
.jt-testimonial:hover::before,
.jt-service-list article:hover::before {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Hero — animated gradient mesh
   ------------------------------------------------------------------------- */
.jt-hero-section {
  position: relative;
  overflow: hidden;
}

.jt-hero-section .jt-hero-gradient-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 600px 400px at 75% 20%, rgba(115, 230, 155, 0.14), transparent),
    radial-gradient(ellipse 400px 300px at 20% 80%, rgba(93, 169, 255, 0.08), transparent),
    radial-gradient(ellipse 300px 200px at 90% 70%, rgba(186, 135, 255, 0.06), transparent);
  animation: jt-hero-gradient 12s ease-in-out infinite alternate;
}

@keyframes jt-hero-gradient {
  0%   { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.04) rotate(0.5deg); }
  100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
}

.jt-hero-grid { position: relative; z-index: 1; }

[data-theme="light"] .jt-hero-section .jt-hero-gradient-mesh {
  background:
    radial-gradient(ellipse 600px 400px at 75% 20%, rgba(47, 107, 72, 0.08), transparent),
    radial-gradient(ellipse 400px 300px at 20% 80%, rgba(59, 130, 196, 0.06), transparent),
    radial-gradient(ellipse 300px 200px at 90% 70%, rgba(148, 102, 214, 0.04), transparent);
}

/* Hero heading gradient text */
.jt-hero-copy h1 {
  background: linear-gradient(135deg, #f4fbf5 0%, #73e69b 50%, #5da9ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] .jt-hero-copy h1 {
  background: linear-gradient(135deg, #0a1613 0%, #1f5238 50%, #3763aa 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero accent line animation */
.jt-hero-section::after {
  animation: jt-hero-line 3s ease-in-out infinite alternate;
}

@keyframes jt-hero-line {
  from { opacity: 0.5; width: min(20rem, 30%); }
  to   { opacity: 0.85; width: min(28rem, 42%); }
}

/* Floating decorative shapes */
.jt-hero-float {
  position: absolute;
  border-radius: 50%;
  opacity: 0.05;
  animation: jt-float 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.jt-hero-float--1 {
  width: 180px; height: 180px;
  top: 8%; right: 5%;
  background: var(--jt-accent);
}

.jt-hero-float--2 {
  width: 120px; height: 120px;
  bottom: 15%; left: 8%;
  background: var(--jt-blue);
  animation-delay: -3s;
}

.jt-hero-float--3 {
  width: 80px; height: 80px;
  top: 60%; right: 25%;
  background: var(--jt-purple);
  animation-delay: -5s;
}

@keyframes jt-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .jt-hero-gradient-mesh,
  .jt-hero-float { animation: none !important; }
  .jt-hero-section::after { animation: none !important; }
}

/* -------------------------------------------------------------------------
   KPI metrics strip
   ------------------------------------------------------------------------- */
.jt-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0.8rem 0 !important;
}

.jt-kpi-card {
  text-align: center;
  padding: 1.2rem 0.6rem;
  border-radius: var(--jt-radius-sm, 20px);
  border: 1px solid var(--jt-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)),
              rgba(9, 18, 13, 0.5);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.jt-kpi-card:hover {
  border-color: var(--jt-border-strong);
  transform: translateY(-2px);
}

.jt-kpi-card strong {
  display: block;
  font-family: "JetBrains Mono", monospace !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 300 !important;
  color: var(--jt-accent) !important;
  line-height: 1.1;
}

.jt-kpi-card span {
  display: block;
  margin-top: 0.35rem;
  color: var(--jt-muted) !important;
  font-size: 0.85rem !important;
  font-family: "Overused Grotesk", -apple-system, sans-serif !important;
}

[data-theme="light"] .jt-kpi-card {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005)),
              var(--jt-card-bg);
  border-color: rgba(47, 107, 72, 0.12);
}

[data-theme="light"] .jt-kpi-card strong {
  color: #1a6b3a !important;
}

@media (max-width: 860px) {
  .jt-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .jt-kpi-row { grid-template-columns: 1fr !important; }
}

/* -------------------------------------------------------------------------
   Service cards — color differentiation
   ------------------------------------------------------------------------- */
.jt-service-list article:nth-child(1) { --svc-accent: var(--jt-accent); }
.jt-service-list article:nth-child(2) { --svc-accent: var(--jt-blue); }
.jt-service-list article:nth-child(3) { --svc-accent: var(--jt-purple); }
.jt-service-list article:nth-child(4) { --svc-accent: var(--jt-amber); }

.jt-service-list article span {
  color: var(--svc-accent, var(--jt-accent)) !important;
}

.jt-service-list article {
  position: relative;
  overflow: hidden;
}

.jt-service-list article::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--svc-accent, var(--jt-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.jt-service-list article:hover::after {
  opacity: 1;
}

.jt-service-list article:hover {
  border-color: color-mix(in srgb, var(--svc-accent, var(--jt-accent)) 25%, transparent) !important;
}

/* Diensten page — service block enhancements */
.jt-service-block {
  position: relative;
  overflow: hidden;
}

.jt-service-block .jt-service-header .jt-card__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(115, 230, 155, 0.08);
  border: 1px solid rgba(115, 230, 155, 0.18);
}

/* -------------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------------- */
.jt-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.2rem;
}

.jt-testimonial {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--jt-radius-sm, 20px);
  border: 1px solid var(--jt-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
              rgba(9, 18, 13, 0.65);
  margin: 0;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.jt-testimonial:hover {
  border-color: var(--jt-border-strong);
  transform: translateY(-2px);
}

.jt-testimonial__icon {
  color: var(--jt-accent);
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

.jt-testimonial__quote p {
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
  color: #eef7f0 !important;
  font-style: italic;
}

.jt-testimonial__footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--jt-border);
}

.jt-testimonial__author {
  color: #f4fbf5 !important;
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem !important;
}

.jt-testimonial__company,
.jt-testimonial__role {
  color: var(--jt-muted) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em;
}

.jt-testimonial__role {
  color: var(--jt-accent) !important;
  opacity: 0.7;
}

[data-theme="light"] .jt-testimonial {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005)),
              var(--jt-panel-bg);
  border-color: rgba(47, 107, 72, 0.12);
}

[data-theme="light"] .jt-testimonial__quote p {
  color: #1a2e22 !important;
}

[data-theme="light"] .jt-testimonial__author {
  color: #0a1613 !important;
}

[data-theme="light"] .jt-testimonial__role {
  color: #1a6b3a !important;
}

/* -------------------------------------------------------------------------
   Case cards — enhanced
   ------------------------------------------------------------------------- */
.jt-case-card {
  position: relative;
  overflow: hidden;
}

.jt-case-card .jt-case-top-accent {
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

.jt-case-card .jt-case-top-accent--pro {
  background: linear-gradient(90deg, rgba(93, 169, 255, 0.6), transparent);
}

.jt-case-card .jt-case-top-accent--lab {
  background: linear-gradient(90deg, rgba(186, 135, 255, 0.6), transparent);
}

.jt-case-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.jt-case-tech span {
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(115, 230, 155, 0.05);
  border: 1px solid rgba(115, 230, 155, 0.1);
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.05em;
  color: var(--jt-muted) !important;
}

[data-theme="light"] .jt-case-tech span {
  background: rgba(47, 107, 72, 0.05);
  border-color: rgba(47, 107, 72, 0.12);
}

/* -------------------------------------------------------------------------
   Certificate cards — tier-specific gradients
   ------------------------------------------------------------------------- */
.jt-cert-card--expert {
  background:
    radial-gradient(circle at 0% 0%, rgba(115, 230, 155, 0.06), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(11, 22, 16, 0.8) !important;
}

.jt-cert-card--associate {
  background:
    radial-gradient(circle at 0% 0%, rgba(93, 169, 255, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    rgba(9, 18, 13, 0.75) !important;
}

.jt-cert-card--fundamentals {
  background:
    radial-gradient(circle at 0% 0%, rgba(186, 135, 255, 0.04), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
    rgba(9, 18, 13, 0.7) !important;
}

[data-theme="light"] .jt-cert-card--expert {
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 107, 72, 0.06), transparent 40%),
    var(--jt-panel-bg) !important;
}

[data-theme="light"] .jt-cert-card--associate {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 196, 0.06), transparent 40%),
    var(--jt-panel-bg) !important;
}

.jt-cert-card:hover .jt-cert-card__badge {
  animation: jt-cert-pulse 0.6s var(--jt-ease-spring);
}

@keyframes jt-cert-pulse {
  0%  { transform: scale(1); }
  50% { transform: scale(1.08); }
  100%{ transform: scale(1.02); }
}

/* Certificate summary banner */
.jt-cert-summary {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1rem 0;
  margin-bottom: 0.5rem;
}

.jt-cert-summary__item {
  text-align: center;
}

.jt-cert-summary__item strong {
  display: block;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  color: var(--jt-accent) !important;
  line-height: 1;
}

.jt-cert-summary__item span {
  display: block;
  margin-top: 0.3rem;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jt-muted) !important;
}

[data-theme="light"] .jt-cert-summary__item strong {
  color: #1a6b3a !important;
}

@media (max-width: 480px) {
  .jt-cert-summary { gap: 1.2rem; flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
   Contact form — enhanced focus + submit
   ------------------------------------------------------------------------- */
.jt-contact-form-section input:focus,
.jt-contact-form-section textarea:focus {
  border-color: var(--jt-accent) !important;
  box-shadow: 0 0 0 3px rgba(115, 230, 155, 0.12),
              0 0 24px rgba(115, 230, 155, 0.06) !important;
  outline: none;
}

.jt-contact-form-section button[type="submit"],
.jt-contact-form-section .wpforms-submit {
  position: relative;
  overflow: hidden;
}

.jt-contact-form-section button[type="submit"]::after,
.jt-contact-form-section .wpforms-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.jt-contact-form-section button[type="submit"]:hover::after,
.jt-contact-form-section .wpforms-submit:hover::after {
  transform: translateX(100%);
}

[data-theme="light"] .jt-contact-form-section input:focus,
[data-theme="light"] .jt-contact-form-section textarea:focus {
  border-color: #1a6b3a !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 72, 0.1),
              0 0 24px rgba(47, 107, 72, 0.04) !important;
}

/* -------------------------------------------------------------------------
   Navigation — active page + compact scroll
   ------------------------------------------------------------------------- */
.jt-main-nav .current-menu-item > .wp-block-navigation-item__content {
  position: relative;
}

.jt-main-nav .current-menu-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--jt-accent);
}

.jt-topbar {
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.jt-topbar--scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.jt-topbar--scrolled .jt-topbar__inner {
  padding: 0.7rem 0 !important;
}

/* -------------------------------------------------------------------------
   Back to top button
   ------------------------------------------------------------------------- */
.jt-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--jt-border);
  background: rgba(255,255,255,0.03);
  color: var(--jt-muted);
  font-family: "Overused Grotesk", -apple-system, sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.22s ease;
  text-decoration: none !important;
}

.jt-back-to-top:hover {
  background: rgba(115, 230, 155, 0.08);
  border-color: var(--jt-border-strong);
  color: var(--jt-accent) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .jt-back-to-top {
  border-color: rgba(47, 107, 72, 0.15);
  background: rgba(0, 0, 0, 0.03);
  color: #5a7a66;
}

[data-theme="light"] .jt-back-to-top:hover {
  background: rgba(47, 107, 72, 0.06);
  color: #1a6b3a !important;
}

/* -------------------------------------------------------------------------
   Enhanced page transitions
   ------------------------------------------------------------------------- */
body.jt-page-out .wp-site-blocks {
  opacity: 0 !important;
  transform: translateY(-6px);
  filter: blur(2px);
  transition: all 0.14s ease;
}

body.jt-ready .wp-site-blocks {
  animation: jt-page-in 0.35s ease forwards;
}

@keyframes jt-page-in {
  from { opacity: 0.8; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.jt-page-out .wp-site-blocks {
    filter: none !important;
    transform: none !important;
  }
  body.jt-ready .wp-site-blocks {
    animation: none !important;
  }
}
/* =========================================================================
   2026-05-08 — Audit refresh: hero proof strip, employer cards, text link,
   skip link, and light-theme contrast fixes. Appended at end so any
   earlier !important rules are intentionally overridden where needed.
   ========================================================================= */

/* ---- Skip-to-content (a11y) ---------------------------------------------- */
.jt-skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: var(--jt-accent, #73e69b);
  color: #08110d;
  font-family: "Overused Grotesk", -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  z-index: 9999;
  transform: translateY(-180%);
  transition: transform 0.2s ease;
}
.jt-skip-link:focus,
.jt-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #08110d;
  outline-offset: 2px;
}

/* ---- Hero text-link secondary CTA --------------------------------------- */
.jt-cta-row--hero {
  align-items: center !important;
}
.jt-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.25rem;
  font-family: "Overused Grotesk", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--jt-text, #eef7f0);
  text-decoration: none;
  border-bottom: 1px dotted var(--jt-warm-line, rgba(230, 224, 206, 0.18));
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jt-text-link span {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.1em;
  transition: transform 0.2s ease;
}
.jt-text-link:hover {
  color: var(--jt-accent, #73e69b);
  border-bottom-color: var(--jt-accent, #73e69b);
}
.jt-text-link:hover span { transform: translateX(3px); }
[data-theme="light"] .jt-text-link {
  color: #0f1a15;
  border-bottom-color: rgba(31, 82, 56, 0.22);
}
[data-theme="light"] .jt-text-link:hover {
  color: #1f5238;
  border-bottom-color: #1f5238;
}

/* ---- Hero proof panel — strip variant ----------------------------------- */
.jt-proof-panel--strip {
  gap: 0.9rem !important;
}
.jt-proof-strip {
  display: flex;
  flex-direction: column;
  border-top: 1px dotted var(--jt-warm-line, rgba(230, 224, 206, 0.18));
}
.jt-proof-strip__item {
  display: grid;
  grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px dotted var(--jt-warm-line, rgba(230, 224, 206, 0.18));
}
.jt-proof-strip__item strong {
  display: block;
  align-self: center;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--jt-accent, #73e69b);
  text-transform: uppercase;
}
.jt-proof-strip__item span {
  display: block;
  align-self: center;
  color: var(--jt-warm-muted, #c8d2c7);
  font-size: 0.97rem;
  line-height: 1.55;
}
[data-theme="light"] .jt-proof-strip {
  border-top-color: rgba(31, 82, 56, 0.16);
}
[data-theme="light"] .jt-proof-strip__item {
  border-bottom-color: rgba(31, 82, 56, 0.14);
}
[data-theme="light"] .jt-proof-strip__item strong {
  color: #1f5238;
}
[data-theme="light"] .jt-proof-strip__item span {
  color: #2c3a32;
}

/* ---- KPI row — proof variant (longer labels, no inflated counters) ----- */
.jt-kpi-row--proof .jt-kpi-card {
  text-align: left;
  padding: 1.2rem 1.1rem;
}
.jt-kpi-row--proof .jt-kpi-card strong {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
  margin-bottom: 0.45rem;
}
.jt-kpi-row--proof .jt-kpi-card span {
  margin-top: 0;
  font-size: 0.86rem !important;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

/* ---- Employer / track-record strip (replaces anonymous testimonials) ---- */
.jt-employer-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.jt-employer-card {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border-radius: var(--jt-radius-sm, 20px);
  border: 1px solid var(--jt-border, rgba(115, 230, 155, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)),
    rgba(9, 18, 13, 0.55);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.jt-employer-card:hover {
  border-color: var(--jt-border-strong, rgba(115, 230, 155, 0.28));
  transform: translateY(-2px);
}
.jt-employer-card__role {
  margin: 0 0 0.4rem !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  color: var(--jt-accent, #73e69b) !important;
  text-transform: uppercase;
}
.jt-employer-card h3 {
  margin: 0 0 0.65rem !important;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important;
  letter-spacing: -0.02em !important;
}
.jt-employer-card h3 a {
  color: inherit !important;
  border-bottom: 1px dotted currentColor;
  text-decoration: none !important;
}
.jt-employer-card h3 a:hover {
  color: var(--jt-accent, #73e69b) !important;
  border-bottom-color: var(--jt-accent, #73e69b);
}
.jt-employer-card__scope {
  margin: 0 !important;
  color: var(--jt-warm-muted, #c8d2c7) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}
.jt-employer-card--quiet {
  background: transparent;
  border-style: dashed;
}
[data-theme="light"] .jt-employer-card {
  background: linear-gradient(180deg, var(--jt-panel-bg), var(--jt-panel-strong-bg));
  border-color: rgba(31, 82, 56, 0.14);
  box-shadow: 0 14px 34px rgba(14, 38, 27, 0.05);
}
[data-theme="light"] .jt-employer-card:hover {
  border-color: rgba(31, 82, 56, 0.32);
}
[data-theme="light"] .jt-employer-card__role {
  color: #1f5238 !important;
}
[data-theme="light"] .jt-employer-card h3,
[data-theme="light"] .jt-employer-card h3 a {
  color: #0a1613 !important;
}
[data-theme="light"] .jt-employer-card__scope {
  color: #455349 !important;
}
[data-theme="light"] .jt-employer-card--quiet {
  background: var(--jt-card-bg);
}

@media (max-width: 860px) {
  .jt-employer-strip {
    grid-template-columns: 1fr;
  }
  .jt-proof-strip__item {
    grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr);
    padding: 0.85rem 0;
  }
}

/* ---- Light-theme paragraph contrast fix --------------------------------- *
 * theme.json sets core/paragraph color to #a7b9ae which is unreadable on
 * the light background. Re-state it for [data-theme="light"] only so the
 * dark theme is unaffected.
 * ------------------------------------------------------------------------- */
[data-theme="light"] .wp-block-post-content p,
[data-theme="light"] .jt-section p,
[data-theme="light"] .jt-hero-lead,
[data-theme="light"] .jt-page-hero p,
[data-theme="light"] .jt-employer-card__scope {
  color: #2a3530 !important;
}
[data-theme="light"] .jt-eyebrow {
  color: #1f5238 !important;
}
[data-theme="light"] .jt-hero-copy h1 {
  color: #08110d !important;
}

/* ---- Footer legal line -------------------------------------------------- */
.jt-footer__legal {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--jt-warm-line, rgba(230, 224, 206, 0.12));
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--jt-muted, #9fb4a7);
  text-align: center;
}
.jt-footer__legal a {
  color: inherit !important;
  border-bottom: 1px dotted currentColor;
  text-decoration: none !important;
}
.jt-footer__legal a:hover {
  color: var(--jt-accent, #73e69b) !important;
}
[data-theme="light"] .jt-footer__legal {
  border-top-color: rgba(31, 82, 56, 0.14);
  color: #55685e;
}