/* Word Count Tool — clean rebuild stylesheet
   Visual identity matches the Experon-era live site.
   Palette: primary #6ec1e4 (Elementor blue), dark #115172, accent #61ce70.
   Fonts: Raleway (headings), PT Sans (body), FontAwesome icons. */

:root {
  --c-primary: #6ec1e4;
  --c-primary-dark: #115172;
  --c-accent: #61ce70;
  --c-text: #222222;
  --c-text-muted: #7a7a7a;
  --c-text-soft: #54595f;
  --c-border: #dddddd;
  --c-bg: #ffffff;
  --c-bg-soft: #f7f7f7;
  --c-bg-alt: #f3f3f3;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --radius: 4px;
  --max-w: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; width: 100%; }
body {
  margin: 0;
  font: 16px/1.6 "PT Sans", Helvetica, Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}
/* Prevent any descendant from spilling out and creating a horizontal scrollbar
   that throws off mobile margins. Tables, iframes, and pre blocks scroll
   internally instead of pushing the page wide. */
img, video, iframe, table, pre, code { max-width: 100%; }
pre { overflow-x: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-pane, .static-page, .tool-article { min-width: 0; }
h1, h2, h3, h4, h5, h6 { font-family: "Raleway", Helvetica, Arial, sans-serif; color: var(--c-primary-dark); margin: 1.4em 0 .6em; line-height: 1.25; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
a { color: var(--c-primary-dark); text-decoration: none; }
a:hover { color: var(--c-primary); text-decoration: underline; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }
.layout, .content-col, .sidebar-col { min-width: 0; }
@media (max-width: 700px) {
  .wrap { padding: 0 .5rem; }
  .content-col, .sidebar-col, .tool-pane, .post-body, .single-post { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  /* Defensive: clip any descendant that overflows so the right margin stays equal to the left. */
  .content-col, .sidebar-col, main.site-main { overflow-x: clip; }
}

/* AdSense unfilled fallback creative — content from app/data/fallback_ads.py.
   Each creative carries its own bg/fg colors set via inline style by the JS. */
.ad-fallback-wrap { margin: .5rem 0; }
.ad-fallback {
  display: block;
  padding: 1.25rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.ad-fallback:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  filter: brightness(1.04);
  text-decoration: none;
}
.ad-fb-emoji {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: .35rem;
}
.ad-fb-headline {
  display: block;
  font: 700 1.15rem/1.2 "Raleway", sans-serif;
  margin: 0 0 .25rem;
  color: inherit;
}
.ad-fb-sub {
  display: block;
  margin: 0 0 .65rem;
  font-size: .9rem;
  line-height: 1.35;
  opacity: .92;
  color: inherit;
}
.ad-fb-cta {
  display: inline-block;
  padding: .45rem .95rem;
  border-radius: 999px;
  font: 700 .85rem "Raleway", sans-serif;
  letter-spacing: .01em;
}

/* Compact 50px banner variant — used for the mobile top banner and any
   ad slot ≤70px tall. Single row: emoji · text · CTA. */
.ad-fallback-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  height: 50px;
  padding: 0 .8rem;
  text-align: left;
  font-size: .85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ad-fallback-compact .ad-fb-emoji {
  display: inline;
  font-size: 1.35rem;
  margin: 0;
  flex: 0 0 auto;
}
.ad-fallback-compact .ad-fb-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-fallback-compact .ad-fb-text strong {
  font: 700 .9rem "Raleway", sans-serif;
  color: inherit;
}
.ad-fallback-compact .ad-fb-sub {
  display: inline;
  margin: 0;
  opacity: .85;
  font-weight: 400;
  font-size: .82rem;
}
.ad-fallback-compact .ad-fb-cta {
  flex: 0 0 auto;
  padding: .3rem .7rem;
  font-size: .78rem;
  background: transparent;
  border: 1.5px solid currentColor;
}
@media (max-width: 480px) {
  /* Hide the subhead on very narrow phones so headline + CTA still fit */
  .ad-fallback-compact .ad-fb-sub { display: none; }
}

/* Drop-target hover state for tool textareas */
.tool-textarea.file-drop-hover {
  outline: 2px dashed var(--c-primary);
  outline-offset: -4px;
  background: var(--c-bg-soft);
}

/* ========== HEADER ========== */
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease;
  will-change: transform;
}
/* Hide-on-scroll-down state (toggled by JS on mobile only). */
.site-header.is-hidden { transform: translateY(-100%); }
/* Desktop header: logo on its own row at the top, nav justified across the full width below it. */
.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  flex-wrap: nowrap;
}
.site-header .logo { align-self: flex-start; }
.logo img { display: block; max-width: 100%; height: auto; max-height: 56px; }
.primary-nav { width: 100%; }
.primary-nav > ul {
  display: flex;
  justify-content: space-between;   /* stretch nav items across full width */
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.primary-nav > ul > li { flex: 0 0 auto; }

.primary-nav > ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
}
.primary-nav a {
  font: 700 .95rem/1 "Raleway", sans-serif;
  color: var(--c-text); padding: .6rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav > ul > li { position: relative; }
.primary-nav li.current > a, .primary-nav > ul > li > a:hover {
  color: var(--c-primary-dark); border-bottom-color: var(--c-primary); text-decoration: none;
}
.primary-nav li.has-dropdown > a::after {
  content: " ▾"; font-size: .75em; color: var(--c-text-muted);
}
.primary-nav .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .4rem 0; margin: 0;
  list-style: none; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.primary-nav .has-dropdown:hover > .dropdown,
.primary-nav .has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .dropdown li { padding: 0; }
.primary-nav .dropdown a {
  display: block; padding: .55rem 1rem; font-weight: 500;
  border-bottom: 0; color: var(--c-text);
}
.primary-nav .dropdown a:hover { background: var(--c-bg-soft); color: var(--c-primary-dark); }
.nav-toggle { display: none; cursor: pointer; font-size: 1.5rem; padding: .25rem .5rem; line-height: 1; }
.nav-toggle-icon-close { display: none; }
.nav-toggle-icon-open { display: inline-block; }
/* When menu is open, swap ☰ → × */
.primary-nav input:checked ~ .nav-toggle .nav-toggle-icon-open { display: none; }
.primary-nav input:checked ~ .nav-toggle .nav-toggle-icon-close { display: inline-block; font-size: 1.9rem; line-height: .8; }
@media (max-width: 900px) {
  /* Mobile: revert to single-row header (logo left, hamburger right) */
  .site-header { padding: 6px 0; }
  .site-header .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .site-header .logo { align-self: auto; }
  /* Smaller logo on mobile so the header takes less vertical space.
     Explicit height + width:auto so the natural 300x49 ratio is preserved
     instead of stretching width to natural 300 while height clamps to 36. */
  .site-header .logo img { height: 36px; width: auto; max-width: 100%; max-height: 36px; }
  .nav-toggle { display: inline-block; }
  .primary-nav { position: static; width: auto; }

  /* Menu = full-screen scrollable overlay flush below the sticky header.
     Top offset uses --header-h CSS var (set by tiny inline JS in base.html so
     it always matches the actual rendered header height — logo scale, OS
     font size, and browser chrome can shift it). Falls back to 60px without JS.
     overscroll-behavior:contain stops scroll-chaining so touch swipes stay
     inside the menu and don't bleed through to the page behind. */
  .primary-nav > ul {
    display: none;
    position: fixed;
    top: var(--header-h, 60px); left: 0; right: 0; bottom: 0;
    height: calc(100vh - var(--header-h, 60px));
    height: calc(100dvh - var(--header-h, 60px)); /* iOS dynamic viewport */
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: .5rem 1rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .primary-nav input:checked ~ ul { display: flex; }
  /* When menu is open: lock body scroll so background can't move on touch.
     :has() supported in all modern browsers; pre-:has() browsers fall back
     gracefully (background still scrolls but menu still usable). */
  html:has(#nav-toggle:checked),
  html:has(#nav-toggle:checked) body { overflow: hidden; height: 100%; }
  .primary-nav > ul > li { width: 100%; flex-shrink: 0; }

  /* Mobile menu order — reorder via flex `order` (desktop DOM order is kept):
       1. Word Counter   2. Character Counter   3. Tools   4. Stylized Text
       5. Case           6. Utilities           7. Typing Test
       8. Guides         9. Blog                10. More
     The DOM order on desktop keeps Typing Test at position 3 (high-priority
     surface action). On phones, the heavy tool dropdowns come first; Typing
     Test moves below them since it's a sub-category like Guides. */
  .primary-nav > ul > li:nth-child(1) { order: 1; }   /* Word Counter      */
  .primary-nav > ul > li:nth-child(2) { order: 2; }   /* Character Counter */
  .primary-nav > ul > li:nth-child(3) { order: 8; }   /* Typing Test       */
  .primary-nav > ul > li:nth-child(4) { order: 3; }   /* Tools             */
  .primary-nav > ul > li:nth-child(5) { order: 4; }   /* Stylized Text     */
  .primary-nav > ul > li:nth-child(6) { order: 5; }   /* Case              */
  .primary-nav > ul > li:nth-child(7) { order: 6; }   /* Utilities         */
  .primary-nav > ul > li:nth-child(8) { order: 7; }   /* Translators (NEW) */
  .primary-nav > ul > li:nth-child(9) { order: 9; }   /* Guides            */
  .primary-nav > ul > li:nth-child(10){ order: 10; }  /* Blog              */
  .primary-nav > ul > li:nth-child(11){ order: 11; }  /* More              */
  .primary-nav input:checked ~ ul { display: flex; }
  .primary-nav > ul > li { border-top: 1px solid var(--c-border); }
  .primary-nav > ul > li:first-child { border-top: 0; }
  /* Bigger tap-friendly items on mobile (≥44px tap target, larger font) */
  .primary-nav > ul > li > a {
    display: block;
    padding: 1rem .5rem;
    font-size: 1.05rem;
    line-height: 1.3;
    min-height: 44px;
  }
  /* On mobile: dropdowns become inline expanded sublists */
  .primary-nav .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: .25rem 0 .6rem;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
    margin: .25rem -.25rem .5rem;
  }
  .primary-nav .dropdown a {
    padding: .85rem 1rem;
    font-size: 1rem;
    line-height: 1.3;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
  .primary-nav li.has-dropdown > a::after { content: ""; }
}

/* ========== LAYOUT ========== */
.site-main { padding: 2rem 0 3rem; }
.layout {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

/* ========== TOOL PANE ========== */
.tool-pane {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.tool-pane h1 { margin-top: 0; }
.tagline { color: var(--c-text-muted); margin: -.4rem 0 1rem; }

.tool-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--c-border);
  margin-bottom: 1rem;
}
.tool-toolbar .sep { flex: 1; }
.tool-toolbar button, .tool-toolbar .file-pick {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  color: var(--c-text); cursor: pointer;
  padding: .5rem .9rem; border-radius: var(--radius);
  font: 600 .85rem/1 "Raleway", sans-serif;
}
.tool-toolbar button:hover, .tool-toolbar .file-pick:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.tool-toolbar input[type=file] { display: none; }

.tool-textarea {
  width: 100%; min-height: 320px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1rem;
  font: 16px/1.6 "PT Sans", monospace;
  resize: vertical;
}
.tool-textarea:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }

.tool-detail { margin-top: 1rem; border-top: 1px solid var(--c-border); padding-top: 1rem; }
.tool-detail summary { cursor: pointer; font-weight: 700; color: var(--c-primary-dark); }

.tool-form { display: flex; gap: .5rem; margin: 1rem 0; }
.tool-form input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); font: 1rem "PT Sans", sans-serif; text-transform: uppercase; }
.tool-form button { background: var(--c-primary-dark); color: #fff; border: 0; padding: 0 1.4rem; border-radius: var(--radius); font: 700 .9rem "Raleway", sans-serif; cursor: pointer; }

/* ========== SIDEBAR / WIDGETS ========== */
.sidebar-col .widget {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-col .widget h3 {
  font-size: 1.05rem; margin: 0 0 .6rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--c-primary);
  color: var(--c-primary-dark);
}
.results-grid { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; margin: 0; font-size: .92rem; }
.results-grid dt { color: var(--c-text-muted); }
.results-grid dd { margin: 0; font-weight: 700; color: var(--c-primary-dark); font-variant-numeric: tabular-nums; }
.results-grid.two-col { grid-template-columns: 1fr auto; }

.recent-posts ul { list-style: none; padding: 0; margin: 0; }
.recent-posts li { padding: .55rem 0; border-bottom: 1px dashed var(--c-border); display: grid; grid-template-columns: 64px 1fr; gap: .6rem; align-items: center; }
.recent-posts li:last-child { border-bottom: 0; }
.recent-posts img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; }
.recent-posts .cat { display: block; font-size: .75rem; color: var(--c-text-muted); margin-top: .15rem; }

.sidebar-link-list { list-style: none; padding: 0; margin: 0; }
.sidebar-link-list li { padding: .35rem 0; border-bottom: 1px dashed var(--c-border); }
.sidebar-link-list li:last-child { border-bottom: 0; }
.sidebar-link-list a { color: var(--c-primary-dark); font-size: .92rem; }
.sidebar-link-list a:hover { color: var(--c-primary); }

/* ========== POST GRID ========== */
.archive-header { margin-bottom: 1.5rem; }
.archive-header h1 { margin: 0; }
.post-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.post-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card .thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card .meta { display: flex; justify-content: space-between; padding: .7rem 1rem 0; font-size: .8rem; color: var(--c-text-muted); }
.post-card .meta .cat { color: var(--c-primary-dark); font-weight: 700; }
.post-card h2 { font-size: 1.1rem; margin: .5rem 1rem; line-height: 1.3; }
.post-card h2 a { color: var(--c-text); }
.post-card h2 a:hover { color: var(--c-primary-dark); }
.post-card .excerpt { margin: 0 1rem 1rem; color: var(--c-text-soft); font-size: .9rem; }
.badge { display: inline-block; padding: 2px 8px; font-size: .72rem; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge.sponsored { background: #fff7e0; color: #8a6d00; border: 1px solid #f0d97f; margin: 0 1rem 1rem; align-self: flex-start; }

/* ========== SINGLE POST ========== */
.single-post { background: var(--c-bg); padding: 0; }
.breadcrumbs { font-size: .85rem; color: var(--c-text-muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--c-text-muted); }
.single-post h1 { margin-top: .3rem; }
.post-meta { color: var(--c-text-muted); font-size: .9rem; margin: 0 0 1.5rem; }
.post-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); }
.post-body { font-size: 1.05rem; line-height: 1.75; }
.post-body h2, .post-body h3 { margin-top: 2rem; }
.post-body img { border-radius: var(--radius); margin: 1rem 0; }
.post-body p { margin: .9em 0; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body code { background: var(--c-bg-alt); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
.post-body blockquote {
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg-soft);
  margin: 1.4em 0; padding: .6em 1em;
}

.disclosure {
  margin-top: 2rem; padding: 1rem 1.2rem;
  background: #fff7e0; border: 1px solid #f0d97f; border-radius: var(--radius);
  font-size: .9rem;
}

.related-posts { margin-top: 3rem; }
.related-posts h2 { border-bottom: 2px solid var(--c-primary); padding-bottom: .4rem; }
.related-grid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.related-grid li img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); margin-bottom: .4rem; }

/* ========== FOOTER ========== */
.site-footer {
  background: var(--c-primary-dark); color: #d9eaf2;
  padding: 2.5rem 0 1.5rem; margin-top: 3rem;
  font-size: .85rem;
}
.footer-cols {
  display: grid;
  gap: 1.5rem 1.2rem;
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .footer-cols { grid-template-columns: 1fr; } }

.footer-col h4 {
  font: 700 .85rem/1.2 "Raleway", sans-serif;
  color: #fff;
  margin: 0 0 .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .3rem;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
}
.footer-col li { margin: .35rem 0; }
.footer-col a {
  color: #d9eaf2;
  font-size: .82rem;
  line-height: 1.4;
  text-decoration: none;
}
.footer-col a:hover { color: var(--c-primary); text-decoration: underline; }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
  text-align: center;
}
.copyright { margin: 0 0 .3rem; opacity: .8; }
.footer-tagline { margin: 0; opacity: .65; font-size: .8rem; }

