/* =========================================================
   narzedziahub.pl – Premium Tool UI (SaaS dark)
   Applies to tool pages only (opt-in via <link>).
   Goal: Stripe/Linear/Vercel-ish feel without frameworks.
   ========================================================= */

/* Base page background (tool pages) */
body {
  background:
    radial-gradient(900px 520px at 70% 5%, rgba(108, 92, 255, 0.18), transparent 60%),
    radial-gradient(700px 520px at 10% 25%, rgba(143, 123, 255, 0.12), transparent 55%),
    linear-gradient(180deg, #0f172a, #0b1220);
}

/* =========================================================
   LIGHT MODE (body.light)
   Step-by-step implementation per user requirements.
   ========================================================= */

/* STEP 1: Background & text contrast */
body.light {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light .crumb,
body.light .crumb a,
body.light .breadcrumb,
body.light .breadcrumb a,
body.light .tool-hero p,
body.light .seo-content,
body.light .seo-content p,
body.light .toc-box a,
body.light .faq-answer,
body.light .step-desc {
  color: #475569 !important;
  opacity: 1 !important;
}

body.light .tool-hero h1,
body.light .card-title,
body.light .seo-content h2,
body.light .seo-content h3,
body.light .seo-content h4,
body.light .toc-box strong,
body.light .faq-item summary,
body.light strong {
  color: #0f172a !important;
  opacity: 1 !important;
}

body.light .tool-badge {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.light .copy-btn {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

body.light .btn,
body.light .btn-secondary,
body.light .btn-secondary.btn-sm,
body.light .toggle-item,
body.light .tgl-label {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* STEP 2: Card design (solid, no transparency) */
body.light .glass,
body.light .card.tool-card,
body.light .card.seo-content,
body.light .card.article-content,
body.light article.card.seo-content,
body.light .toc-box,
body.light .faq-item,
body.light .answer-block,
body.light .step-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* STEP 3: Input fields */
body.light input[type="number"],
body.light input[type="date"],
body.light input[type="text"],
body.light textarea {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

body.light input::placeholder,
body.light textarea::placeholder {
  color: #475569 !important;
  opacity: 1 !important;
}

body.light input[type="number"]:focus,
body.light input[type="date"]:focus,
body.light input[type="text"]:focus,
body.light textarea:focus {
  border-color: rgba(108, 92, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(108, 92, 255, 0.16) !important;
}

/* STEP 4: Buttons (strong contrast, minimal shadow) */
body.light .btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6c5cff, #2563eb) !important;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16) !important;
}

body.light .btn-primary:hover {
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.20) !important;
}

body.light .btn-secondary,
body.light .btn-secondary.btn-sm {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

/* STEP 5: Remove dark-mode/glass effects in light mode */
body.light .glass,
body.light .card.tool-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light .card.tool-card::before {
  opacity: 0 !important;
}

/* STEP 1: Remove any light-mode overlay/fade layers (pseudo elements) */
body.light .tool::before,
body.light .tool::after,
body.light .glass::before,
body.light .glass::after,
body.light .card::before,
body.light .card::after,
body.light .orb::before,
body.light .orb::after {
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Ensure no “washed-out” opacity on main content wrappers */
body.light main,
body.light .page,
body.light .card,
body.light article,
body.light section,
body.light nav,
body.light header {
  opacity: 1 !important;
}

body.light #resultContainer,
body.light .result-box,
body.light #resultContainer.result {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* STEP 2: Fix any remaining blur in light mode (tools) */
body.light .header,
body.light .mobile-nav,
body.light .dropdown-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* STEP 3: Fix hero section visual box (solid card in light mode) */
body.light .hero-visual {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border-radius: 22px !important;
  padding: 14px !important;
}

body.light .hero-illus,
body.light .hero-illus-svg {
  background: transparent !important;
  opacity: 1 !important;
}

/* STEP 4: Fix text visibility (no opacity, strong contrast) */
body.light,
body.light * {
  text-shadow: none !important;
}

body.light .seo-content,
body.light .seo-content p,
body.light p,
body.light li,
body.light .faq-answer,
body.light .step-desc,
body.light .crumb,
body.light .crumb a,
body.light .breadcrumb,
body.light .breadcrumb a,
body.light .toc-box a {
  color: #475569 !important;
  opacity: 1 !important;
}

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light .card-title,
body.light .faq-item summary,
body.light strong,
body.light .step-title,
body.light label {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* STEP 5: Fix image visibility (no fade, subtle shadow) */
body.light .hero-illus,
body.light .hero-illus-svg,
body.light .hero-visual img,
body.light .hero-visual svg {
  opacity: 1 !important;
  filter: none !important;
}

body.light .hero-illus-svg {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08)) !important;
}

/* STEP 6: Fix form/tool cards in light mode (solid + sharp) */
body.light .card.tool-card,
body.light .glass.tool,
body.light .glass {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

body.light .toggle-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

body.light .toggle-item:hover {
  border-color: rgba(108, 92, 255, 0.45) !important;
}

body.light .toggle-item:has(input:checked),
body.light .pill:has(input:checked) {
  background: #eef2ff !important;
}

body.light .copy-btn {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}

/* STEP 7: Fix button visibility (keep gradient, no fade overlay) */
body.light .btn-primary {
  background: linear-gradient(135deg, #6c5cff, #8f7bff) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(108, 92, 255, 0.16) !important;
}

body.light .btn-primary::before,
body.light .btn-primary::after {
  opacity: 0 !important;
}

/* STEP 8: Global apply guardrails (ensure no accidental fading/blur) */
body.light .glass,
body.light .card,
body.light .tool,
body.light .result,
body.light .result-copy-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* STEP 7: Ensure percent-page components also match light theme */
body.light .input {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.light .input svg {
  color: #475569 !important;
}

body.light .pillset {
  background: transparent !important;
}

body.light .pill {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body.light .pill .txt {
  color: #0f172a !important;
}

body.light .pill .ico {
  color: #475569 !important;
}

body.light .pill:has(input:checked) {
  background: #eef2ff !important;
  border-color: rgba(108, 92, 255, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(108, 92, 255, 0.12) !important;
}

body.light .tool-hero .grad {
  background: linear-gradient(135deg, #6c5cff, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Max-width container on desktop */
.page {
  max-width: 1100px !important;
  margin: 0 auto !important;
  /* User requirement: centered container + even side padding */
  padding: 0 16px 72px !important;
  width: 100% !important;
}

@media (max-width: 860px) {
  .page {
    padding-bottom: 96px !important;
  }
}

/* Baseline typography + spacing (tool pages) */
main.page {
  line-height: 1.7;
}

/* STEP 6: Content alignment (explicit padding 16px) */
body.light .page {
  padding: 16px 16px 72px !important;
}

/* Consistent vertical rhythm */
.tool-hero {
  margin-top: 8px;
}

.card.tool-card,
.glass.tool,
.glass {
  margin-top: 22px;
}

/* Keep article content separated from tool UI */
.card.article-content,
.card.seo-content,
article.seo-content,
.seo-content {
  margin-top: 44px !important;
}

/* Ensure SEO/article cards have proper padding on all tools */
.card.seo-content,
article.card.seo-content,
.card.article-content {
  padding: 22px !important;
}

@media (max-width: 520px) {

  .card.seo-content,
  article.card.seo-content,
  .card.article-content {
    padding: 16px !important;
  }
}

/* Breadcrumb (tool pages) */
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  flex-wrap: wrap;
}

.crumb a {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}

.crumb a:hover {
  color: rgba(255, 255, 255, 0.62);
}

.crumb .sep {
  opacity: 0.6;
}

/* Hero */
.tool-hero {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 18px;
  align-items: center;
  padding: 22px 0 18px;
}

.tool-hero h1 {
  font-size: clamp(30px, 4.3vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px;
}

.tool-hero .grad {
  background: linear-gradient(135deg, #6c5cff, #8f7bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tool-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 60ch;
}

.tool-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  user-select: none;
}

.hero-visual {
  display: none;
  justify-content: center;
  align-items: center;
}

@media (min-width: 860px) {
  .hero-visual {
    display: flex;
  }
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-illus {
  width: min(260px, 100%);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-illus-svg {
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: 22px;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.45));
}

.orb {
  width: 170px;
  height: 170px;
  border-radius: 28px;
  background:
    radial-gradient(120px 120px at 30% 25%, rgba(255, 255, 255, 0.20), transparent 55%),
    radial-gradient(140px 140px at 70% 70%, rgba(108, 92, 255, 0.35), transparent 60%),
    linear-gradient(135deg, rgba(108, 92, 255, 0.18), rgba(143, 123, 255, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(108, 92, 255, 0.10) inset;
  position: relative;
  overflow: hidden;
  transform: rotate(6deg);
  isolation: isolate;
}

.orb::after {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: conic-gradient(from 90deg, rgba(108, 92, 255, 0.0), rgba(108, 92, 255, 0.35), rgba(143, 123, 255, 0.0));
  filter: blur(26px);
  opacity: 0.55;
  animation: spin 7.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Glass card (main tool card) */
.glass,
.card.tool-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card.tool-card {
  padding: 22px !important;
  position: relative;
  overflow: hidden;
}

.card.tool-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(420px 240px at 20% 0%, rgba(108, 92, 255, 0.22), transparent 55%);
  pointer-events: none;
  opacity: 0.85;
}

.card.tool-card>* {
  position: relative;
}

/* Tool title inside card */
.card-title {
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Layout inside tool cards */
.tool-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
}

@media (max-width: 860px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}

/* Inputs: icons + premium focus */
input[type="number"],
input[type="date"],
input[type="text"],
textarea {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

input[type="number"]:focus,
input[type="date"]:focus,
input[type="text"]:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(108, 92, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(108, 92, 255, 0.18), 0 14px 26px rgba(0, 0, 0, 0.30) !important;
}

/* Icon padding for known ids */
#original,
#percent,
#min,
#max,
#count,
#length,
#weight,
#height {
  padding-left: 44px !important;
  background-repeat: no-repeat !important;
  background-position: 14px 50% !important;
  background-size: 18px 18px !important;
}

/* Inline SVG icons via data URIs (kept simple) */
#original {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
}

#percent {
  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width=' 2' stroke-linecap=' round'%3E%3Cpath d=' M19 5L5 19'/%3E%3Ccircle cx=' 7' cy=' 7' r=' 2'/%3E%3Ccircle cx=' 17' cy=' 17' r=' 2'/%3E%3C/svg%3E\"); }
 #min, #max {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 19V5M20 19V5M8 12h8'/%3E%3C/svg%3E");
  }

  #count {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  }

  #length {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h16M4 16h16'/%3E%3C/svg%3E");
  }

  #weight,
  #height {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 4h10l1 4H6l1-4Z'/%3E%3Cpath d='M6 8h12v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8Z'/%3E%3C/svg%3E");
  }

  /* Options (radio/checkbox) – premium pills */
  .toggle-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 999px !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
    min-height: 44px;
  }

  .toggle-item:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  .toggle-item:has(input:checked) {
    background: rgba(108, 92, 255, 0.12) !important;
    border-color: rgba(108, 92, 255, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(108, 92, 255, 0.14) !important;
  }

  /* Buttons */
  .btn {
    border-radius: 14px !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
  }

  .btn-primary {
    background: linear-gradient(135deg, #6c5cff, #3b82f6) !important;
    box-shadow: 0 18px 40px rgba(108, 92, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(108, 92, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
  }

  .btn-primary:active {
    transform: translateY(0) scale(0.99);
  }

  .btn-secondary {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-1px);
  }

  /* Result box */
  .result-box,
  #resultContainer.result,
  #resultContainer[style*="display:block"] {
    border-radius: 18px !important;
    background:
      radial-gradient(520px 220px at 30% 0%, rgba(108, 92, 255, 0.20), transparent 60%),
      rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(108, 92, 255, 0.30) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55) !important;
  }

  .copy-btn {
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .copy-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
  }

  /* SEO article spacing */
  .seo-content {
    color: rgba(255, 255, 255, 0.70) !important;
    line-height: 1.7 !important;
  }

  .seo-content h2,
  .seo-content h3,
  .seo-content h4 {
    color: rgba(255, 255, 255, 0.92) !important;
    letter-spacing: -0.02em;
  }

  .seo-content p {
    margin: 0 0 18px !important;
  }

  .seo-content h2 {
    margin: 32px 0 12px !important;
    line-height: 1.2;
  }

  .seo-content h3 {
    margin: 26px 0 10px !important;
    line-height: 1.25;
  }

  .seo-content h4 {
    margin: 22px 0 10px !important;
    line-height: 1.25;
  }

  .seo-content hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
    margin: 26px 0;
  }

  /* Lists & bullets (readability + alignment) */
  .seo-content ul,
  .seo-content ol {
    padding-left: 20px !important;
    margin: 10px 0 18px !important;
  }

  .seo-content li {
    margin-bottom: 10px !important;
  }

  .seo-content li::marker {
    color: rgba(255, 255, 255, 0.55);
  }

  /* “Spis treści” alignment (toc-box) */
  .toc-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin: 0 0 18px !important;
  }

  .toc-box strong {
    display: block;
    margin: 0 0 10px !important;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
  }

  .toc-box ol {
    margin: 0 !important;
    padding-left: 20px !important;
  }

  .toc-box li {
    margin: 8px 0 !important;
  }

  .toc-box a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
  }

  .toc-box a:hover {
    color: rgba(255, 255, 255, 0.86);
  }

  /* FAQ alignment */
  .faq-list {
    margin-top: 14px !important;
  }

  .faq-item summary {
    line-height: 1.45;
  }

  .faq-answer {
    margin-top: 8px;
    line-height: 1.7;
  }

  /* Common content blocks used on tool articles */
  .answer-block {
    background: rgba(108, 92, 255, 0.10) !important;
    border: 1px solid rgba(108, 92, 255, 0.18) !important;
    border-left: 3px solid rgba(108, 92, 255, 0.55) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 14px 0 22px !important;
  }

  .steps-list {
    margin: 14px 0 22px !important;
  }

  .step-item {
    border-radius: 16px !important;
  }

  .formula-box {
    border-radius: 16px !important;
    margin: 14px 0 18px !important;
  }

  .faq-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* Reduce “cramped” look on mobile */
  @media (max-width: 520px) {
    .tool-hero {
      grid-template-columns: 1fr;
    }

    .hero-illus-svg {
      width: 160px;
    }

    .orb {
      width: 140px;
      height: 140px;
      border-radius: 24px;
    }

    .orb svg {
      width: 65px;
      height: 65px;
    }

    .tool-hero p {
      font-size: 15px;
    }

    .toc-box {
      padding: 14px 14px !important;
    }

    .seo-content p {
      margin-bottom: 16px !important;
    }
  }