/* ========== STATIC PAGES ========== */
.static-page { background: var(--c-bg); padding: 1rem 0; }
.static-page h1 { margin-top: 0; font-size: 2rem; }
.static-page > .tagline { font-size: 1.05rem; }
.static-page .post-body { font-size: 1rem; line-height: 1.7; }
.static-page .post-body h1 { font-size: 1.5rem; margin-top: 2rem; color: var(--c-primary-dark); }
.static-page .post-body h2 { font-size: 1.4rem; margin-top: 1.8rem; }
.static-page .post-body h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.static-page .post-body h4 { font-size: 1.05rem; margin-top: 1.2rem; }
.static-page .post-body p { margin: .9em 0; }
.static-page .post-body ul, .static-page .post-body ol { padding-left: 1.4em; }
.static-page .post-body li { margin: .25em 0; }
.static-page .post-body a { color: var(--c-primary-dark); }
.static-page .post-body a:hover { color: var(--c-primary); }
.static-page .post-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.static-page .post-body table { border-collapse: collapse; margin: 1rem 0; }
.static-page .post-body table td, .static-page .post-body table th {
  padding: .5rem .8rem; border: 1px solid var(--c-border);
}
.page-body { margin-top: 1.5rem; }

/* ========== TOOL-SPECIFIC ========== */
.pomo-display { font: 700 5rem/1 "Raleway", sans-serif; text-align: center; margin: 2rem 0; color: var(--c-primary-dark); }
.pomo-controls, .pomo-modes { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.pomo-controls button, .pomo-modes button { padding: .6rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-soft); cursor: pointer; font: 600 .9rem "Raleway", sans-serif; }
.pomo-modes button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.mindmap-canvas { min-height: 500px; border: 2px dashed var(--c-border); border-radius: var(--radius); display: grid; place-items: center; color: var(--c-text-muted); }
.typing-prompt { background: var(--c-bg-soft); padding: 1rem; border-radius: var(--radius); margin: 1rem 0; line-height: 1.8; min-height: 80px; }
.typing-stats { display: flex; justify-content: space-between; padding: 1rem 0; font-weight: 700; color: var(--c-primary-dark); }

.kw-list { padding-left: 1.4em; column-count: 2; column-gap: 1.5rem; font-size: .95rem; }
.kw-list li { margin: .15rem 0; break-inside: avoid; }
.kw-list .density { color: var(--c-text-muted); margin-left: .3rem; }

/* ========== TOOL ARTICLE (the SEO copy below each tool) ========== */
.tool-article {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
  font-size: 1rem;
  line-height: 1.7;
}
.tool-article h2 {
  font-size: 1.5rem;
  margin: 2rem 0 .8rem;
  scroll-margin-top: 80px;
}
.tool-article h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.tool-article p { margin: .9em 0; }
.tool-article ul, .tool-article ol { padding-left: 1.4em; }
.tool-article li { margin: .25em 0; }
.tool-article code { background: var(--c-bg-alt); padding: 1px 5px; border-radius: 3px; font-size: .92em; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .95rem;
}
.data-table th, .data-table td {
  padding: .5rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.data-table thead { background: var(--c-bg-soft); }
.data-table th { font-family: "Raleway", sans-serif; color: var(--c-primary-dark); }

.faq-block { margin-top: 2rem; }
.faq-block h2 { border-top: 2px solid var(--c-primary); padding-top: 1.2rem; }
.faq-item {
  border-bottom: 1px solid var(--c-border);
  padding: .8rem 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  color: var(--c-primary-dark);
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
.faq-item summary::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--c-primary);
  width: 1.2rem; text-align: center;
  transition: transform .15s;
}
.faq-item[open] summary::before { content: "−"; }
.faq-answer { padding: .5rem 0 .3rem 1.5rem; color: var(--c-text-soft); }

.hub-callout {
  margin: 2rem 0;
  padding: 1rem 1.2rem;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius);
  font-size: .95rem;
}
.hub-callout strong { color: var(--c-primary-dark); }

.hub-header { margin-bottom: 1.5rem; }
.hub-header h1 { margin: 0; }
.hub-tagline { color: var(--c-text-muted); font-size: 1.1rem; margin: .4rem 0 0; }
.hub-intro { font-size: 1.05rem; line-height: 1.7; }
.hub-spokes { margin: 2.5rem 0; }
.hub-spokes h2 { border-top: 2px solid var(--c-primary); padding-top: 1rem; }
.hub-spokes .post-card h3 a { color: var(--c-text); }
.hub-spokes .post-card h3 a:hover { color: var(--c-primary-dark); }

.faq-topic-list, .glossary-list { padding-left: 0; list-style: none; }
.faq-topic-list li, .glossary-list li { padding: .5rem 0; border-bottom: 1px dashed var(--c-border); }
.glossary-letter h2 { border-bottom: 2px solid var(--c-primary); padding-bottom: .3rem; margin-top: 2rem; }
.related-faqs, .related-terms { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.muted { color: var(--c-text-muted); }

.embed-snippet-block {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
}
.embed-snippet-block summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--c-primary-dark);
}
.embed-snippet-block textarea {
  width: 100%;
  margin-top: .4rem;
  padding: .8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: 12px/1.5 Menlo, Consolas, monospace;
  resize: vertical;
}
.embed-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--c-primary);
}
.embed-section h2 { margin-top: 0; color: var(--c-primary-dark); }
.embed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  .embed-grid { grid-template-columns: 1fr 1fr; }
}
.embed-preview-line { margin: .8rem 0 .3rem; font-size: .85rem; color: var(--c-text-muted); }

.calc-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.calc-form-grid label {
  display: flex; flex-direction: column; font: 600 .85rem "Raleway", sans-serif;
  color: var(--c-text-soft);
}
.calc-form-grid input, .calc-form-grid select {
  margin-top: .3rem; padding: .55rem .75rem;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font: 1rem "PT Sans", sans-serif;
}
.result-block {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin: 1rem 0;
}
.result-num {
  display: block;
  font: 700 3rem/1 "Raleway", sans-serif;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.result-label {
  display: block; margin-top: .3rem;
  color: var(--c-text-muted); font-weight: 600;
}

/* ========== SOCIAL SHARE BAR ========== */
.share-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: .35rem 0;
}
.share-bar .share-label {
  font: 600 .82rem/1 "Raleway", sans-serif;
  color: var(--c-text-muted);
  margin-right: .25rem;
}
.share-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .65rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font: 600 .78rem/1 "Raleway", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.share-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); text-decoration: none; }
.share-btn svg { display: block; flex-shrink: 0; }
.share-bar-compact { gap: .25rem; }
.share-bar-compact .share-btn { padding: .35rem; }
.share-bar-compact .share-btn span { display: none; }
.share-btn.share-fb:hover { background: #1877F2; border-color: #1877F2; }
.share-btn.share-x:hover  { background: #000;     border-color: #000; }
.share-btn.share-wa:hover { background: #25D366; border-color: #25D366; }
.share-btn.share-tg:hover { background: #229ED9; border-color: #229ED9; }
.share-btn.share-rd:hover { background: #FF4500; border-color: #FF4500; }
.share-btn.share-pn:hover { background: #BD081C; border-color: #BD081C; }
.share-btn.share-li:hover { background: #0077B5; border-color: #0077B5; }
.share-btn.share-em:hover { background: #54595f; border-color: #54595f; }
.share-btn.share-copied   { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Container for tool-pane top-right share (desktop) */
.tool-share-corner {
  position: absolute; top: .9rem; right: .9rem;
  z-index: 2;
}
.tool-pane { position: relative; }

/* On mobile, the corner widget moves to sit BETWEEN the toolbar buttons
   and the textarea — never above the H1. We achieve this with flex `order`:
   default-order children (h1, tagline, toolbar) flow first; share-corner
   sits at order 100; textarea + counters + details go last at order 200+. */
@media (max-width: 700px) {
  .tool-pane { display: flex; flex-direction: column; min-width: 0; }
  /* Prevent flex/grid children from refusing to shrink below their content width
     (the cause of right-edge overflow on narrow phones). */
  .tool-pane > * { min-width: 0; max-width: 100%; }
  .calc-form-grid, .calc-form-grid label,
  .calc-form-grid input, .calc-form-grid select { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .tool-share-corner {
    position: static;
    order: 100;
    margin: 0 0 .55rem;
    justify-content: flex-end;
    display: flex;
  }
  .tool-pane > .tool-textarea,
  .tool-pane > textarea,
  .tool-pane > .inline-counts,
  .tool-pane > .extra-inputs,
  .tool-pane > .tool-detail,
  .tool-pane > details,
  .tool-pane > .typing-prompt,
  .tool-pane > .typing-stats,
  .tool-pane > .typing-input { order: 200; }
  /* Anything appearing after the textarea (e.g. results panes) goes last */
  .tool-pane > .results,
  .tool-pane > .tool-output { order: 300; }

  /* Article (labelled) share-bar: hide labels on phones, since space is tight */
  .share-bar:not(.share-bar-compact) .share-btn span { display: none; }
  .share-bar:not(.share-bar-compact) .share-btn { padding: .4rem; }
  .share-bar:not(.share-bar-compact) .share-label { display: none; }
}

/* ========== INLINE LIVE COUNTS (Word Counter) ========== */
.inline-counts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
  margin: 1rem 0 .25rem;
  padding: .75rem 1rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-align: center;
}
.inline-counts > div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
}
.inline-counts .num {
  font: 700 1.05rem/1.1 "Raleway", sans-serif;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.inline-counts .lbl {
  font-size: .72rem; color: var(--c-text-muted);
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 700px) {
  .inline-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .55rem .65rem; }
  .inline-counts .num { font-size: .95rem; }
  .inline-counts .lbl { font-size: .68rem; }
}

/* ========== DURATION-CHOICE LIST (typing-test variants) ========== */
.duration-choices {
  list-style: none; padding: 0; margin: .75rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .4rem;
}
.duration-choices li { margin: 0; }
.duration-choices a {
  display: block; padding: .55rem .8rem;
  background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-primary-dark); font-weight: 600; font-size: .92rem;
  text-decoration: none;
}
.duration-choices a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.duration-choices a.is-current { background: var(--c-primary-dark); color: #fff; border-color: var(--c-primary-dark); cursor: default; }

/* ========== MOBILE TYPOGRAPHY + SPACING ========== */
@media (max-width: 700px) {
  /* Smaller, tighter headings on phones */
  h1 { font-size: 1.55rem; line-height: 1.2; margin: .4em 0 .5em; }
  h2 { font-size: 1.2rem; line-height: 1.25; margin: 1.1em 0 .4em; }
  h3 { font-size: 1.05rem; margin: .9em 0 .35em; }
  body { font-size: 15px; line-height: 1.55; }
  .tagline { font-size: .92rem; margin: -.2rem 0 .8rem; }

  /* Tighten breadcrumbs and kill empty top whitespace */
  .site-main { padding: .75rem 0 2rem; }
  .breadcrumbs, nav.breadcrumbs, .crumbs {
    font-size: .78rem; padding: 0; margin: 0 0 .55rem;
    color: var(--c-text-muted);
  }
  .tool-pane { padding: 1rem; }
  .tool-pane h1 { margin-top: 0; }
  .tool-textarea { min-height: 220px; padding: .75rem; font-size: 15px; }
  .layout { gap: 1.25rem; }
  .post-grid { grid-template-columns: 1fr; gap: .5rem; }

  /* Mobile-friendly tool toolbar — switch to a 4-column grid:
       Row 1: [ UPPER ] [ lower ] [ Title ] [ Sentence ]   — case actions
       Row 2: [ Clear ]      [ Copy ]      [ Upload .txt ] — doc actions
     The .sep flex-spacer is hidden; the file-pick spans 2 cols so the
     last row balances visually. */
  .tool-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
  }
  .tool-toolbar .sep { display: none; }
  .tool-toolbar button,
  .tool-toolbar .file-pick {
    padding: .55rem .25rem;
    font-size: .78rem;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Doc-action buttons span more on the second row */
  .tool-toolbar [data-action="clear"] { grid-column: span 1; }
  .tool-toolbar [data-action="copy"]  { grid-column: span 1; }
  .tool-toolbar .file-pick            { grid-column: span 2; }
}

/* ---------- AdSense ad slots ---------- */
/* Reserve space to prevent layout shift; keep neutral so unfilled units are invisible. */
.ad-slot {
  display: block;
  margin: 1.25rem 0;
  padding: 8px 0;
  text-align: center;
  overflow: hidden;
  min-height: 100px;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
}
.ad-slot ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
  position: relative;
}
/* Lock the iframe AdSense injects so it never overflows its slot. */
.ad-slot iframe { max-width: 100% !important; width: 100% !important; }

/* Mobile-only fixed 320x50 top banner. Hard-clipped wrapper so even if
   AdSense JS poked at the inner ins/iframe, nothing escapes 50px. */
.mobile-banner-clip {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
  margin: .25rem 0 .5rem;
  text-align: center;
  display: block;
}
.mobile-banner-clip ins.adsbygoogle,
.mobile-banner-clip ins.adsbygoogle iframe { max-height: 50px !important; }
@media (min-width: 1024px) {
  .mobile-banner-clip { display: none; }
}

/* Top leaderboard: desktop only (≥1024px). Hidden on phones AND tablets.
   Uses display:none + visibility:hidden + height:0 so AdSense doesn't load
   the slot when it's hidden — better for both cache compatibility and
   AdSense viewability metrics. */
.ad-top-leaderboard { min-height: 90px; margin: .25rem 0 1rem; }
@media (max-width: 1023px) {
  .ad-top-leaderboard { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
}

/* Below-tool: universal, after the tool body. Generous reserved height. */
.ad-below-tool { min-height: 250px; margin: 1.5rem 0; }

/* Footer leaderboard: above site footer */
.ad-footer-leaderboard { min-height: 90px; margin: 1.25rem 0; }

/* In-article fluid ad inside blog body */
.ad-in-article { min-height: 200px; margin: 1.25rem auto; }

/* Multiplex / matched-content grid at bottom of tool pages */
.ad-multiplex { min-height: 280px; margin: 1.5rem 0; }

/* ============================== TIER A: "More transforms" dropdown ============================== */
details.more-tx { display: inline-block; position: relative; }
details.more-tx > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  padding: .45rem .8rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: 600 .85rem "PT Sans", sans-serif;
  user-select: none;
}
details.more-tx > summary::-webkit-details-marker { display: none; }
details.more-tx[open] > summary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
details.more-tx > .more-tx-grid {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .35rem;
  padding: .65rem;
  min-width: 320px;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
details.more-tx > .more-tx-grid button {
  padding: .5rem .65rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: 500 .85rem "PT Sans", sans-serif;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
details.more-tx > .more-tx-grid button:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
@media (max-width: 700px) {
  details.more-tx > .more-tx-grid {
    grid-template-columns: repeat(2, 1fr);
    min-width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    left: -.5rem;
  }
}

/* ============================== TIER B: "Try with your text" tile launcher ============================== */
.tool-launcher {
  margin: 1.5rem 0 .5rem;
  padding: 1.1rem 1.1rem 1.25rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
}
.tool-launcher-title {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  color: var(--c-primary-dark);
}
.tool-launcher-sub {
  margin: 0 0 .85rem;
  font-size: .85rem;
  color: var(--c-text-soft);
}
.tool-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .55rem;
}
.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .65rem .5rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-text);
  transition: transform .12s, border-color .12s, box-shadow .12s;
  text-align: center;
}
.tool-tile:hover {
  transform: translateY(-1px);
  border-color: var(--c-primary);
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  text-decoration: none;
  color: var(--c-primary-dark);
}
.tool-tile .emoji {
  display: block;
  font: 700 1.35rem/1 "Raleway", sans-serif;
  color: var(--c-primary-dark);
  min-height: 1.4em;
}
.tool-tile .name {
  display: block;
  font: 600 .78rem/1.2 "Raleway", sans-serif;
  color: var(--c-text-soft);
}
@media (max-width: 700px) {
  .tool-launcher { padding: .85rem .85rem 1rem; margin: 1rem 0; }
  .tool-launcher-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .4rem; }
  .tool-tile { padding: .5rem .25rem; }
  .tool-tile .emoji { font-size: 1.15rem; }
  .tool-tile .name { font-size: .7rem; }
}

/* ============================== TIER D: Sidebar tool tiles ============================== */
.widget.sidebar-tool-tiles { padding: 0; background: transparent; border: 0; }
.widget.sidebar-tool-tiles h3 {
  font: 700 .92rem/1 "Raleway", sans-serif;
  color: var(--c-text-soft);
  margin: 0 0 .6rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sidebar-tool-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.sidebar-tool-tiles-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .55rem .4rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-text);
  transition: border-color .12s, background .12s;
  text-align: center;
}
.sidebar-tool-tiles-grid a:hover {
  background: var(--c-bg-soft); border-color: var(--c-primary);
  text-decoration: none; color: var(--c-primary-dark);
}
.sidebar-tool-tiles-grid a .emoji { font: 700 1.05rem/1 "Raleway", sans-serif; color: var(--c-primary-dark); }
.sidebar-tool-tiles-grid a .name  { font: 600 .72rem/1.2 "Raleway", sans-serif; color: var(--c-text-soft); }

/* ============================== Featured-tool sidebar widget ==============================
   Higher-specificity selectors so we beat `.sidebar-col .widget` defaults (white bg,
   colored h3 with bottom border). Using `.widget.widget-featured` and direct child
   combinators keeps everything tight against accidental inheritance. */
.widget.widget-featured {
  position: relative;
  padding: 1.25rem 1.1rem 1.15rem;
  background: linear-gradient(140deg, #1e3a8a 0%, #115172 55%, #0c3a52 100%) !important;
  color: #fff;
  border: 0 !important;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}
.widget.widget-featured::before {
  /* Soft accent glow in the top-right */
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 70%; height: 140%;
  background: radial-gradient(closest-side, rgba(251,191,36,.22), transparent);
  pointer-events: none;
}
.widget.widget-featured .widget-featured-badge {
  display: inline-block;
  background: #fbbf24;
  color: #111827;
  font: 700 .68rem/1 "Raleway", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 3px;
  margin-bottom: .75rem;
  position: relative;
}
.sidebar-col .widget.widget-featured h3,
.widget.widget-featured h3 {
  color: #ffffff !important;
  margin: 0 0 .45rem !important;
  font: 700 1.1rem/1.3 "Raleway", sans-serif !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
}
.widget.widget-featured p {
  color: rgba(255,255,255,.95) !important;
  font-size: .88rem;
  line-height: 1.45;
  margin: 0 0 .95rem !important;
  position: relative;
}
.widget.widget-featured .btn-featured {
  display: inline-block;
  padding: .55rem 1rem;
  background: #fbbf24 !important;
  color: #111827 !important;
  font: 700 .88rem/1 "Raleway", sans-serif !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: transform .12s, box-shadow .12s, background .12s;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.widget.widget-featured .btn-featured:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  color: #111827 !important;
}
@media (max-width: 700px) {
  .widget.widget-featured { padding: 1rem .9rem; }
  .widget.widget-featured h3 { font-size: 1rem !important; }
  .widget.widget-featured p { font-size: .85rem !important; }
}

/* ============================== Per-tool unique-content sections ============================== */
.step-list { padding-left: 1.25rem; margin: .8rem 0 1.4rem; }
.step-list > li { padding: .3rem 0; line-height: 1.55; }
.step-list > li::marker { color: var(--c-primary-dark); font-weight: 700; }

dl.edge-list {
  display: grid; grid-template-columns: minmax(140px, 1fr) 2.5fr;
  gap: .5rem 1rem; margin: .8rem 0 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
dl.edge-list dt { font-weight: 700; color: var(--c-primary-dark); }
dl.edge-list dd { margin: 0; color: var(--c-text); }
@media (max-width: 640px) {
  dl.edge-list { grid-template-columns: 1fr; gap: .25rem 0; }
  dl.edge-list dt { margin-top: .55rem; }
}

ul.pro-tips {
  list-style: none; padding: 0; margin: .8rem 0 1.4rem;
}
ul.pro-tips > li {
  position: relative; padding: .55rem .8rem .55rem 2.2rem;
  margin-bottom: .35rem;
  background: linear-gradient(90deg, #fffbeb 0%, transparent 100%);
  border-left: 3px solid #fbbf24;
  border-radius: 0 var(--radius) var(--radius) 0;
}
ul.pro-tips > li::before {
  content: "💡"; position: absolute; left: .65rem; top: .5rem;
}

table.comparison-table {
  width: 100%; border-collapse: collapse; margin: .8rem 0 1.4rem;
  font-size: .92rem;
}
table.comparison-table th, table.comparison-table td {
  padding: .55rem .65rem; text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
table.comparison-table thead th {
  background: var(--c-primary-dark); color: #fff;
  font-weight: 700; font-size: .85rem;
}
table.comparison-table thead th:first-child { width: 25%; }
table.comparison-table tbody th { background: var(--c-bg-soft); font-weight: 600; }
table.comparison-table tbody tr:hover td { background: #fafafa; }
@media (max-width: 700px) {
  table.comparison-table { display: block; overflow-x: auto; }
  table.comparison-table th, table.comparison-table td { padding: .45rem .55rem; font-size: .85rem; }
}