/*
 * Script & Tools — 2026 Redesign
 * Design tokens + component styles ported from the approved homepage/blog/about/contact
 * artifacts. Every component rule is scoped under .stt26 so it only affects the specific
 * header, footer, and homepage regions that opt into it — nothing else on the site is
 * touched. The :root token blocks are intentionally left global (the custom property names
 * are unique to this design system, e.g. --accent/--ink/--surface, and don't collide with
 * the theme's existing --primary/--tf-* tokens).
 */

  /* ===== Tokens =====
     Locked palette per CLAUDE.md "LOCKED COLOR PALETTE" — do not change without
     updating that file too. Roles without an explicit value in that palette
     (surface-alt, accent-strong, accent-soft) are derived from the given colors
     and noted inline. */
  :root{
    --bg:#f0f0fa;
    --surface:#ffffff;
    --surface-alt:#f5f5f5;
    --surface-raised:#ffffff;
    --ink:#1a1a2e;
    --ink-soft:#4a4a6a;
    --ink-faint:#6c757d;
    --border:#e0e0ee;
    --border-strong:#d0d0e0;
    --accent:#3b5bdb;
    --accent-strong:#304bb4; /* derived: ~18% darker #3b5bdb, for hover — not in the given palette */
    --accent-soft:rgba(59,91,219,.08); /* derived: low-opacity accent tint, for hover backgrounds — not in the given palette */
    --accent-ink:#ffffff;
    --star:#F59E0B;
    --danger:#DC2626;
    --code-str:#7c6bdb;
    /* Search-results type colors — Tool reuses the locked accent (same brand
       blue); Project/Game/Blog aren't covered by the locked palette, so they
       keep the reference's own distinct colors for visual differentiation. */
    --type-tool:var(--accent);
    --type-tool-soft:var(--accent-soft);
    --type-project:#0D9488;
    --type-project-soft:#ECFDF9;
    --type-game:#EA580C;
    --type-game-soft:#FFF3EC;
    --type-blog:#2563EB;
    --type-blog-soft:#EFF4FF;
    --shadow:0 1px 2px rgba(26,26,46,.05), 0 12px 28px rgba(26,26,46,.08);
    --shadow-sm:0 1px 2px rgba(26,26,46,.08);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --focus-ring:0 0 0 3px rgba(59,91,219,.35);
    --font-display:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    color-scheme: light;
  }
  /* Dark-mode token overrides intentionally removed — CLAUDE.md's locked palette
     says "Background is always LIGHT... Never invert." The site no longer
     switches to a dark scheme, whether by OS preference (prefers-color-scheme)
     or an explicit data-theme="dark" attribute. */

  .stt26 *,.stt26 *::before,.stt26 *::after{ box-sizing:border-box; }
  .stt26 html{ -webkit-text-size-adjust:100%; }
  /* .stt26 is a <div> INSIDE <body> — "html body" here targets the real
     document elements, not something scoped under .stt26 (a ".stt26 html"/
     ".stt26 body" selector can never match anything, since html/body are
     never descendants of a div). This was silently dead before, so nothing
     was actually clipping horizontal overflow anywhere on the site — the
     off-canvas mobile nav sits at translateX(100%) (real geometry just past
     the right edge) and any stray section slightly wider than the viewport
     (e.g. a two-column grid at an in-between breakpoint) showed up as a
     real horizontal scrollbar instead of being clipped.
     Using "clip" rather than "hidden" on purpose: setting overflow-x to
     anything other than "visible" forces the browser to also compute
     overflow-y as "auto" (an axis can't stay visible while the other
     isn't scrollable), which turns <body> into its own independent
     scroll container instead of letting the viewport handle scrolling —
     that produced a visible gap under the sticky header. "clip" prevents
     the stray horizontal scroll without creating a scroll container at
     all, so the sticky header's positioning is unaffected. */
  html, body{ overflow-x:clip; }
  .stt26 body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .stt26 img,.stt26 svg{ display:block; max-width:100%; }
  .stt26 a{ color:inherit; }
  .stt26 button{ font-family:inherit; }
  .stt26 ul{ margin:0; padding:0; list-style:none; }
  .stt26 h1,.stt26 h2,.stt26 h3{ margin:0; font-family:var(--font-display); text-wrap:balance; }
  .stt26 p{ margin:0; }
  .stt26 :focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:6px; }
  /* Inputs that live inside a custom "pill" control get their focus ring from the
     parent (:focus-within below) — suppress the default one so it doesn't double up. */
  .stt26 .hero-search-field input:focus-visible,
  .stt26 .nav-search input:focus-visible,
  .stt26 .search-field input:focus-visible{
    box-shadow:none;
  }
  @media (prefers-reduced-motion: reduce){
    .stt26 *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }

  .stt26 .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .stt26 .icon{ width:20px; height:20px; flex:none; }
  .stt26 .icon-sm{ width:16px; height:16px; }

  /* ===== Skip link ===== */
  .stt26 .skip-link{
    position:absolute; left:12px; top:-48px; z-index:200;
    background:var(--accent); color:var(--accent-ink);
    padding:10px 16px; border-radius:var(--radius-sm);
    font-weight:600; font-size:.875rem; transition:top .15s ease;
  }
  .stt26 .skip-link:focus{ top:12px; }

  /* ===== Header ===== (rewritten to the exact spec: plain nav links, inline
     search box, dark Sign Up button — no mega-panel, no search modal) */
  .stt26 .site-header{
    position:sticky; top:0; z-index:100;
    background:var(--surface); /* #ffffff */
    border-bottom:1px solid var(--border); /* #e0e0ee */
  }
  .stt26 .site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
  .stt26 .header-inner{
    max-width:1240px; margin:0 auto;
    height:68px;
    display:flex; align-items:center; gap:20px;
    padding:0 24px;
  }
  .stt26 .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:var(--ink);
    flex:none;
  }
  .stt26 .brand-mark{
    width:34px; height:34px; border-radius:9px;
    background:var(--accent); color:var(--accent-ink); /* #3b5bdb bg, #ffffff text */
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:600; font-size:.95rem;
    letter-spacing:-0.02em;
  }
  .stt26 .brand-word{
    font-family:var(--font-display); font-weight:700; color:var(--ink); /* #1a1a2e bold */
    font-size:1.05rem; letter-spacing:-0.01em; white-space:nowrap;
  }

  .stt26 .primary-nav{ display:flex; align-items:center; gap:2px; flex:1; }
  .stt26 .nav-item{ position:relative; }
  .stt26 .nav-link,.stt26  .nav-trigger{
    display:flex; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer;
    color:var(--ink); text-decoration:none; /* normal = #1a1a2e */
    font-size:.9rem; font-weight:500; white-space:nowrap;
    padding:8px 10px; border-radius:var(--radius-sm);
    transition:color .12s ease;
  }
  .stt26 .nav-link:hover,.stt26  .nav-trigger:hover,
  .stt26 .nav-trigger[aria-expanded="true"]{ color:var(--accent); } /* hover/open = #3b5bdb */
  .stt26 .nav-link.current-menu-item,.stt26  .nav-trigger.current-menu-item{ color:var(--accent); } /* active = #3b5bdb */
  .stt26 .nav-trigger .chevron{ transition:transform .15s ease; }
  .stt26 .nav-trigger[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

  .stt26 .dropdown-panel{
    position:absolute; top:calc(100% + 8px); left:0; min-width:200px;
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-md); box-shadow:var(--shadow); padding:6px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s;
    z-index:110;
  }
  .stt26 .nav-item.is-open .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .stt26 .dropdown-link{
    display:block; padding:9px 12px; border-radius:var(--radius-sm);
    font-size:.87rem; text-decoration:none; color:var(--ink);
  }
  .stt26 .dropdown-link:hover{ background:var(--surface-alt); color:var(--accent); }
  .stt26 .dropdown-link i{ width:16px; text-align:center; margin-right:2px; color:var(--ink-faint); }

  /* ===== "Tools" mega menu — icons + descriptions per category, plus a
     "Popular right now" sidebar. Special-cased in STT_Nav_Walker (only the
     "Tools" trigger gets this; every other dropdown, e.g. "More", keeps the
     plain .dropdown-panel list above). ===== */
  .stt26 .mega-panel{
    position:absolute; top:calc(100% + 8px); left:0;
    width:min(760px, calc(100vw - 48px));
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow);
    padding:20px; display:grid; grid-template-columns:1.6fr 1fr; gap:24px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s;
    z-index:110;
  }
  .stt26 .nav-item.is-open .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .stt26 .mega-cats{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
  .stt26 .mega-cat{
    display:flex; align-items:flex-start; gap:10px;
    padding:9px 8px; border-radius:var(--radius-sm);
    text-decoration:none; color:var(--ink);
  }
  .stt26 .mega-cat:hover{ background:var(--accent-soft); }
  .stt26 .mega-cat .icon{ color:var(--accent); margin-top:1px; }
  .stt26 .mega-cat-name{ font-size:.87rem; font-weight:600; display:block; }
  .stt26 .mega-cat-desc{ font-size:.76rem; color:var(--ink-faint); display:block; margin-top:1px; }
  .stt26 .mega-aside{ border-left:1px solid var(--border); padding-left:20px; display:flex; flex-direction:column; gap:10px; }
  .stt26 .mega-aside-title{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .stt26 .mega-popular-link{
    display:flex; align-items:center; justify-content:space-between;
    font-size:.85rem; text-decoration:none; color:var(--ink-soft);
    padding:5px 0;
  }
  .stt26 .mega-popular-link:hover{ color:var(--accent); }
  .stt26 .mega-popular-link svg{ width:16px; height:16px; flex:none; }
  .stt26 .mega-view-all{
    margin-top:auto; display:flex; align-items:center; gap:6px;
    font-size:.85rem; font-weight:600; color:var(--accent); text-decoration:none;
  }
  .stt26 .mega-view-all:hover{ color:var(--accent-strong); }
  .stt26 .mega-view-all svg{ width:16px; height:16px; flex:none; }
  @media (max-width:640px){
    .stt26 .mega-panel{ width:calc(100vw - 32px); grid-template-columns:1fr; }
    .stt26 .mega-aside{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:14px; }
  }

  /* User menu dropdown (logged-in state) sits at the far right of the header
     — .dropdown-panel's default left:0 would push it off-screen there, so
     anchor it to the right edge of its trigger instead. */
  .stt26 .dropdown-panel--end{ left:auto; right:0; min-width:180px; }

  .stt26 .header-actions{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }
  .stt26 .nav-search{
    display:flex; align-items:center; gap:8px; position:relative;
    background:var(--surface-alt); /* #f5f5f5 */ border:1px solid var(--border); /* #e0e0ee */
    border-radius:var(--radius-sm); padding:0 8px 0 12px; height:38px; width:190px;
    transition:border-color .12s ease, width .15s ease;
  }
  .stt26 .nav-search-suggestions{
    position:absolute; top:calc(100% + 8px); left:0; min-width:320px;
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-md); box-shadow:var(--shadow);
    padding:6px; text-align:left; z-index:120;
  }
  .stt26 .nav-search-suggestions[hidden]{ display:none; }
  .stt26 .nav-search:focus-within{ border-color:var(--accent); }
  .stt26 .nav-search .icon{ color:var(--ink-faint); flex:none; }
  .stt26 .nav-search input{
    flex:1; min-width:0; border:none; outline:none; background:none;
    color:var(--ink-faint); /* #6c757d */ font-family:var(--font-body); font-size:.85rem;
  }
  .stt26 .nav-search input::placeholder{ color:var(--ink-faint); }
  .stt26 .kbd-hint{
    font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); /* #6c757d */
    background:var(--border); /* #e0e0ee */ border-radius:5px; padding:1px 6px;
    display:inline-flex; align-items:center; flex:none;
  }
  .stt26 .icon-btn{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:var(--radius-sm);
    background:none; border:1px solid transparent; color:var(--ink-soft);
    cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease;
  }
  .stt26 .icon-btn:hover{ background:var(--surface-alt); color:var(--ink); }

  .stt26 .auth-links{ display:flex; align-items:center; gap:10px; }
  .stt26 .link-btn{
    font-size:.875rem; font-weight:500; text-decoration:none; color:var(--ink); /* #1a1a2e */
    padding:8px 10px; border-radius:var(--radius-sm);
  }
  .stt26 .link-btn:hover{ color:var(--accent); }
  .stt26 .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:.875rem;
    padding:9px 16px; border-radius:var(--radius-sm);
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:background .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
  }
  .stt26 .btn:active{ transform:translateY(1px); }
  .stt26 .btn[hidden]{ display:none; } /* .btn's own `display` would otherwise beat the UA [hidden] rule */
  .stt26 .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .stt26 .btn-primary:hover{ background:var(--accent-strong); }
  .stt26 .btn-ghost{ background:transparent; border-color:var(--border); color:var(--ink); }
  .stt26 .btn-ghost:hover{ border-color:var(--border-strong); background:var(--surface-alt); }
  .stt26 .btn-sm{ padding:7px 13px; font-size:.82rem; }
  .stt26 .btn-signup{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--ink); /* #1a1a2e */ color:var(--surface); /* #ffffff */
    font-family:var(--font-body); font-weight:600; font-size:.85rem;
    padding:8px 16px; border-radius:6px; text-decoration:none; border:none; cursor:pointer;
    transition:opacity .12s ease;
  }
  .stt26 .btn-signup:hover{ opacity:.88; }

  .stt26 .hamburger{ display:none; }

  /* ===== Mobile nav drawer ===== */
  .stt26 .mobile-nav{
    position:fixed; inset:0; z-index:190; background:var(--surface);
    transform:translateX(100%); transition:transform .22s ease;
    display:flex; flex-direction:column;
  }
  .stt26 .mobile-nav.is-open{ transform:translateX(0); }
  .stt26 .mobile-nav-header{
    display:flex; align-items:center; justify-content:space-between;
    height:68px; padding:0 20px; border-bottom:1px solid var(--border); flex:none;
  }
  .stt26 .mobile-nav-body{ padding:16px 20px 32px; overflow-y:auto; flex:1; }
  .stt26 .mobile-link{
    display:block; padding:15px 2px; font-size:1rem; font-weight:600; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--border);
  }
  .stt26 .mobile-accordion{ border-bottom:1px solid var(--border); }
  .stt26 .mobile-accordion summary{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:15px 2px; font-size:1rem; font-weight:600; color:var(--ink);
    cursor:pointer; list-style:none;
  }
  .stt26 .mobile-accordion summary::-webkit-details-marker{ display:none; }
  .stt26 .mobile-accordion .chevron{ transition:transform .15s ease; color:var(--ink-faint); }
  .stt26 .mobile-accordion[open] .chevron{ transform:rotate(180deg); }
  .stt26 .mobile-sublink{
    display:block; padding:11px 2px 11px 14px; font-size:.9rem; color:var(--ink-soft); text-decoration:none;
  }
  .stt26 .mobile-auth{ display:flex; gap:10px; margin-top:18px; }
  .stt26 .mobile-auth .btn,.stt26  .mobile-auth .btn-signup{ flex:1; }

  /* ===== Hero ===== */
  .stt26 main{ display:block; }
  .stt26 .hero{
    padding:52px 24px 40px;
    background:
      radial-gradient(620px 360px at 96% 4%, var(--accent-soft), transparent 68%),
      var(--bg);
  }
  .stt26 .hero-inner{
    max-width:1240px; margin:0 auto;
    display:flex; flex-direction:column; gap:32px;
  }
  .stt26 .hero-content{
    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
    gap:18px; max-width:640px;
  }
  .stt26 .hero-demo{ display:none; }
  @media (min-width:1024px){
    .stt26 .hero-inner{ display:grid; grid-template-columns:1.08fr 0.92fr; align-items:center; gap:52px; }
    .stt26 .hero-content{ max-width:560px; }
    .stt26 .hero-demo{ display:block; }
  }

  .stt26 .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em;
    color:var(--accent-strong); background:var(--accent-soft);
    border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding:6px 12px; border-radius:999px;
  }
  .stt26 .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

  .stt26 .hero h1{
    font-size:clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height:1.1; letter-spacing:-0.015em; font-weight:700;
    max-width:15ch;
  }
  .stt26 .hero h1 .hl{ color:var(--accent); }

  .stt26 .hero-sub{
    font-size:clamp(1rem, .95rem + .2vw, 1.1rem);
    line-height:1.6; color:var(--ink-soft); max-width:52ch;
  }
  .stt26 .hero-sub b{ color:var(--ink); font-weight:600; }

  .stt26 .hero-search{ width:100%; margin-top:4px; position:relative; }
  .stt26 .hero-search-field{
    display:flex; align-items:center; gap:10px;
    background:var(--surface); border:1.5px solid var(--border-strong);
    border-radius:var(--radius-lg); padding:6px 8px 6px 18px;
    box-shadow:var(--shadow-sm); transition:border-color .12s ease, box-shadow .12s ease;
  }
  .stt26 .hero-search-field:focus-within{ border-color:var(--accent); box-shadow:var(--focus-ring); }
  .stt26 .hero-search-field .icon{ color:var(--ink-faint); flex:none; }
  .stt26 .hero-search-icon-btn{
    display:flex; align-items:center; justify-content:center; flex:none;
    background:none; border:none; padding:2px; margin:0; cursor:pointer;
    border-radius:var(--radius-sm);
  }
  .stt26 .hero-search-icon-btn:hover .icon,
  .stt26 .hero-search-icon-btn:focus-visible .icon{ color:var(--accent-strong); }
  .stt26 .hero-search-icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .stt26 .hero-search-field input{
    flex:1; border:none; outline:none; background:none; color:var(--ink);
    font-family:var(--font-body); font-size:1rem; min-width:0;
  }
  .stt26 .hero-search-field input::placeholder{ color:var(--ink-faint); }
  .stt26 .hero-search-field .btn{ flex:none; }
  .stt26 .hero-search-submit svg{ display:none; }

  /* Tablet + mobile: the leading icon button and a full "Search" text
     button both fighting the input for space is what made the input look
     like it had disappeared — free up that room. The leading icon is only
     hidden when there's also a real submit button right after it (the
     category-page search has no trailing button, so its icon stays put
     as the only way to submit there). */
  @media (max-width:1023px){
    .stt26 .hero-search-field:has(.btn) .hero-search-icon-btn{ display:none; }
    .stt26 .hero-search-field{ padding:4px 4px 4px 16px; gap:6px; }
    .stt26 .hero-search-field .btn{ padding:9px 14px; font-size:.85rem; }
  }
  @media (max-width:480px){
    .stt26 .hero-search-submit{
      width:40px; height:40px; padding:0; border-radius:50%; flex:none;
      display:flex; align-items:center; justify-content:center;
    }
    .stt26 .hero-search-submit .btn-label{ display:none; }
    .stt26 .hero-search-submit svg{ display:block; width:18px; height:18px; }
  }

  .stt26 .hero-suggestions{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-md); box-shadow:var(--shadow);
    padding:6px; text-align:left; z-index:20;
  }
  .stt26 .hero-suggestions[hidden]{ display:none; }
  .stt26 .hero-suggestions .palette-result{ padding:9px 12px; }

  /* ===== Search suggestion rows — shared by the header search dropdown
     and the homepage hero search dropdown. ===== */
  .stt26 .palette-result,
  .stt26 .hero-suggestions,
  .stt26 .nav-search-suggestions{ min-width:0; max-width:100%; overflow:hidden; }
  .stt26 .palette-result{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer;
    color:var(--ink); text-decoration:none;
  }
  .stt26 .palette-result:hover, .stt26 .palette-result.is-active{ background:var(--accent-soft); }
  .stt26 .palette-result-name{
    font-size:.9rem; font-weight:500; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .stt26 .palette-result-cat{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); flex:none; margin-left:8px; }
  .stt26 .palette-empty{ padding:20px 14px; text-align:center; color:var(--ink-faint); font-size:.85rem; }

  .stt26 .hero-status{ min-height:20px; font-size:.85rem; color:var(--accent-strong); text-align:left; padding-left:4px; }
  :root[data-theme="dark"] .stt26 .hero-status{ color:var(--accent); }

  .stt26 .chip-row{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; margin-top:2px;
    width:100%; max-width:100%;
  }
  .stt26 .chip-row .chip-label{ font-size:.82rem; color:var(--ink-faint); margin-right:2px; }
  .stt26 .chip{
    font-family:var(--font-body); font-size:.82rem; font-weight:500;
    background:var(--surface); border:1px solid var(--border);
    color:var(--ink-soft); padding:7px 13px; border-radius:999px;
    cursor:pointer; white-space:nowrap; transition:border-color .12s ease, color .12s ease, background .12s ease;
  }
  .stt26 .chip:hover{ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); }

  .stt26 .hero-ctas{ display:flex; align-items:center; gap:20px; margin-top:6px; flex-wrap:wrap; justify-content:flex-start; }
  .stt26 .text-link{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:var(--ink-soft); text-decoration:none; }
  .stt26 .text-link:hover{ color:var(--accent); }

  .stt26 .credibility-strip{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
    gap:8px 0; margin-top:16px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
  }
  .stt26 .credibility-strip li{ display:flex; align-items:center; gap:7px; padding:0 16px; }
  .stt26 .credibility-strip li:first-child{ padding-left:0; }
  .stt26 .credibility-strip li:not(:last-child){ border-right:1px solid var(--border); }
  .stt26 .credibility-strip .icon{ color:var(--accent); }
  .stt26 .credibility-strip b{ color:var(--ink); font-weight:600; }

  /* ===== Hero demo: an auto-rotating showcase, not decoration — each slide
     shows a real slice of the site (Tools, then Projects & Scripts, then
     Games) so the visual weight on the right of the hero keeps doing content
     work instead of just sitting there as one static screenshot. ===== */
  .stt26 .hero-slides{ position:relative; }
  .stt26 .hero-slide[hidden]{ display:none; }
  .stt26 .hero-slide{ animation:hero-slide-in .35s ease; }
  @keyframes hero-slide-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .stt26 .hero-slide{ animation:none; } }

  .stt26 .hero-demo-caption{
    font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em;
    color:var(--ink-faint); margin-bottom:10px; text-transform:uppercase;
  }
  .stt26 .terminal-card{
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  }
  .stt26 .terminal-bar{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--surface-alt); border-bottom:1px solid var(--border);
  }
  .stt26 .terminal-dots{ display:flex; gap:6px; flex:none; }
  .stt26 .terminal-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); display:block; }
  .stt26 .terminal-tab{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); }
  .stt26 .terminal-body{
    padding:26px 24px; min-height:300px;
    display:flex; align-items:center; justify-content:center;
  }
  .stt26 .terminal-code{
    margin:0; font-family:var(--font-mono); font-size:.85rem; line-height:1.75;
    color:var(--ink); white-space:pre-wrap; word-break:break-word; width:100%;
  }
  .stt26 .tok-key{ color:var(--ink); }
  .stt26 .tok-str{ color:var(--code-str); }
  .stt26 .tok-punc{ color:var(--ink-faint); }
  .stt26 .terminal-footer{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border-top:1px solid var(--border); background:var(--surface);
  }
  .stt26 .terminal-hint{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); }

  /* --- Slide 2 body: a small downloadable-files list --- */
  .stt26 .hero-file-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
  .stt26 .hero-file-row{
    display:flex; align-items:center; gap:10px; min-width:0;
    padding:8px 10px; border-radius:var(--radius-sm); background:var(--surface-alt);
  }
  .stt26 .hero-file-row .icon-sm{ color:var(--ink-faint); flex:none; }
  .stt26 .hero-file-row.is-highlight{ background:var(--accent-soft); }
  .stt26 .hero-file-row.is-highlight .icon-sm{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .hero-file-row.is-highlight .icon-sm{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .hero-file-row.is-highlight .icon-sm{ color:var(--accent); } }
  .stt26 .hero-file-name{
    flex:1; min-width:0; font-family:var(--font-mono); font-size:.8rem; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .stt26 .hero-file-size{ flex:none; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); }

  /* --- Slide 3 body: a taller arcade preview + a stacked score readout --- */
  .stt26 .hero-game-preview{ display:flex; align-items:center; gap:26px; width:100%; }
  .stt26 .hero-game-preview .preview-snake--lg{ flex:none; width:min(248px, 50%); max-width:none; }
  .stt26 .hero-game-stats{ display:flex; flex-direction:column; gap:18px; }
  .stt26 .hero-game-meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); }
  .stt26 .hero-game-meta b{ display:block; margin-top:3px; font-family:var(--font-body); font-size:1.05rem; font-weight:700; color:var(--ink); }

  /* --- Dot indicators: no left/right arrows, tap a dot to jump to a slide --- */
  .stt26 .hero-slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .stt26 .hero-slider-dot{
    width:8px; height:8px; padding:0; border-radius:999px; border:none;
    background:var(--border-strong); cursor:pointer;
    transition:background .15s ease, width .15s ease;
  }
  .stt26 .hero-slider-dot:hover{ background:var(--ink-faint); }
  .stt26 .hero-slider-dot.is-active{ width:22px; background:var(--accent); }
  .stt26 .hero-slider-dot.is-active:hover{ background:var(--accent-strong); }

  /* ===== Section 2: Popular Tools directory =====
     A real, crawlable tool index — not a teaser. Every row exists in the HTML
     regardless of the active filter or load-more state; JS only toggles a
     `hidden` attribute, so the full content is present for search engines
     and for anyone browsing with JavaScript off. */
  .stt26 .section-container{ max-width:1240px; margin:0 auto; padding:0 24px; }
  .stt26 .tools-section{
    border-top:1px solid var(--border); background:var(--bg);
    padding:56px 24px 64px;
  }
  .stt26 .section-head{ max-width:640px; }
  .stt26 .section-eyebrow{
    font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--accent-strong); display:block; margin-bottom:8px;
  }
  :root[data-theme="dark"] .stt26 .section-eyebrow{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .section-eyebrow{ color:var(--accent); } }
  .stt26 .tools-section h2{
    font-size:clamp(1.5rem, 1.3rem + 1vw, 1.9rem); font-weight:700; letter-spacing:-0.01em;
  }
  .stt26 .section-sub{ color:var(--ink-soft); font-size:.98rem; line-height:1.6; margin-top:10px; }

  .stt26 .tool-tabs{
    display:flex; gap:22px; margin-top:28px; border-bottom:1px solid var(--border);
    overflow-x:auto; scrollbar-width:none;
  }
  .stt26 .tool-tabs::-webkit-scrollbar{ display:none; }
  .stt26 .tool-tab{
    position:relative; flex:none; background:none; border:none; cursor:pointer;
    font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--ink-faint);
    padding:10px 2px 12px; white-space:nowrap; transition:color .12s ease;
  }
  .stt26 .tool-tab:hover{ color:var(--ink); }
  .stt26 .tool-tab::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:transparent; border-radius:2px; transition:background .12s ease;
  }
  .stt26 .tool-tab.is-active{ color:var(--ink); }
  .stt26 .tool-tab.is-active::after{ background:var(--accent); }

  /* Cards show a small functional mock of the tool's actual output — built from
     CSS/SVG, not screenshots — so people can tell what a tool does before
     opening it, instead of guessing from an icon + name alone. */
  .stt26 .tool-list{
    display:grid; grid-template-columns:1fr; gap:20px; margin-top:28px;
  }
  @media (min-width:640px){ .stt26 .tool-list{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1024px){ .stt26 .tool-list{ grid-template-columns:repeat(3,1fr); } }

  .stt26 .tool-card{
    position:relative; display:flex; flex-direction:column;
    background:var(--surface-raised); border:1px solid var(--border);
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  }
  .stt26 .tool-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
  .stt26 .tool-card[hidden]{ display:none; }

  .stt26 .tool-preview{
    height:108px; flex:none; background:var(--surface-alt);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; padding:14px 16px;
    position:relative; overflow:hidden;
  }
  .stt26 .tool-preview > i{ font-size:1.9rem; color:var(--accent); }
  .stt26 .tool-preview-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Fallback preview for tools without a bespoke mini-mockup below — a
     large centered icon on a soft accent badge reads at a glance, instead
     of the small plain glyph this used to be. */
  .stt26 .tool-preview-icon{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  }
  .stt26 .tool-preview-icon-badge{
    width:56px; height:56px; border-radius:var(--radius-md); flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent-strong); font-size:1.6rem;
  }

  .stt26 .tool-card-body{ padding:16px; display:flex; flex-direction:column; gap:7px; flex:1; }
  .stt26 .tool-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .stt26 .tool-row-cat{
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .stt26 .tool-row-stats{ display:inline-flex; align-items:center; gap:10px; flex:none; }
  .stt26 .tool-row-rating{
    display:inline-flex; align-items:center; gap:3px;
    font-size:.76rem; font-weight:600; color:var(--ink-soft);
  }
  .stt26 .tool-row-rating .icon-sm{ width:12px; height:12px; color:var(--star); }
  .stt26 .tool-row-plays{
    display:inline-flex; align-items:center; gap:3px; flex:none;
    font-size:.76rem; font-weight:600; color:var(--ink-soft);
  }
  .stt26 .tool-row-plays .icon-sm{ width:12px; height:12px; color:var(--ink-faint); }
  .stt26 .tool-card h3{ font-family:var(--font-body); font-size:.98rem; font-weight:600; line-height:1.3; }
  .stt26 .tool-card h3 a{ text-decoration:none; color:var(--ink); }
  .stt26 .tool-card h3 a::after{ content:""; position:absolute; inset:0; } /* whole card is clickable via one real link */
  .stt26 .tool-card:hover h3 a{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .tool-card:hover h3 a{ color:var(--accent); }
  .stt26 .tool-card p{ font-size:.84rem; color:var(--ink-soft); line-height:1.5; }

  /* --- Sponsored tool card: same size and card chrome as every organic
     listing (so it never reads as an intrusive ad unit), just a tinted
     preview panel and a small disclosure tag — this is what a paying tool
     maker's "Featured Placement" (see the Submit Your Tool section) actually
     looks like once it lands in the grid, and it's always sorted first. --- */
  .stt26 .tool-card.is-sponsored{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .stt26 .tool-card.is-sponsored .tool-preview{ background:var(--accent-soft); }
  .stt26 .tool-sponsored-tag{
    position:absolute; top:10px; left:10px; z-index:1;
    font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--accent-ink); background:var(--accent); padding:3px 9px; border-radius:999px;
  }

  /* --- Reusable preview widgets, one small visual language per tool type --- */
  .stt26 .preview-code{ font-family:var(--font-mono); font-size:.78rem; line-height:1.65; color:var(--ink); }
  .stt26 .preview-serp{ display:flex; flex-direction:column; gap:3px; width:100%; }
  .stt26 .preview-serp-url{ font-size:.7rem; color:var(--ink-faint); }
  .stt26 .preview-serp-title{ font-size:.84rem; font-weight:600; color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .preview-serp-title{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-serp-title{ color:var(--accent); } }
  .stt26 .preview-serp-desc{ font-size:.7rem; color:var(--ink-soft); line-height:1.4; }

  .stt26 .preview-shrink{ display:flex; align-items:center; gap:10px; }
  .stt26 .preview-shrink .box{ border-radius:6px; flex:none; }
  .stt26 .preview-shrink .box.big{ width:44px; height:44px; background:var(--border-strong); }
  .stt26 .preview-shrink .box.small{ width:24px; height:24px; background:var(--accent); align-self:flex-end; }
  .stt26 .preview-shrink .icon-sm{ color:var(--ink-faint); flex:none; }
  .stt26 .preview-shrink .stat{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); }
  .stt26 .preview-shrink .stat b{ display:block; color:var(--ink); font-family:var(--font-body); font-size:.78rem; }

  .stt26 .preview-video{
    width:76px; aspect-ratio:16/10; background:#1b1e22; border-radius:8px; flex:none;
    display:flex; align-items:center; justify-content:center; position:relative;
  }
  .stt26 .preview-video .play{ width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff; }
  .stt26 .preview-video .badge{
    position:absolute; bottom:4px; right:5px; font-family:var(--font-mono); font-size:.58rem;
    color:#fff; background:rgba(0,0,0,.6); padding:1px 4px; border-radius:3px;
  }
  .stt26 .preview-video-meta{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); }
  .stt26 .preview-video-meta b{ display:block; color:var(--ink); font-family:var(--font-body); font-size:.78rem; font-weight:600; }
  .stt26 .preview-row{ display:flex; align-items:center; gap:12px; width:100%; }

  .stt26 .preview-password{ display:flex; flex-direction:column; gap:9px; width:100%; }
  .stt26 .preview-password-value{ font-family:var(--font-mono); font-size:.92rem; letter-spacing:.03em; color:var(--ink); }
  .stt26 .preview-password-bar{ display:flex; gap:3px; }
  .stt26 .preview-password-bar span{ height:4px; flex:1; border-radius:2px; background:var(--accent); }
  .stt26 .preview-password-bar span.dim{ background:var(--border); }
  .stt26 .preview-password-label{ font-family:var(--font-mono); font-size:.64rem; color:var(--accent-strong); letter-spacing:.04em; text-transform:uppercase; }
  :root[data-theme="dark"] .stt26 .preview-password-label{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-password-label{ color:var(--accent); } }

  .stt26 .preview-qr{
    display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
    width:62px; height:62px; gap:1px; background:#fff; padding:5px; border-radius:6px;
    border:1px solid var(--border); flex:none;
  }
  .stt26 .preview-qr span{ background:transparent; border-radius:1px; }
  .stt26 .preview-qr span.on{ background:#171A1C; }

  .stt26 .preview-gauge{ width:100%; display:flex; flex-direction:column; gap:8px; }
  .stt26 .preview-gauge-track{ position:relative; height:6px; border-radius:3px; background:var(--border); }
  .stt26 .preview-gauge-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--accent); }
  .stt26 .preview-gauge-pointer{
    position:absolute; top:-4px; width:2px; height:14px; background:var(--ink);
    border-radius:1px; transform:translateX(-1px);
  }
  .stt26 .preview-gauge-labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); }
  .stt26 .preview-gauge-labels .value{ color:var(--ink); font-weight:600; font-family:var(--font-body); font-size:.8rem; }

  .stt26 .preview-split{ width:100%; display:flex; flex-direction:column; gap:9px; }
  .stt26 .preview-split-bar{ display:flex; height:10px; border-radius:5px; overflow:hidden; }
  .stt26 .preview-split-bar .p{ background:var(--accent); }
  .stt26 .preview-split-bar .i{ background:var(--border-strong); }
  .stt26 .preview-split-legend{ display:flex; gap:14px; font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); }
  .stt26 .preview-split-legend .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
  .stt26 .preview-split-legend .dot.p{ background:var(--accent); }
  .stt26 .preview-split-legend .dot.i{ background:var(--border-strong); }

  .stt26 .preview-text{ width:100%; display:flex; flex-direction:column; gap:6px; }
  .stt26 .preview-text .line{ display:block; height:6px; border-radius:3px; background:var(--border); }
  .stt26 .preview-badge{
    align-self:flex-start; font-family:var(--font-mono); font-size:.64rem; color:var(--accent-strong);
    background:var(--accent-soft); padding:2px 7px; border-radius:999px; margin-top:2px;
  }
  :root[data-theme="dark"] .stt26 .preview-badge{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-badge{ color:var(--accent); } }

  .stt26 .preview-summarize{ display:flex; align-items:center; gap:10px; width:100%; }
  .stt26 .preview-summarize .lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
  .stt26 .preview-summarize .lines.after{ flex:none; width:38%; }
  .stt26 .preview-summarize .line{ display:block; height:6px; border-radius:3px; background:var(--border); }
  .stt26 .preview-summarize .lines.after .line{ background:var(--accent); }
  .stt26 .preview-summarize .icon-sm{ color:var(--ink-faint); flex:none; }

  .stt26 .preview-transform{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.8rem; }
  .stt26 .preview-transform .before{ color:var(--ink-soft); }
  .stt26 .preview-transform .after{ color:var(--accent-strong); font-weight:600; word-break:break-all; }
  :root[data-theme="dark"] .stt26 .preview-transform .after{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-transform .after{ color:var(--accent); } }
  .stt26 .preview-transform .icon-sm{ color:var(--ink-faint); flex:none; }

  .stt26 .preview-favicon{ display:flex; align-items:flex-end; gap:8px; }
  .stt26 .preview-favicon span{ background:var(--accent); border-radius:22%; flex:none; }

  .stt26 .tool-list-empty{
    padding:28px 2px; color:var(--ink-faint); font-size:.9rem;
  }

  .stt26 .tool-list-footer{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    margin-top:20px; padding-top:4px;
  }

  .stt26 .tools-secondary-link{
    margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
    font-size:.9rem; color:var(--ink-soft);
  }
  .stt26 .tools-secondary-link a{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-strong); font-weight:600; text-decoration:none; }
  :root[data-theme="dark"] .stt26 .tools-secondary-link a{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .tools-secondary-link a{ color:var(--accent); } }
  .stt26 .tools-secondary-link a:hover{ text-decoration:underline; }
  .stt26 .tools-secondary-link svg{ width:15px; height:15px; flex:none; }

  /* ===== Section band alternation (visual rhythm down the page) ===== */
  .stt26 .games-section{ background:var(--surface); }
  .stt26 .blog-section{ background:var(--bg); }

  /* ===== Projects & Scripts: compact editorial showcase (feature + 2 compact) =====
     Deliberately not the tool-list grid used elsewhere — this section reads as a
     curated preview of the library, not another full catalog, so it gets its own
     tighter composition and lighter metadata, and slightly less vertical padding
     to stay short relative to the sections around it. */
  .stt26 .projects-section{
    border-top:1px solid var(--border); background:var(--bg);
    padding:48px 24px 52px;
  }
  .stt26 .projects-section h2{ font-size:clamp(1.5rem, 1.3rem + 1vw, 1.9rem); font-weight:700; letter-spacing:-0.01em; }
  .stt26 .projects-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .stt26 .projects-head-copy{ max-width:560px; }
  .stt26 .projects-cta{ flex:none; display:inline-flex; align-items:center; gap:6px; }
  .stt26 .projects-cta svg{ transition:transform .15s ease; }
  .stt26 .projects-cta:hover svg{ transform:translateX(3px); }

  .stt26 .projects-showcase{
    display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-top:28px; align-items:stretch;
  }
  .stt26 .project-stack{ display:flex; flex-direction:column; gap:20px; }

  .stt26 .project-feature,.stt26  .project-compact{
    position:relative; display:flex; flex-direction:column;
    background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .stt26 .project-feature:hover,.stt26  .project-compact:hover{
    border-color:var(--border-strong); box-shadow:var(--shadow-sm); transform:translateY(-2px);
  }

  .stt26 .project-media{
    flex:none; border-bottom:1px solid var(--border); background:var(--surface-alt); overflow:hidden;
  }
  .stt26 .project-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .stt26 .project-media .project-media-fallback{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:var(--accent);
  }
  /* The feature card is stretched by the grid to match the height of the two
     stacked compact cards beside it — that slack should grow the screenshot
     (the dominant element), never open a gap in the text column. */
  .stt26 .project-feature .project-media{ aspect-ratio:16/10; flex:1 1 auto; }
  .stt26 .project-compact .project-media{ aspect-ratio:16/7.2; }

  .stt26 .project-info{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; }
  .stt26 .project-feature .project-info{ flex:none; }
  .stt26 .project-compact .project-info{ padding:14px 16px 15px; gap:4px; flex:1; }

  .stt26 .project-tag{
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .stt26 .project-feature h3{ font-family:var(--font-body); font-size:1.15rem; font-weight:600; margin-top:2px; letter-spacing:-0.01em; }
  .stt26 .project-compact h3{ font-family:var(--font-body); font-size:.95rem; font-weight:600; margin-top:1px; }
  .stt26 .project-feature h3 a,.stt26  .project-compact h3 a{ color:var(--ink); text-decoration:none; }
  .stt26 .project-feature h3 a::after,.stt26  .project-compact h3 a::after{ content:""; position:absolute; inset:0; }
  .stt26 .project-feature:hover h3 a,.stt26  .project-compact:hover h3 a{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .project-feature:hover h3 a, :root[data-theme="dark"] .stt26 .project-compact:hover h3 a{ color:var(--accent); }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .stt26 .project-feature:hover h3 a,
    :root:not([data-theme="light"]) .stt26 .project-compact:hover h3 a{ color:var(--accent); }
  }

  .stt26 .project-feature p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
  .stt26 .project-compact p{ font-size:.82rem; color:var(--ink-soft); line-height:1.5; }

  .stt26 .project-meta{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-faint); margin-top:1px; }
  .stt26 .project-meta .project-price{ font-weight:600; color:var(--ink-soft); }
  .stt26 .project-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); flex:none; }

  .stt26 .project-link{
    display:inline-flex; align-items:center; gap:5px; font-size:.84rem; font-weight:600;
    color:var(--accent-strong); margin-top:auto; padding-top:10px;
  }
  :root[data-theme="dark"] .stt26 .project-link{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .project-link{ color:var(--accent); } }
  .stt26 .project-link svg{ width:14px; height:14px; transition:transform .15s ease; }
  .stt26 .project-feature:hover .project-link svg,.stt26  .project-compact:hover .project-link svg{ transform:translateX(3px); }

  /* --- Preview mockups: same browser-frame grammar as the rest of the site,
     distinct interior composition per project so each reads as its own product --- */
  .stt26 .project-mock{ display:flex; flex-direction:column; width:100%; height:100%; }
  .stt26 .mock-bar{ display:flex; align-items:center; gap:5px; padding:7px 10px; background:var(--surface); border-bottom:1px solid var(--border); flex:none; }
  .stt26 .mock-bar span:not(.mock-url){ width:6px; height:6px; border-radius:50%; background:var(--border-strong); flex:none; }
  .stt26 .mock-url{ flex:1; height:11px; margin-left:6px; border-radius:4px; background:var(--surface-alt); }
  .stt26 .mock-body{ flex:1; padding:12px; display:flex; flex-direction:column; gap:9px; min-height:0; }

  .stt26 .mock-hero{
    position:relative; flex:1; min-height:0; border-radius:6px; background:var(--accent-soft);
    display:flex; flex-direction:column; justify-content:space-between; padding:10px;
  }
  .stt26 .mock-hero-title{ display:block; width:42%; height:8px; border-radius:3px; background:var(--accent-strong); opacity:.4; }
  .stt26 .mock-search{ display:block; width:58%; height:15px; border-radius:999px; background:var(--surface-raised); border:1px solid var(--border); }
  .stt26 .mock-listings{ display:flex; gap:7px; flex:none; }
  .stt26 .mock-listing{ flex:1; display:flex; flex-direction:column; gap:5px; }
  .stt26 .mock-thumb{ display:block; height:32px; border-radius:5px; background:var(--border-strong); opacity:.55; }
  .stt26 .mock-line{ display:block; height:5px; border-radius:3px; background:var(--border); }
  .stt26 .mock-line.short{ width:60%; }

  .stt26 .mock-doc{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; justify-content:center; }
  .stt26 .ai-mock .mock-line:last-child{ background:var(--accent); opacity:.65; width:70%; }
  .stt26 .mock-generate{ align-self:flex-end; width:60px; height:18px; border-radius:6px; background:var(--accent); flex:none; }

  .stt26 .mock-fields{ display:flex; gap:8px; flex:1; align-items:center; }
  .stt26 .mock-field{ flex:1; height:20px; border-radius:5px; background:var(--surface-alt); border:1px solid var(--border); }
  .stt26 .mock-cta{ align-self:flex-start; width:68px; height:20px; border-radius:6px; background:var(--accent); flex:none; }

  /* ===== Preview widgets: games ===== */
  .stt26 .preview-typing{ font-family:var(--font-mono); font-size:.82rem; line-height:1.6; }
  .stt26 .preview-typing .done{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .preview-typing .done{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-typing .done{ color:var(--accent); } }
  .stt26 .preview-typing .pending{ color:var(--ink-faint); }
  .stt26 .preview-typing .caret{
    display:inline-block; width:2px; height:13px; background:var(--ink);
    margin:0 1px -2px; animation:st-blink 1s step-end infinite;
  }
  @keyframes st-blink{ 50%{ opacity:0; } }

  .stt26 .preview-word-guess{ display:flex; flex-direction:column; gap:4px; }
  .stt26 .preview-word-guess .row{ display:flex; gap:4px; }
  .stt26 .preview-word-guess .cell{
    width:21px; height:21px; border-radius:4px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:.68rem; font-weight:600; color:#fff; flex:none;
  }
  .stt26 .preview-word-guess .cell.correct{ background:var(--accent); }
  .stt26 .preview-word-guess .cell.present{ background:var(--star); }
  .stt26 .preview-word-guess .cell.absent{ background:var(--border-strong); color:var(--ink-soft); }

  .stt26 .preview-snake{ display:grid; grid-template-columns:repeat(8,1fr); gap:3px; width:100%; max-width:160px; }
  .stt26 .preview-snake span{ aspect-ratio:1; border-radius:2px; background:var(--border); }
  .stt26 .preview-snake span.on{ background:var(--accent); border-radius:2px; }
  .stt26 .preview-snake span.food{ background:var(--star); border-radius:50%; }

  .stt26 .preview-target{ position:relative; width:64px; height:64px; margin:0 auto; flex:none; }
  .stt26 .preview-target .ring{ position:absolute; inset:0; border:2px solid var(--border-strong); border-radius:50%; }
  .stt26 .preview-target .ring.r2{ inset:12px; border-color:var(--accent); opacity:.55; }
  .stt26 .preview-target .ring.r3{ inset:24px; border-color:var(--accent); }
  .stt26 .preview-target .bullseye{ position:absolute; inset:29px; border-radius:50%; background:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .preview-target .bullseye{ background:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .preview-target .bullseye{ background:var(--accent); } }

  /* ===== Services / "Need Something Custom Built?" ===== */
  .stt26 .services-section{
    border-top:1px solid var(--border); background:var(--surface-alt);
    padding:56px 24px 64px;
  }
  .stt26 .services-section h2{ font-size:clamp(1.5rem, 1.3rem + 1vw, 1.9rem); font-weight:700; letter-spacing:-0.01em; }
  .stt26 .services-stats{ margin-top:24px; }
  .stt26 .service-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:32px; }
  @media (min-width:700px){ .stt26 .service-grid{ grid-template-columns:1fr 1fr; } }
  .stt26 .service-item{
    display:flex; gap:16px; padding:22px; background:var(--surface-raised);
    border:1px solid var(--border); border-radius:var(--radius-lg);
  }
  .stt26 .service-icon{
    flex:none; width:44px; height:44px; border-radius:var(--radius-sm);
    background:var(--accent-soft); color:var(--accent-strong);
    display:flex; align-items:center; justify-content:center;
  }
  :root[data-theme="dark"] .stt26 .service-icon{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .service-icon{ color:var(--accent); } }
  .stt26 .service-item h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; margin-bottom:5px; }
  .stt26 .service-item p{ font-size:.86rem; color:var(--ink-soft); line-height:1.55; margin-bottom:10px; }
  .stt26 .service-stack{ display:flex; flex-wrap:wrap; gap:6px; }
  .stt26 .service-stack span{
    font-family:var(--font-mono); font-size:.66rem; padding:2px 9px; border-radius:999px;
    background:var(--surface-alt); color:var(--ink-soft); border:1px solid var(--border);
  }
  .stt26 .service-item .service-stack span{ background:var(--bg); }
  .stt26 .services-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

  /* ===== Blog: even 3-up grid with full-bleed cover art =====
     The previous pass reused the Projects section's feature+compact
     composition, which just made two sections in a row look identical.
     This one gives Blog its own rhythm: three equal cards, and instead of
     a small icon floating alone on a flat tint, every cover is a full-bleed
     duotone gradient "photo" — a soft blurred glow, a large cropped ghost
     icon for depth, a frosted glass topic badge and a fine dot-grid texture
     layered together — so each article reads as a real, on-topic image
     rather than a logo in a circle. */
  .stt26 .blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:28px; }

  .stt26 .blog-post{
    position:relative; display:flex; flex-direction:column;
    background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .stt26 .blog-post:hover{ border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-3px); }

  .stt26 .blog-post-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-alt); border-bottom:1px solid var(--border); }
  .stt26 .blog-post-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .stt26 .blog-post-media .blog-cover-fallback{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:var(--accent);
  }

  .stt26 .blog-info{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }

  .stt26 .blog-meta{
    display:flex; align-items:center; gap:8px; font-family:var(--font-mono);
    font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  }
  .stt26 .blog-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); flex:none; }

  .stt26 .blog-post h3{ font-family:var(--font-body); font-size:1.03rem; font-weight:600; margin-top:2px; letter-spacing:-0.01em; }
  .stt26 .blog-post h3 a{ color:var(--ink); text-decoration:none; }
  .stt26 .blog-post h3 a::after{ content:""; position:absolute; inset:0; }
  .stt26 .blog-post:hover h3 a{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .blog-post:hover h3 a{ color:var(--accent); }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .stt26 .blog-post:hover h3 a{ color:var(--accent); }
  }

  .stt26 .blog-post p{ font-size:.86rem; color:var(--ink-soft); line-height:1.55; }

  .stt26 .blog-read{
    display:inline-flex; align-items:center; gap:5px; font-size:.84rem; font-weight:600;
    color:var(--accent-strong); margin-top:auto; padding-top:10px;
  }
  :root[data-theme="dark"] .stt26 .blog-read{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .blog-read{ color:var(--accent); } }
  .stt26 .blog-read svg{ width:14px; height:14px; transition:transform .15s ease; }
  .stt26 .blog-post:hover .blog-read svg{ transform:translateX(3px); }

  /* --- Cover art: layered gradient + glow + ghost icon + frosted badge,
     built entirely from CSS/SVG in the site's functional-mock grammar
     rather than a stock photo. --- */
  .stt26 .blog-cover{ position:absolute; inset:-6px; transition:transform .4s ease; }
  .stt26 .blog-post:hover .blog-cover{ transform:scale(1.06); }

  /* Real uploaded featured image (preferred) vs. a plain blank card when
     the post has none — instead of always drawing the decorative
     icon/gradient placeholder regardless of whether a real photo exists. */
  .stt26 .blog-cover-photo{ background:var(--surface-alt); overflow:hidden; }
  .stt26 .blog-cover-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .stt26 .blog-cover-blank{ background:var(--surface-alt); }

  .stt26 .blog-cover-pattern{
    position:absolute; inset:0; opacity:.35;
    background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
    background-size:16px 16px;
  }

  .stt26 .blog-cover-ghost{
    position:absolute; display:flex; align-items:center; justify-content:center;
    width:62%; aspect-ratio:1; right:-14%; bottom:-18%; opacity:.16;
  }
  .stt26 .blog-cover-ghost svg{ width:100%; height:100%; }

  .stt26 .blog-cover-badge{
    position:absolute; left:16px; bottom:16px; z-index:1;
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid color-mix(in srgb, var(--border-strong) 55%, transparent);
    box-shadow:var(--shadow-sm);
  }
  .stt26 .blog-cover-badge svg{ width:25px; height:25px; }

  .stt26 .blog-tag,.stt26  .blog-cover-sublabel{
    position:absolute; z-index:1; font-family:var(--font-mono); font-weight:700; letter-spacing:.05em;
    color:var(--ink); background:color-mix(in srgb, var(--bg) 62%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid color-mix(in srgb, var(--border-strong) 55%, transparent);
  }
  .stt26 .blog-tag{ top:14px; left:14px; font-size:.64rem; text-transform:uppercase; padding:6px 11px; border-radius:999px; }
  .stt26 .blog-cover-sublabel{ right:14px; bottom:14px; font-size:.62rem; color:var(--ink-soft); padding:4px 9px; border-radius:6px; }

  .stt26 .blog-cover-dev{ background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 30%, var(--surface-alt)) 0%, color-mix(in srgb, var(--accent-strong) 22%, var(--surface)) 100%); }
  .stt26 .blog-cover-dev .blog-cover-ghost,.stt26  .blog-cover-dev .blog-cover-badge svg{ color:var(--accent-strong); }
  :root[data-theme="dark"] .stt26 .blog-cover-dev .blog-cover-ghost, :root[data-theme="dark"] .stt26 .blog-cover-dev .blog-cover-badge svg{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .blog-cover-dev .blog-cover-ghost, :root:not([data-theme="light"]) .stt26 .blog-cover-dev .blog-cover-badge svg{ color:var(--accent); } }

  .stt26 .blog-cover-vitals{ background:linear-gradient(155deg, color-mix(in srgb, var(--star) 28%, var(--surface-alt)) 0%, color-mix(in srgb, var(--star) 17%, var(--surface)) 100%); }
  .stt26 .blog-cover-vitals .blog-cover-ghost,.stt26  .blog-cover-vitals .blog-cover-badge svg{ color:var(--star); }

  .stt26 .blog-cover-format{ background:linear-gradient(155deg, color-mix(in srgb, var(--ink-faint) 32%, var(--surface-alt)) 0%, color-mix(in srgb, var(--ink-faint) 16%, var(--surface)) 100%); }
  .stt26 .blog-cover-format .blog-cover-ghost,.stt26  .blog-cover-format .blog-cover-badge svg{ color:var(--ink-soft); }

  /* ===== Submit Your Tool: monetization funnel for outside tool makers =====
     A free tier keeps the directory growing (and gives the site fresh content
     for SEO) while the featured tier is the actual revenue line — priced by
     conversation rather than a listed number, so it reads as "talk to a
     person" rather than a self-serve checkout. Laid out like a two-tier
     pricing table (a pattern people already know how to scan) with the paid
     card visually promoted, the same nudge every SaaS pricing page uses. */
  .stt26 .submit-section{ background:var(--surface-alt); }
  .stt26 .submit-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; align-items:stretch;
  }
  .stt26 .submit-card{
    position:relative; display:flex; flex-direction:column;
    background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px 26px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .stt26 .submit-card:hover{ transform:translateY(-2px); }
  .stt26 .submit-card.is-featured{
    border-color:var(--accent); box-shadow:var(--shadow);
    background:linear-gradient(165deg, var(--accent-soft), var(--surface-raised) 55%);
  }
  .stt26 .submit-badge{
    position:absolute; top:-12px; left:26px;
    font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--accent-ink); background:var(--accent); padding:5px 12px; border-radius:999px;
  }
  .stt26 .submit-card-icon{
    width:46px; height:46px; border-radius:var(--radius-sm); flex:none;
    background:var(--accent-soft); color:var(--accent-strong);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  :root[data-theme="dark"] .stt26 .submit-card-icon{ color:var(--accent); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .submit-card-icon{ color:var(--accent); } }
  .stt26 .submit-card.is-featured .submit-card-icon{ background:var(--surface-raised); }
  .stt26 .submit-card h3{ font-family:var(--font-body); font-size:1.1rem; font-weight:700; letter-spacing:-0.01em; }
  .stt26 .submit-card-desc{ font-size:.88rem; color:var(--ink-soft); line-height:1.55; margin-top:6px; }
  .stt26 .submit-features{ display:flex; flex-direction:column; gap:10px; margin:18px 0 22px; }
  .stt26 .submit-features li{ display:flex; align-items:flex-start; gap:9px; font-size:.87rem; color:var(--ink); }
  .stt26 .submit-features .icon-sm{ color:var(--accent); flex:none; margin-top:2px; }
  :root[data-theme="dark"] .stt26 .submit-features .icon-sm{ color:var(--accent); }
  .stt26 .submit-card .btn{ margin-top:auto; align-self:flex-start; }
  .stt26 .submit-note{ font-size:.78rem; color:var(--ink-faint); margin-top:10px; }

  @media (max-width:700px){
    .stt26 .submit-grid{ grid-template-columns:1fr; }
  }

  /* ===== Footer ===== */
  .stt26 .site-footer{
    background:var(--ink); color:#EDEFEF; padding:64px 24px 28px; border-top:1px solid var(--border);
  }
  .stt26 .footer-inner{ max-width:1240px; margin:0 auto; }
  .stt26 .footer-top{
    display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px;
    padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14);
  }
  .stt26 .footer-brand .brand{ color:#fff; }
  .stt26 .footer-tagline{ margin-top:14px; font-size:.87rem; color:rgba(255,255,255,.65); line-height:1.6; max-width:280px; }
  .stt26 .footer-social{ display:flex; gap:10px; margin-top:18px; }
  .stt26 .footer-social a{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); flex:none;
    transition:background .12s ease, border-color .12s ease;
  }
  .stt26 .footer-social a:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.4); color:#fff; }
  .stt26 .footer-social svg{ width:16px; height:16px; }
  .stt26 .footer-newsletter{ margin-top:20px; display:flex; gap:8px; max-width:320px; }
  .stt26 .footer-newsletter input{
    flex:1; min-width:0; padding:9px 12px; border-radius:var(--radius-sm);
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-size:.85rem;
  }
  .stt26 .footer-newsletter input::placeholder{ color:rgba(255,255,255,.45); }
  .stt26 .footer-newsletter .btn{
    flex:none; padding:9px 14px; font-size:.8rem; white-space:nowrap;
  }
  .stt26 .footer-col-label{
    display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
    letter-spacing:.06em; color:rgba(255,255,255,.5); margin-bottom:14px;
  }
  .stt26 .footer-col nav{ display:flex; flex-direction:column; gap:11px; }
  .stt26 .footer-col a{ font-size:.88rem; color:rgba(255,255,255,.82); text-decoration:none; }
  .stt26 .footer-col a:hover{ color:#fff; text-decoration:underline; }
  .stt26 .footer-bottom{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
    padding-top:24px; font-size:.8rem; color:rgba(255,255,255,.55);
  }
  .stt26 .footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
  .stt26 .footer-legal a{ color:rgba(255,255,255,.55); text-decoration:none; }
  .stt26 .footer-legal a:hover{ color:#fff; text-decoration:underline; }

  /* ===== Responsive ===== */
  /* Nav collapses to the hamburger at 1199px, not 767px — the desktop nav
     (mega-menu + All Tools + Projects & Scripts + Games + More + a 190px
     search box + coffee button + auth links/user menu) genuinely needs
     desktop width to fit without wrapping/overflowing. 767px meant a real
     tablet (iPad portrait is exactly 768px) got the full desktop layout
     squeezed into it; even 1023/1024 still crossed right at the edge, so
     this keeps a real safety margin instead of a knife-edge cutover. */
  @media (max-width: 1199px){
    .stt26 .primary-nav,.stt26  .auth-links,.stt26  .nav-search,.stt26  #userNavItem{ display:none; }
    .stt26 .hamburger{ display:flex; }
  }
  @media (min-width: 1200px){
    .stt26 .hamburger,.stt26  .mobile-nav{ display:none; }
  }
  /* Projects showcase: feature card full-width on top, the two compact cards
     side by side underneath — still two visual tiers, just re-stacked for width. */
  @media (max-width: 860px){
    .stt26 .projects-showcase{ grid-template-columns:1fr; }
    .stt26 .project-stack{ flex-direction:row; }
    .stt26 .project-stack .project-compact{ flex:1; min-width:0; }
    .stt26 .blog-grid{ grid-template-columns:1fr 1fr; }
  }
  /* Carousel treatment for the "Popular:" chip row — covers tablet as well
     as phone (not just <640px), since the row can outgrow its box well
     before phone width. JS (see template-home-v1.php) auto-scrolls it
     right-to-left and loops seamlessly; this just sets up the scroll box
     + fade-out edge so it also works with zero JS / reduced motion. */
  @media (max-width: 1023px){
    .stt26 .chip-row{
      flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:4px; scrollbar-width:none;
      mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    .stt26 .chip-row::-webkit-scrollbar{ display:none; }
    .stt26 .chip-row .chip-label{ display:none; }
    .stt26 .chip{ flex:none; }
  }
  @media (max-width: 640px){
    .stt26 .header-inner{ padding:0 16px; height:64px; gap:10px; }
    .stt26 .brand-word{ font-size:.95rem; }
    .stt26 .hero{ padding:36px 16px 32px; }
    .stt26 .hero-inner{ gap:16px; }
    .stt26 .hero h1{ max-width:none; }
    .stt26 .credibility-strip{ font-size:.72rem; }
    .stt26 .credibility-strip li{ padding:0 10px; }
    .stt26 .tools-section{ padding:40px 16px 48px; }
    .stt26 .tool-preview{ height:92px; }
    .stt26 .dropdown-panel{ min-width:calc(100vw - 32px); }
    .stt26 .services-section{ padding:40px 16px 48px; }
    .stt26 .projects-section{ padding:36px 16px 40px; }
    .stt26 .projects-head{ flex-direction:column; align-items:flex-start; gap:14px; }
    .stt26 .project-stack{ flex-direction:column; }
    .stt26 .project-feature .project-media{ aspect-ratio:16/11; }
    .stt26 .project-compact .project-media{ aspect-ratio:16/9; }
    .stt26 .blog-grid{ grid-template-columns:1fr; }
    .stt26 .blog-post-media{ aspect-ratio:16/11; }
  }
  @media (max-width: 900px){
    .stt26 .footer-top{ grid-template-columns:1fr 1fr; gap:28px; }
    .stt26 .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width: 480px){
    .stt26 .footer-top{ grid-template-columns:1fr; }
    .stt26 .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

/* ===== Pro tools & support additions ===== */
/* An icon-only cup was easy to mistake for a random button — a visible
   "Buy Coffee" label makes it obviously a support link. Text hides below
   880px (same crowded range where the primary nav is still full-width but
   space is tight) so it degrades to the icon-only pill instead of wrapping
   or squeezing neighboring header items. */
.stt26 .coffee-btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  height:36px; padding:0 12px; border-radius:999px; white-space:nowrap;
  color:#B45309; background:rgba(217,119,6,.1); border:1px solid rgba(217,119,6,.22);
  font-size:.82rem; font-weight:600; text-decoration:none;
  transition:background .15s,color .15s,border-color .15s; flex:none;
}
.stt26 .coffee-btn:hover,.stt26  .coffee-btn:focus-visible{ background:rgba(217,119,6,.18); border-color:rgba(217,119,6,.4); }
@media (max-width:880px){
  .stt26 .coffee-btn{ width:36px; height:36px; padding:0; border-radius:10px; }
  .stt26 .coffee-btn-label{ display:none; }
}

.stt26 .pro-badge{ display:inline-flex; align-items:center; font:800 10px/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; padding:4px 7px; border-radius:6px; background:linear-gradient(135deg,#F59E0B,#D97706); color:#fff; vertical-align:middle; margin-left:7px; box-shadow:0 1px 2px rgba(180,83,9,.35); }
.stt26 .price-tag{ display:inline-block; font:700 12px/1 var(--font-mono); color:#B45309; background:rgba(217,119,6,.1); border:1px solid rgba(217,119,6,.22); padding:3px 8px; border-radius:8px; margin-left:6px; }

.stt26 .btn-pro{ background:linear-gradient(135deg,#F59E0B,#D97706) !important; color:#fff !important; border-color:transparent !important; }
.stt26 .btn-pro:hover{ filter:brightness(1.06); }

/* Pro Tools teaser section (homepage) */
.stt26 .tool-card.is-pro{ border-color:rgba(217,119,6,.28); }
.stt26 .tool-card.is-pro .tool-preview{ background:linear-gradient(160deg, rgba(245,158,11,.1), var(--surface-alt)); }
.stt26 .preview-baremove{ display:flex; align-items:center; gap:10px; width:100%; }
.stt26 .preview-baremove .swatch{ flex:1; height:64px; border-radius:8px; position:relative; overflow:hidden; }
.stt26 .preview-baremove .swatch.before{ background:linear-gradient(135deg,var(--border-strong),var(--surface-alt)); }
.stt26 .preview-baremove .swatch.after{ background-image:repeating-conic-gradient(#d1d5db 0% 25%, #f3f4f6 0% 50%); background-size:11px 11px; }
.stt26 .preview-baremove .subject{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26px; height:34px; border-radius:50% 50% 45% 45%; background:var(--accent); opacity:.85; }
.stt26 .preview-baremove .arrow{ flex:none; width:15px; height:15px; color:var(--ink-faint); }
.stt26 .preview-doc{ width:100%; display:flex; flex-direction:column; gap:6px; }
.stt26 .preview-doc .mock-line.accent{ background:var(--accent); opacity:.7; }
.stt26 .preview-doc-row{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.stt26 .preview-doc-row svg{ width:12px; height:12px; flex:none; color:var(--accent-strong); }
.stt26 .preview-doc-row span{ font-size:.68rem; color:var(--ink-faint); font-family:var(--font-mono); }
.stt26 .preview-frames{ display:flex; align-items:center; gap:6px; width:100%; }
.stt26 .preview-frames .frame{ flex:1; aspect-ratio:1; border-radius:6px; background:var(--border-strong); opacity:.5; }
.stt26 .preview-frames .frame:nth-child(2){ opacity:.68; }
.stt26 .preview-frames .frame:nth-child(3){ opacity:.84; }
.stt26 .preview-frames .frame:nth-child(4){ opacity:1; background:var(--accent); }
.stt26 .preview-frames svg{ flex:none; width:16px; height:16px; color:var(--ink-faint); }

/* Free vs Pro comparison */
.stt26 .pro-compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
@media (max-width:640px){ .stt26 .pro-compare{ grid-template-columns:1fr; } }
.stt26 .pro-compare-col{ border:1px solid var(--border); border-radius:14px; padding:18px 20px; background:var(--surface); }
.stt26 .pro-compare-col.is-pro{ border-color:rgba(217,119,6,.4); background:linear-gradient(180deg, rgba(245,158,11,.08), transparent 60%); }
.stt26 .pro-compare-col h4{ margin:0 0 12px; font:700 13px var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.stt26 .pro-compare-col.is-pro h4{ color:#B45309; }
.stt26 .pro-compare-col ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; }
.stt26 .pro-compare-col li{ display:flex; align-items:flex-start; gap:8px; font-size:.92rem; color:var(--ink-soft); }
.stt26 .pro-compare-col li svg{ flex:none; width:16px; height:16px; margin-top:2px; }
.stt26 .pro-compare-col.is-pro li{ color:var(--ink); }
.stt26 .pro-compare-col.is-pro li svg{ color:#D97706; }
.stt26 .pro-compare-col:not(.is-pro) li svg{ color:var(--ink-faint); }

/* Upgrade modal */
.stt26 .upgrade-overlay{ position:fixed; inset:0; background:rgba(15,15,20,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:300; }
.stt26 .upgrade-overlay[hidden]{ display:none; }
.stt26 .upgrade-modal{ position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px 26px 26px; box-shadow:0 24px 60px rgba(0,0,0,.28); text-align:center; }
.stt26 .upgrade-modal-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:none; background:transparent; color:var(--ink-faint); font-size:20px; line-height:1; cursor:pointer; border-radius:8px; }
.stt26 .upgrade-modal-close:hover{ background:var(--surface-alt); color:var(--ink); }
.stt26 .upgrade-icon{ width:46px; height:46px; margin:0 auto 14px; border-radius:12px; background:linear-gradient(135deg,#F59E0B,#D97706); display:flex; align-items:center; justify-content:center; color:#fff; }
.stt26 .upgrade-modal h3{ font-family:var(--font-display); font-size:19px; margin:0 0 8px; }
.stt26 .upgrade-modal p#upgradeDesc{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.stt26 .upgrade-price{ font:800 28px/1 var(--font-mono); margin:0 0 18px; color:var(--ink); }
.stt26 .upgrade-price span{ font-size:12px; font-weight:600; color:var(--ink-faint); margin-left:5px; text-transform:uppercase; letter-spacing:.04em; }
.stt26 .upgrade-modal-actions{ display:flex; flex-direction:column; gap:9px; }
.stt26 .upgrade-fineprint{ font-size:11px; color:var(--ink-faint); margin-top:14px; line-height:1.4; }


/* =====================================================================
   Header & footer — 2026 redesign, real port (not a recolor)
   header.php and footer.php now use the artifact's own markup and class
   names (.site-header/.header-inner/.brand/.primary-nav/.nav-link/
   .header-actions/.auth-links/.mobile-nav, .site-footer/.footer-inner/
   .footer-brand/.footer-col, etc.) wrapped in .stt26, so almost all of
   their styling comes from the shared component rules above — nothing
   extra is needed here. What follows only covers pieces the artifact
   never had: the real category-filter strip (used site-wide, so it isn't
   dropped) and the current-page ".active" state the AJAX nav script
   toggles on .primary-nav/.mobile-menu links.
   ===================================================================== */

/* =====================================================================
   Homepage sections reskin (2026) — Projects / Tools / Games / Blog
   Targets the EXISTING real class names, ids and PHP loop markup in
   template-home-v1.php directly — no HTML/JS structure changes. This
   matters because the "Load More Projects" and "Load More Articles"
   buttons fetch server-rendered HTML via AJAX (functions.php) that reuses
   these exact same class names, so restyling the classes here — instead
   of introducing new ones — means AJAX-loaded cards automatically match
   the first page load with zero risk of breaking the fetch/filter JS
   (which selects on .tab-btn, #searchInput, #projectsContainer,
   .col-12.col-md-6.col-lg-3, #home-tool-search-input, etc.). Each of the
   four sections below is wrapped in its own .stt26 div in the template.
   ===================================================================== */

.stt26 .section-title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em;
  color:var(--ink); font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.2;
}
.stt26 .section-title span{ color:var(--accent); }
.stt26 .view-btn{
  font-family:var(--font-body); font-weight:600; font-size:.88rem;
  color:var(--accent-strong); text-decoration:none; display:inline-flex;
  align-items:center; gap:6px; transition:color .12s ease;
}
.stt26 .view-btn:hover{ color:var(--accent); text-decoration:none; }
:root[data-theme="dark"] .stt26 .view-btn{ color:var(--accent); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stt26 .view-btn{ color:var(--accent); } }

/* ---- Projects section ---- */
.stt26 .projects-section{ background:var(--bg); padding-top:56px; padding-bottom:56px; }
.stt26 .tabs-container{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.stt26 .filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.stt26 .tab-btn{
  font-family:var(--font-body); font-size:.85rem; font-weight:600;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--border);
  padding:7px 16px; border-radius:999px; cursor:pointer; transition:all .12s ease;
}
.stt26 .tab-btn:hover{ border-color:var(--border-strong); color:var(--ink); }
.stt26 .tab-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.stt26 .search-filter{ display:flex; align-items:center; gap:12px; }
.stt26 .search-box{ position:relative; }
.stt26 .search-box input{
  font-family:var(--font-body); font-size:.88rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px 9px 36px;
  min-width:260px; color:var(--ink);
}
.stt26 .search-box input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.stt26 .search-box i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:.85rem; }
.stt26 .clear-btn{
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink-soft);
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.stt26 .clear-btn:hover{ color:var(--accent-strong); }
.stt26 .results-count{ font-size:.85rem; color:var(--ink-faint); margin-bottom:18px; }
.stt26 .results-count strong{ color:var(--ink); font-weight:700; }

.stt26 .project-card, .stt26 .center-tool-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.stt26 .card-link-wrapper{ text-decoration:none; display:block; height:100%; }
.stt26 .card-link-wrapper:hover .project-card{ border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-3px); }
.stt26 .project-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-alt); border-bottom:1px solid var(--border); }
.stt26 .card-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:8px; color:var(--ink-faint); font-family:var(--font-body); font-size:.85rem; text-align:center; padding:12px;
}
.stt26 .image-indicator{
  position:absolute; bottom:10px; right:10px; background:rgba(15,23,42,.72); color:#fff;
  font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; font-family:var(--font-body);
}
.stt26 .inner-badge{
  position:absolute; top:10px; left:10px; font-family:var(--font-body); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; color:#fff;
  background:var(--accent);
}
.stt26 .badge--new{ background:#16A34A; }
.stt26 .badge--trend{ background:var(--accent); }
.stt26 .badge--featured, .stt26 .badge--hot{ background:var(--star); }
.stt26 .project-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.stt26 .project-title{ font-family:var(--font-body); font-size:1rem; font-weight:700; color:var(--ink); line-height:1.35; }
.stt26 .author-info{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); }
.stt26 .author-avatar{
  width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);
  display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; overflow:hidden;
}
.stt26 .verified-badge{ color:var(--accent); font-size:.75rem; margin-left:3px; }
.stt26 .project-stats{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--ink-soft); }
.stt26 .rating i{ color:var(--star); }
.stt26 .price{ margin-top:auto; padding-top:8px; font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.05rem; }
.stt26 .price-tag{ font-family:var(--font-body); font-weight:600; font-size:.72rem; color:var(--accent-strong); background:var(--accent-soft); padding:2px 8px; border-radius:999px; margin-left:6px; }
.stt26 .no-results{ text-align:center; padding:48px 16px; color:var(--ink-faint); }
.stt26 .no-results i{ font-size:2rem; margin-bottom:10px; display:block; }
.stt26 .no-results h4{ font-family:var(--font-body); color:var(--ink); font-weight:700; margin-bottom:6px; }

.stt26 .btn-primary{ font-family:var(--font-body); }

/* =====================================================================
   Tools archive page (/tools/) — ported from
   backups_redesign_2026/scriptandtools-tools-page-artifact.html.
   Reuses .tool-card/.tool-preview/.eyebrow/.hero-search* from the homepage
   port above; only page-specific classes are added here.
===================================================================== */
.stt26 .page-container{ max-width:1240px; margin:0 auto; padding:0 24px; }

.stt26 .breadcrumb{
  display:block; /* Bootstrap ships a global, unscoped .breadcrumb{display:flex} rule
    that otherwise leaks onto this <nav> and skews the layout — force it back to block. */
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface);
}
.stt26 .breadcrumb ol{
  display:flex; align-items:center; gap:6px;
  max-width:1240px; margin:0 auto; padding:10px 24px; /* same box model as .header-inner, so
    "Home" lines up exactly under the logo instead of drifting off-center */
  list-style:none; font-size:.8rem; color:var(--ink-faint);
}
.stt26 .breadcrumb li{ display:flex; align-items:center; gap:6px; }
.stt26 .breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.stt26 .breadcrumb a:hover{ color:var(--accent-strong); text-decoration:underline; }
.stt26 .breadcrumb li[aria-current]{ color:var(--ink-faint); } /* #6c757d per spec — current page matches Home/separator, not ink-soft */
.stt26 .breadcrumb .sep{ color:var(--ink-faint); } /* #6c757d per spec — same muted gray as Home/current page, not border-strong */

/* ===== Compact tools hero ===== */
.stt26 .tools-hero{ padding:40px 24px 34px; background:var(--surface); border-bottom:1px solid var(--border); text-align:center; }
.stt26 .tools-hero-inner{ max-width:680px; margin:0 auto; }
.stt26 .tools-hero .eyebrow{ justify-content:center; }
.stt26 .tools-hero h1{
  font-size:clamp(1.55rem, 1.25rem + 1.8vw, 2.3rem); font-weight:700;
  letter-spacing:-0.01em; line-height:1.15; margin-top:14px;
}
.stt26 .tools-hero-sub{ margin-top:10px; color:var(--ink-soft); font-size:1rem; line-height:1.6; }
.stt26 .tools-hero .hero-search{ margin-top:22px; text-align:left; }

.stt26 .tools-quicklinks{ margin-top:12px; font-size:.85rem; color:var(--ink-faint); }
.stt26 .tools-quicklinks a{ color:var(--ink-soft); text-decoration:none; font-weight:500; }
.stt26 .tools-quicklinks a:hover{ color:var(--accent-strong); text-decoration:underline; }

/* ===== Section heads ===== */
.stt26 .page-section{ padding:44px 24px; border-top:1px solid var(--border); }
.stt26 .page-section:first-of-type{ border-top:none; }
.stt26 .section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.stt26 .section-head-row h2{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.55rem); font-weight:700; letter-spacing:-0.01em; }
.stt26 .section-note{ font-size:.85rem; color:var(--ink-faint); }
.stt26 .section-lede{ margin-top:6px; max-width:60ch; color:var(--ink-soft); font-size:.92rem; line-height:1.55; }

/* ===== Featured tools carousel — one tool at a time, auto-rotating ===== */
.stt26 .feature-carousel{
  margin-top:20px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface-raised); box-shadow:var(--shadow-sm); overflow:hidden;
}
.stt26 .feature-slide{
  display:flex; align-items:center; gap:36px; padding:36px 40px;
  animation:feature-fade-in .35s ease;
}
.stt26 .feature-slide[hidden]{ display:none; }
@keyframes feature-fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .stt26 .feature-slide{ animation:none; } }
.stt26 .feature-art{
  flex:none; width:120px; height:120px; border-radius:var(--radius-lg);
  background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center; font-size:2.75rem;
  overflow:hidden;
}
.stt26 .feature-art-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.stt26 .feature-body{ flex:1; min-width:0; }
.stt26 .feature-tag{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 9px; border-radius:999px;
}
.stt26 .feature-cat{
  display:block; margin-top:12px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-faint);
}
.stt26 .feature-name{ margin-top:4px; font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; }
.stt26 .feature-name a{ color:var(--ink); text-decoration:none; }
.stt26 .feature-name a:hover{ color:var(--accent-strong); }
.stt26 .feature-desc{ margin-top:10px; max-width:52ch; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.stt26 .feature-body .btn{ margin-top:18px; }
.stt26 .feature-dots{ display:flex; justify-content:center; gap:8px; padding:14px; border-top:1px solid var(--border); }
.stt26 .feature-dot{
  width:8px; height:8px; padding:0; border-radius:999px; border:none; background:var(--border-strong);
  cursor:pointer; transition:background .15s ease, width .15s ease;
}
.stt26 .feature-dot:hover{ background:var(--ink-faint); }
.stt26 .feature-dot.is-active{ width:22px; background:var(--accent); }
.stt26 .feature-dot.is-active:hover{ background:var(--accent-strong); }

/* ===== All-tools directory ===== */
.stt26 .directory-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ===== Category tabs (filter the directory without scrolling past every section) ===== */
.stt26 .cat-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.stt26 .cat-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px 8px 11px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-raised); color:var(--ink-soft); font-family:var(--font-body);
  font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.stt26 .cat-tab svg{ width:16px; height:16px; flex:none; }
.stt26 .cat-tab:hover{ border-color:var(--border-strong); color:var(--ink); background:var(--surface-alt); }
.stt26 .cat-tab.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.stt26 .cat-tab.is-active:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }

/* With an unbounded number of categories, wrapping .cat-tabs onto several
   lines grows its section out of proportion — scroll it horizontally in
   one row instead. Used in the Tools/category-page hero, and in the
   Projects/Games "directory" sections which used to wrap (and grow tall
   with many categories) before matching this same treatment. */
.stt26 .tools-hero .cat-tabs,
.stt26 #directory .cat-tabs{
  flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.stt26 .tools-hero .cat-tabs::-webkit-scrollbar,
.stt26 #directory .cat-tabs::-webkit-scrollbar{ display:none; }
.stt26 .tools-hero .cat-tabs .cat-tab,
.stt26 #directory .cat-tabs .cat-tab{ flex:none; }

.stt26 .tool-group{ margin-top:40px; scroll-margin-top:96px; }
.stt26 .tool-group:first-of-type{ margin-top:28px; }
.stt26 .tool-group[hidden]{ display:none; }
.stt26 .tool-group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:10px; }
.stt26 .tool-group-head h3{ font-size:1.05rem; font-weight:700; letter-spacing:-0.005em; }
.stt26 .tool-group-head h3 a{ color:var(--ink); text-decoration:none; }
.stt26 .tool-group-head h3 a:hover{ color:var(--accent-strong); }

/* ===== SEO content block ===== */
.stt26 .seo-content{ max-width:760px; }
.stt26 .seo-content h2{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.4rem); font-weight:700; letter-spacing:-0.01em; }
.stt26 .seo-content p{ margin-top:12px; color:var(--ink-soft); font-size:.92rem; line-height:1.65; }
.stt26 .seo-content p:first-of-type{ margin-top:14px; }

@media (max-width: 640px){
  .stt26 .breadcrumb ol{ padding:8px 16px; }
  .stt26 .tools-hero{ padding:28px 16px 26px; }
  .stt26 .page-section{ padding:32px 16px; }
  .stt26 .page-container{ padding:0 16px; }
  .stt26 .directory-head{ flex-direction:column; align-items:stretch; }
  .stt26 .cat-tabs{ gap:6px; margin-top:18px; }
  .stt26 .cat-tab{ padding:7px 12px 7px 9px; font-size:.8rem; }
  .stt26 .feature-slide{ flex-direction:column; text-align:center; padding:26px 20px; gap:18px; }
  .stt26 .feature-art{ margin:0 auto; }
  .stt26 .feature-desc{ margin-left:auto; margin-right:auto; }
}

/* =====================================================================
   Search results page — ported from
   backups_redesign_2026/scriptandtools-search-results-artifact.html.
===================================================================== */
.stt26 .results-hero{ padding:36px 24px 0; }
.stt26 .results-hero-inner{ max-width:1000px; margin:0 auto; }
.stt26 .results-hero h1{ margin-top:10px; font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.stt26 .results-hero h1 mark{ background:none; color:var(--accent-strong); }
.stt26 .results-count{ margin-top:6px; font-size:.92rem; color:var(--ink-soft); }
.stt26 .results-count b{ color:var(--ink); font-variant-numeric:tabular-nums; }

.stt26 .search-field{
  margin-top:20px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:7px 8px 7px 18px; box-shadow:var(--shadow-sm);
}
.stt26 .search-field:focus-within{ border-color:var(--accent); box-shadow:var(--focus-ring); }
.stt26 .search-field .icon{ color:var(--ink-faint); flex:none; }
.stt26 .search-field input{ flex:1; min-width:0; border:none; outline:none; background:none; color:var(--ink); font-family:var(--font-body); font-size:1rem; padding:8px 0; }
.stt26 .search-field input::placeholder{ color:var(--ink-faint); }
.stt26 .search-field .btn{ flex:none; }

.stt26 .results-controls{
  max-width:1000px; margin:22px auto 0; padding:0 24px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.stt26 .results-controls .filter-tabs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.stt26 .sort-field{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-soft); flex:none; }
.stt26 .sort-field select{
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink);
  padding:8px 30px 8px 12px; font-size:.85rem; font-weight:500; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.stt26 .sort-field select:focus-visible{ box-shadow:var(--focus-ring); }
.stt26 .filter-tab{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.stt26 .filter-tab .count{ font-variant-numeric:tabular-nums; color:var(--ink-faint); font-weight:500; }
.stt26 .filter-tab:hover{ border-color:var(--border-strong); color:var(--ink); }
.stt26 .filter-tab.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.stt26 .filter-tab.is-active .count{ color:rgba(255,255,255,.65); }
.stt26 .filter-tab[disabled]{ opacity:.5; cursor:not-allowed; }
.stt26 .filter-tab[disabled]:hover{ border-color:var(--border); color:var(--ink-soft); }

.stt26 .results-list{ max-width:1000px; margin:0 auto; padding:20px 24px 8px; display:flex; flex-direction:column; gap:12px; }
.stt26 .result-row{
  display:flex; gap:16px; padding:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  text-decoration:none; color:inherit; position:relative;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.stt26 .result-row:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.stt26 .result-icon{
  width:44px; height:44px; border-radius:var(--radius-md); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--type-soft, var(--surface-alt)); color:var(--type-color, var(--ink-soft));
}
.stt26 .result-row[data-type="tool"] .result-icon{ --type-soft:var(--type-tool-soft); --type-color:var(--type-tool); }
.stt26 .result-row[data-type="project"] .result-icon{ --type-soft:var(--type-project-soft); --type-color:var(--type-project); }
.stt26 .result-row[data-type="game"] .result-icon{ --type-soft:var(--type-game-soft); --type-color:var(--type-game); }
.stt26 .result-row[data-type="blog"] .result-icon{ --type-soft:var(--type-blog-soft); --type-color:var(--type-blog); }
.stt26 .result-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.stt26 .result-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stt26 .result-type-badge{
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; background:var(--type-soft, var(--surface-alt)); color:var(--type-color, var(--ink-soft));
}
.stt26 .result-row[data-type="tool"] .result-type-badge{ --type-soft:var(--type-tool-soft); --type-color:var(--type-tool); }
.stt26 .result-row[data-type="project"] .result-type-badge{ --type-soft:var(--type-project-soft); --type-color:var(--type-project); }
.stt26 .result-row[data-type="game"] .result-type-badge{ --type-soft:var(--type-game-soft); --type-color:var(--type-game); }
.stt26 .result-row[data-type="blog"] .result-type-badge{ --type-soft:var(--type-blog-soft); --type-color:var(--type-blog); }
.stt26 .result-path{ font-size:.78rem; color:var(--ink-faint); }
.stt26 .result-body h3{ font-size:1.02rem; font-weight:700; line-height:1.35; letter-spacing:-0.005em; }
.stt26 .result-body h3 a{ text-decoration:none; color:var(--ink); }
.stt26 .result-row:hover h3{ color:var(--accent-strong); }
.stt26 .result-body p{ font-size:.87rem; color:var(--ink-soft); line-height:1.55; }
.stt26 .result-body mark{ background:var(--accent-soft); color:var(--accent-strong); border-radius:3px; padding:0 2px; font-weight:600; }
.stt26 .result-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-faint); margin-top:2px; }
.stt26 .result-meta span{ display:inline-flex; align-items:center; gap:4px; }
.stt26 .result-meta .icon-sm{ width:13px; height:13px; }
.stt26 .result-meta .rating .icon-sm{ color:var(--star); }
.stt26 .result-meta .stack{ display:inline-flex; gap:6px; }
.stt26 .result-meta .stack-tag{ font-family:var(--font-mono); font-size:.7rem; background:var(--surface-alt); border-radius:4px; padding:2px 6px; color:var(--ink-soft); }

.stt26 .search-help{ max-width:1000px; margin:0 auto 64px; padding:0 24px; }
.stt26 .search-help-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px;
}
.stt26 .search-help h2{ font-size:1rem; font-weight:700; }
.stt26 .search-help p{ font-size:.85rem; color:var(--ink-soft); margin-top:3px; }

@media (max-width: 640px){
  .stt26 .results-hero{ padding:28px 16px 0; }
  .stt26 .search-field{ flex-wrap:wrap; padding:12px 14px; }
  .stt26 .search-field input{ width:100%; order:1; padding:2px 0 0; }
  .stt26 .search-field .btn{ order:2; margin-left:auto; }
  .stt26 .results-controls{ padding:0 16px 14px; }
  .stt26 .results-list{ padding:18px 16px 8px; }
  .stt26 .result-row{ padding:14px; gap:12px; }
  .stt26 .result-icon{ width:38px; height:38px; }
  .stt26 .search-help{ padding:0 16px; }
  .stt26 .search-help-inner{ padding:18px; }
}

/* =====================================================================
   Blog listing page — ported from
   backups_redesign_2026/scriptandtools-blog-page-artifact.html.
   Reuses .tools-hero, .hero-search, .chip-row, .section-container,
   .section-head, .blog-grid, .blog-post (and children), .blog-cover
   (and variants), .tools-secondary-link and .filter-tab from the
   homepage + search-page ports above; only page-specific classes below.
===================================================================== */
.stt26 .filter-bar{ max-width:1240px; margin:0 auto; padding:20px 24px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.stt26 .featured-wrap{ padding:32px 24px 0; }
.stt26 .blog-featured{
  max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; position:relative; transition:border-color .15s ease, box-shadow .15s ease;
}
.stt26 .blog-featured:hover{ border-color:var(--border-strong); box-shadow:var(--shadow); }
.stt26 .blog-featured-media{ position:relative; min-height:260px; }
.stt26 .blog-featured-info{ padding:32px 36px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.stt26 .featured-label{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); }
.stt26 .blog-featured h2{ font-size:clamp(1.4rem, 1.2rem + 1vw, 1.85rem); font-weight:800; letter-spacing:-0.015em; line-height:1.2; }
.stt26 .blog-featured h2 a{ color:var(--ink); text-decoration:none; }
.stt26 .blog-featured h2 a::after{ content:""; position:absolute; inset:0; }
.stt26 .blog-featured:hover h2 a{ color:var(--accent-strong); }
.stt26 .blog-featured p{ font-size:.94rem; color:var(--ink-soft); line-height:1.65; }
@media (max-width:860px){ .stt26 .blog-featured{ grid-template-columns:1fr; } .stt26 .blog-featured-media{ min-height:200px; } .stt26 .blog-featured-info{ padding:24px; } }

/* Extra blog-cover color variants (Developer Tools' .blog-cover-dev already
   exists from the homepage port) — SEO/Vitals reuses --star, Data Formats
   reuses --ink-faint, Roundups reuses the search page's --type-project teal. */
.stt26 .blog-cover-vitals{ background:linear-gradient(155deg, color-mix(in srgb, var(--star) 28%, var(--surface-alt)) 0%, color-mix(in srgb, var(--star) 17%, var(--surface)) 100%); }
.stt26 .blog-cover-vitals .blog-cover-ghost,.stt26  .blog-cover-vitals .blog-cover-badge svg{ color:var(--star); }
.stt26 .blog-cover-format{ background:linear-gradient(155deg, color-mix(in srgb, var(--ink-faint) 32%, var(--surface-alt)) 0%, color-mix(in srgb, var(--ink-faint) 16%, var(--surface)) 100%); }
.stt26 .blog-cover-format .blog-cover-ghost,.stt26  .blog-cover-format .blog-cover-badge svg{ color:var(--ink-soft); }
.stt26 .blog-cover-roundup{ background:linear-gradient(155deg, color-mix(in srgb, var(--type-project) 30%, var(--surface-alt)) 0%, color-mix(in srgb, var(--type-project) 18%, var(--surface)) 100%); }
.stt26 .blog-cover-roundup .blog-cover-ghost,.stt26  .blog-cover-roundup .blog-cover-badge svg{ color:var(--type-project); }

.stt26 .newsletter-band{ background:var(--ink); color:#fff; padding:48px 24px; }
.stt26 .newsletter-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.stt26 .newsletter-inner h2{ font-size:1.3rem; font-weight:700; }
.stt26 .newsletter-inner p{ margin-top:6px; font-size:.9rem; color:rgba(255,255,255,.68); max-width:44ch; }
.stt26 .newsletter-form{ display:flex; gap:8px; flex:none; }
.stt26 .newsletter-form input{ min-width:240px; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-size:.9rem; }
.stt26 .newsletter-form input::placeholder{ color:rgba(255,255,255,.45); }
.stt26 .newsletter-form .btn{ flex:none; padding:11px 18px; font-size:.85rem; white-space:nowrap; }
.stt26 .newsletter-msg{ margin-top:8px; font-size:.82rem; display:none; }
@media (max-width:640px){ .stt26 .newsletter-form{ width:100%; } .stt26 .newsletter-form input{ min-width:0; flex:1; } .stt26 .newsletter-inner{ flex-direction:column; align-items:flex-start; } }

@media (max-width: 860px){ .stt26 .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){
  .stt26 .filter-bar{ padding:16px 16px 0; }
  .stt26 .featured-wrap{ padding:24px 16px 0; }
  .stt26 .blog-featured-info{ padding:22px; }
  .stt26 .blog-grid{ grid-template-columns:1fr; }
  .stt26 .newsletter-band{ padding:36px 16px; }
}

/* =========================================================================
   About page — ported from
   backups_redesign_2026/scriptandtools-about-us-artifact.html.
   Reuses .page-container/.eyebrow/.page-section/.section-head-row/
   .section-note/.section-lede/.seo-content/.btn/.btn-primary/.btn-ghost
   from the shared blocks above; only page-specific classes below.
===================================================================== */
.stt26 .about-hero{ padding:52px 24px 40px; }
.stt26 .about-hero-inner{ width:100%; }
.stt26 .about-hero h1{
  font-size:clamp(1.8rem, 1.35rem + 2.2vw, 2.7rem); font-weight:800;
  letter-spacing:-0.015em; line-height:1.15; margin-top:14px; max-width:22ch;
}
.stt26 .about-hero-sub{ margin-top:14px; max-width:66ch; color:var(--ink-soft); font-size:1.03rem; line-height:1.65; }
.stt26 .trust-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.stt26 .trust-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--accent-strong);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding:5px 11px; border-radius:999px;
}
.stt26 .trust-chip svg{ width:13px; height:13px; flex:none; }

.stt26 .story-layout{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,1fr); gap:40px; align-items:start; }
@media (max-width:860px){ .stt26 .story-layout{ grid-template-columns:1fr; } }

.stt26 .timeline{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-raised); padding:22px 22px 6px; }
.stt26 .timeline-item{ position:relative; padding:0 0 22px 26px; }
.stt26 .timeline-item::before{ content:""; position:absolute; left:5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.stt26 .timeline-item::after{ content:""; position:absolute; left:9px; top:15px; bottom:0; width:1px; background:var(--border-strong); }
.stt26 .timeline-item:last-child::after{ display:none; }
.stt26 .timeline-item:last-child{ padding-bottom:0; }
.stt26 .timeline-year{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--accent-strong); text-transform:uppercase; }
.stt26 .timeline-item h3{ margin-top:4px; font-size:.95rem; font-weight:700; }
.stt26 .timeline-item p{ margin-top:4px; font-size:.85rem; color:var(--ink-soft); line-height:1.55; }

.stt26 .stats-strip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:640px){ .stt26 .stats-strip{ grid-template-columns:1fr 1fr; } }
.stt26 .stat-tile{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); padding:20px 18px; text-align:center; }
.stt26 .stat-tile .num{ font-family:var(--font-mono); font-size:1.7rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.stt26 .stat-tile .label{ display:block; margin-top:4px; font-size:.78rem; color:var(--ink-soft); }

.stt26 .value-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
@media (max-width:720px){ .stt26 .value-grid{ grid-template-columns:1fr; } }
.stt26 .value-card{ padding:22px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); }
.stt26 .value-card .icon-wrap{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.stt26 .value-card .icon-wrap svg{ width:20px; height:20px; }
.stt26 .value-card h3{ font-size:1rem; font-weight:700; }
.stt26 .value-card p{ margin-top:7px; font-size:.87rem; color:var(--ink-soft); line-height:1.6; }

.stt26 .included-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; list-style:none; margin:0; padding:0; }
@media (max-width:640px){ .stt26 .included-grid{ grid-template-columns:1fr; } }
.stt26 .included-grid li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft); }
.stt26 .included-grid li svg{ flex:none; width:17px; height:17px; margin-top:2px; color:var(--accent); }
.stt26 .included-grid li b{ color:var(--ink); }

.stt26 .compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
@media (max-width:640px){ .stt26 .compare-grid{ grid-template-columns:1fr; } }
.stt26 .compare-col{ border:1px solid var(--border); border-radius:14px; padding:20px 22px; background:var(--surface); }
.stt26 .compare-col h4{ margin:0 0 14px; font:700 12px var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.stt26 .compare-col.is-us{ border-color:color-mix(in srgb, var(--accent) 38%, transparent); background:linear-gradient(180deg, var(--accent-soft), transparent 65%); }
.stt26 .compare-col.is-us h4{ color:var(--accent-strong); }
.stt26 .compare-col ul{ display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }
.stt26 .compare-col li{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.stt26 .compare-col li svg{ flex:none; width:16px; height:16px; margin-top:2px; }
.stt26 .compare-col:not(.is-us) li svg{ color:var(--ink-faint); }
.stt26 .compare-col.is-us li{ color:var(--ink); }
.stt26 .compare-col.is-us li svg{ color:var(--accent-strong); }

.stt26 .team-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:22px; }
@media (max-width:780px){ .stt26 .team-grid{ grid-template-columns:1fr; } }
.stt26 .team-card{ text-align:center; padding:26px 20px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); }
.stt26 .team-avatar{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); display:flex; align-items:center; justify-content:center; color:var(--accent-ink); }
.stt26 .team-avatar svg{ width:20px; height:20px; }
.stt26 .team-card h3{ font-size:.95rem; font-weight:700; }
.stt26 .team-card span{ display:block; margin-top:2px; font-size:.76rem; font-family:var(--font-mono); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.stt26 .team-card p{ margin-top:10px; font-size:.85rem; color:var(--ink-soft); line-height:1.55; }

.stt26 .cta-banner{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-raised); padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.stt26 .cta-banner h2{ font-size:1.15rem; font-weight:700; }
.stt26 .cta-banner p{ margin-top:6px; color:var(--ink-soft); font-size:.9rem; max-width:48ch; }
.stt26 .cta-actions{ display:flex; gap:10px; flex:none; flex-wrap:wrap; }

@media (max-width:480px){
  .stt26 .about-hero{ padding:36px 16px 30px; }
}

/* =========================================================================
   Contact page — ported from backups_redesign_2026/contact-us.html.
   Reuses .page-container/.eyebrow/.page-section/.section-head-row/
   .section-note/.section-lede/.btn/.btn-primary/.btn-ghost/.cta-banner/
   .cta-actions from the shared blocks above; only page-specific classes
   below. The reference's own form used a client-side "mailto:" trick —
   that's replaced with this site's real working AJAX submission
   (admin-ajax.php action=stt_contact_submit, see functions.php), so field
   ids/names here match what that handler already expects.
===================================================================== */
.stt26 .contact-hero{ padding:52px 24px 40px; }
.stt26 .contact-hero h1{
  font-size:clamp(1.8rem, 1.35rem + 2.2vw, 2.7rem); font-weight:800;
  letter-spacing:-0.015em; line-height:1.15; margin-top:14px; max-width:20ch;
}
.stt26 .contact-hero-sub{ margin-top:14px; max-width:64ch; color:var(--ink-soft); font-size:1.03rem; line-height:1.65; }
.stt26 .contact-hero-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.stt26 .contact-hero-meta .trust-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--accent-strong);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding:5px 11px; border-radius:999px;
}
.stt26 .contact-hero-meta .trust-chip svg{ width:13px; height:13px; flex:none; }

.stt26 .contact-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:24px; }
@media (max-width:960px){ .stt26 .contact-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .stt26 .contact-grid{ grid-template-columns:1fr; } }
.stt26 .contact-card{
  display:flex; flex-direction:column; padding:22px 20px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised);
}
.stt26 .contact-card .icon-wrap{
  width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.stt26 .contact-card .icon-wrap svg{ width:20px; height:20px; }
.stt26 .contact-card h3{ font-size:.95rem; font-weight:700; }
.stt26 .contact-card p{ margin-top:7px; font-size:.85rem; color:var(--ink-soft); line-height:1.55; flex:1; }
.stt26 .contact-card a.contact-link{
  margin-top:14px; display:inline-flex; align-items:center; gap:5px;
  font-size:.84rem; font-weight:600; color:var(--accent-strong); text-decoration:none;
}
.stt26 .contact-card a.contact-link svg{ width:14px; height:14px; transition:transform .15s ease; }
.stt26 .contact-card a.contact-link:hover svg{ transform:translateX(3px); }

.stt26 .contact-layout{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr); gap:40px; align-items:start; }
@media (max-width:860px){ .stt26 .contact-layout{ grid-template-columns:1fr; } }

.stt26 .contact-form{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-raised);
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.stt26 .contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:520px){ .stt26 .contact-form .form-row{ grid-template-columns:1fr; gap:18px; } }
.stt26 .contact-form .form-field{ display:flex; flex-direction:column; gap:6px; }
.stt26 .contact-form .form-field label{ font-size:.82rem; font-weight:600; color:var(--ink); }
.stt26 .contact-form input, .stt26 .contact-form select, .stt26 .contact-form textarea{
  width:100%; font-family:var(--font-body); font-size:.92rem; color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  padding:10px 12px; outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.stt26 .contact-form input:focus, .stt26 .contact-form select:focus, .stt26 .contact-form textarea:focus{
  border-color:var(--accent); box-shadow:var(--focus-ring);
}
.stt26 .contact-form input.is-invalid, .stt26 .contact-form select.is-invalid, .stt26 .contact-form textarea.is-invalid{
  border-color:var(--danger);
}
.stt26 .contact-form textarea{ resize:vertical; min-height:120px; font-family:inherit; line-height:1.5; }
.stt26 .contact-form .invalid-feedback{ display:none; font-size:.78rem; color:var(--danger); }
.stt26 .contact-form .invalid-feedback.show{ display:block; }
.stt26 .form-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stt26 .form-note{ font-size:.78rem; color:var(--ink-faint); }
.stt26 .form-status:empty{ display:none; }
.stt26 .form-status{ font-size:.85rem; font-weight:600; color:var(--accent-strong); }
.stt26 .form-status .error{ color:var(--danger); }
.stt26 .btn .spinner{ display:inline-flex; align-items:center; gap:6px; }

.stt26 .contact-sidebar{ display:flex; flex-direction:column; gap:16px; }
.stt26 .sidebar-card{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); padding:20px; }
.stt26 .sidebar-card h3{ font-size:.88rem; font-weight:700; }
.stt26 .sidebar-card p{ margin-top:8px; font-size:.85rem; color:var(--ink-soft); line-height:1.6; }
.stt26 .sidebar-card .btn{ margin-top:14px; width:100%; }
.stt26 .sidebar-meta-row{ display:flex; align-items:flex-start; gap:10px; }
.stt26 .sidebar-meta-row + .sidebar-meta-row{ margin-top:12px; }
.stt26 .sidebar-meta-row svg{ flex:none; width:17px; height:17px; margin-top:2px; color:var(--accent-strong); }
.stt26 .sidebar-meta-row div b{ display:block; font-size:.85rem; color:var(--ink); }
.stt26 .sidebar-meta-row div span{ display:block; margin-top:1px; font-size:.8rem; color:var(--ink-soft); }

.stt26 .faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:22px; max-width:820px; }
.stt26 .faq-item{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); overflow:hidden; }
.stt26 .faq-item summary{
  list-style:none; cursor:pointer; padding:16px 18px;
  font-size:.92rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.stt26 .faq-item summary::-webkit-details-marker{ display:none; }
.stt26 .faq-item summary::after{
  content:""; flex:none; width:10px; height:10px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .15s ease;
}
.stt26 .faq-item[open] summary::after{ transform:rotate(-135deg); }
.stt26 .faq-item .faq-answer{ padding:0 18px 18px; font-size:.88rem; color:var(--ink-soft); line-height:1.65; }

@media (max-width:480px){
  .stt26 .contact-hero{ padding:36px 16px 30px; }
  .stt26 .contact-form{ padding:20px; }
}

/* =========================================================================
   Buy Us a Coffee page — ported from
   backups_redesign_2026/scriptandtools-coffee-page-artifact.html.
   Reuses .section-container/.coffee-btn/.upgrade-fineprint from the shared
   blocks above; only page-specific classes below. Keeps the reference's
   own amber/orange accent (not the locked blue accent) since that's this
   site's existing "coffee" brand color — see .coffee-btn:hover above.
===================================================================== */
.stt26 .coffee-page-section{ padding:56px 0 80px; }
.stt26 .coffee-page-head{ max-width:620px; margin:0 auto 40px; text-align:center; }
.stt26 .support-icon{ width:52px; height:52px; margin:0 auto 18px; border-radius:14px; background:linear-gradient(135deg,#F59E0B,#D97706); display:flex; align-items:center; justify-content:center; color:#fff; }
.stt26 .support-icon svg{ width:22px; height:22px; }
.stt26 .coffee-page-head h1{ font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.1rem); font-weight:800; letter-spacing:-0.01em; margin:14px 0 10px; }
.stt26 .coffee-page-head p{ color:var(--ink-soft); line-height:1.6; margin:0; }

.stt26 .coffee-widget{ max-width:880px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .stt26 .coffee-widget{ grid-template-columns:1fr; } }

.stt26 .coffee-widget-form, .stt26 .coffee-widget-summary{ border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:26px; }
.stt26 .coffee-widget-label{ display:block; font:700 12px var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:12px; }

.stt26 .coffee-amount-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:520px){ .stt26 .coffee-amount-grid{ grid-template-columns:repeat(2,1fr); } }
.stt26 .coffee-amount-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border:1.5px solid var(--border); border-radius:12px; background:var(--surface-alt); color:var(--ink); cursor:pointer; font-family:var(--font-body); font-size:1rem; transition:border-color .15s,background .15s,transform .1s; }
.stt26 .coffee-amount-btn:hover{ border-color:var(--border-strong); }
.stt26 .coffee-amount-btn strong{ font-size:.86rem; font-weight:700; }
.stt26 .coffee-amount-btn span{ font:700 12px var(--font-mono); color:var(--ink-soft); }
.stt26 .coffee-amount-btn.is-selected{ border-color:#D97706; background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.05)); }
.stt26 .coffee-amount-btn.is-selected span{ color:#B45309; }

.stt26 .coffee-custom-row{ margin-top:18px; }
.stt26 .coffee-custom-row label{ display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:8px; }
.stt26 .coffee-custom-input{ display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:12px; overflow:hidden; }
.stt26 .coffee-step{ width:40px; height:40px; border:none; background:var(--surface-alt); color:var(--ink); font-size:18px; cursor:pointer; line-height:1; }
.stt26 .coffee-step:hover{ background:var(--border); }
.stt26 #coffeeCustomQty{ width:64px; height:40px; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); text-align:center; font:700 15px var(--font-mono); background:var(--surface); color:var(--ink); -moz-appearance:textfield; }
.stt26 #coffeeCustomQty::-webkit-outer-spin-button, .stt26 #coffeeCustomQty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.stt26 #coffeeMessage{ width:100%; resize:vertical; border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface); color:var(--ink); font:14px/1.5 var(--font-body); }
.stt26 #coffeeMessage:focus{ outline:none; border-color:var(--accent); }

.stt26 .coffee-widget-summary{ position:sticky; top:90px; }
.stt26 .coffee-summary-row{ display:flex; justify-content:space-between; font-size:.92rem; color:var(--ink-soft); padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.stt26 .coffee-summary-total{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin-bottom:20px; }
.stt26 .coffee-checkout-btn{ width:100%; background:linear-gradient(135deg,#F59E0B,#D97706); color:#fff; border:none; padding:14px 18px; border-radius:12px; font:700 15px var(--font-body); cursor:pointer; box-shadow:0 8px 20px rgba(217,119,6,.28); }
.stt26 .coffee-checkout-btn:hover{ filter:brightness(1.05); }
.stt26 .coffee-checkout-btn:disabled{ cursor:default; filter:none; opacity:.75; }
.stt26 .coffee-widget-summary .upgrade-fineprint{ text-align:center; margin-top:12px; }

/* =========================================================================
   Single tool page chrome — ported from
   backups_redesign_2026/scriptandtools-tool-detail-artifact.html. Wraps
   every tool's own widget (untouched, tool-specific markup/JS, rendered by
   each tools/template-tool-*.php in between the two functions in
   functions/tool-chrome.php) with a consistent hero above and Why/How/FAQ
   below. Reuses .section-container/.tool-list/.tool-card/.tool-preview/
   .tool-card-body/.tool-row-cat from the Tools-page port above for the
   related-tools grid — only page-specific classes below.
===================================================================== */
.stt26 .tool-hero{ padding:40px 24px 8px; background:var(--surface); }
.stt26 .tool-hero-top{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.stt26 .tool-hero-icon{ flex:none; width:60px; height:60px; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; }
.stt26 .tool-hero-icon i{ font-size:1.7rem; }
.stt26 .tool-hero-text{ flex:1; min-width:240px; }
.stt26 .tool-hero-cat{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); display:inline-block; margin-bottom:6px; text-decoration:none; }
.stt26 .tool-hero-cat:hover{ text-decoration:underline; }
.stt26 .tool-hero h1{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight:700; letter-spacing:-0.015em; }
.stt26 .tool-hero-sub{ color:var(--ink-soft); font-size:.98rem; line-height:1.6; margin-top:8px; max-width:64ch; }
.stt26 .tool-hero-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:.85rem; color:var(--ink-soft); }
.stt26 .tool-hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); flex:none; }
.stt26 .tool-hero-actions{ flex:none; display:flex; gap:8px; margin-top:4px; }
.stt26 .tool-hero-actions .icon-btn{ border:1px solid var(--border); }
.stt26 .tool-hero-actions .icon-btn.is-copied{ color:var(--accent-strong); border-color:var(--accent); background:var(--accent-soft); }

/* --- Tool detail: Share modal --- */
.stt26 .tool-share-modal-overlay{
  position:fixed; inset:0; background:rgba(15,15,20,.55);
  z-index:300; display:none; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .2s ease;
}
.stt26 .tool-share-modal-overlay.active{ display:flex; opacity:1; }
.stt26 .tool-share-modal{
  width:100%; max-width:420px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(15,23,42,.28); position:relative; padding:28px;
  transform:translateY(20px) scale(.97); transition:transform .25s cubic-bezier(.16,1,.3,1);
  text-align:left;
}
.stt26 .tool-share-modal-overlay.active .tool-share-modal{ transform:translateY(0) scale(1); }
.stt26 .tool-share-modal h3{ font-size:1.2rem; font-weight:800; color:var(--ink); margin:0 0 4px; padding-right:28px; }
.stt26 .tool-share-modal-sub{ color:var(--ink-soft); font-size:.88rem; margin:0 0 20px; }

.stt26 .tool-share-link-row{
  display:flex; align-items:stretch; gap:8px; margin-bottom:20px;
}
.stt26 .tool-share-link-row input{
  flex:1; min-width:0; padding:10px 12px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.85rem; color:var(--ink); font-family:var(--font-mono);
}
.stt26 .tool-share-link-row input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.stt26 .tool-share-copy-btn{
  flex:none; display:flex; align-items:center; gap:6px; padding:0 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:.85rem;
  transition:background .15s ease;
}
.stt26 .tool-share-copy-btn:hover{ background:var(--accent-strong); }
.stt26 .tool-share-copy-btn.is-copied{ background:var(--good, #16a34a); border-color:var(--good, #16a34a); }
.stt26 .tool-share-copy-btn svg{ width:16px; height:16px; flex:none; }

.stt26 .tool-share-socials{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.stt26 .tool-share-social-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt);
  color:var(--ink-soft); font-size:.78rem; font-weight:600; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.stt26 .tool-share-social-btn:hover{ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); }
.stt26 .tool-share-social-btn svg{ width:20px; height:20px; }

@media (max-width:480px){
  .stt26 .tool-share-modal{ max-width:100%; border-radius:var(--radius-md); padding:22px; }
  .stt26 .tool-share-socials{ grid-template-columns:repeat(3, 1fr); gap:8px; }
}

.stt26 .tool-section{ padding:48px 24px; border-top:1px solid var(--border); }
.stt26 .tool-section h2{ font-size:clamp(1.3rem, 1.15rem + .8vw, 1.6rem); font-weight:700; letter-spacing:-0.01em; }
.stt26 .tool-section-sub{ color:var(--ink-soft); font-size:.95rem; margin-top:8px; max-width:62ch; }

.stt26 .feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
@media (max-width:820px){ .stt26 .feature-grid{ grid-template-columns:1fr; } }
.stt26 .feature-item{ padding:20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-raised); }
.stt26 .feature-icon{ width:40px; height:40px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.stt26 .feature-item h3{ font-family:var(--font-body); font-size:.98rem; font-weight:600; margin-bottom:6px; }
.stt26 .feature-item p{ font-size:.87rem; color:var(--ink-soft); line-height:1.55; }

.stt26 .how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }
@media (max-width:820px){ .stt26 .how-steps{ grid-template-columns:1fr; } }
.stt26 .how-step{ position:relative; padding-top:6px; }
.stt26 .how-step-num{ font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--accent-strong); background:var(--accent-soft); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.stt26 .how-step h3{ font-family:var(--font-body); font-size:.96rem; font-weight:600; margin-bottom:6px; }
.stt26 .how-step p{ font-size:.87rem; color:var(--ink-soft); line-height:1.55; }

.stt26 .tool-faq-list{ margin-top:24px; max-width:760px; }
.stt26 .tool-faq-item{ border-bottom:1px solid var(--border); }
.stt26 .tool-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 2px; font-size:.95rem; font-weight:600; color:var(--ink); }
.stt26 .tool-faq-item summary::-webkit-details-marker{ display:none; }
.stt26 .tool-faq-item summary .chevron{ flex:none; color:var(--ink-faint); transition:transform .15s ease; }
.stt26 .tool-faq-item[open] summary .chevron{ transform:rotate(180deg); }
.stt26 .tool-faq-a p{ padding:0 2px 16px; font-size:.88rem; color:var(--ink-soft); line-height:1.6; max-width:64ch; }

@media (max-width:640px){
  .stt26 .tool-hero{ padding:28px 16px 6px; }
  .stt26 .tool-section{ padding:36px 16px; }
}

/* =========================================================================
   Project detail page — ported from
   backups_redesign_2026/scriptandtools-project-detail-artifact.html.
   Reuses .tool-hero (renamed usage)/.tool-section/.section-container/
   .page-container/.section-head-row/.section-note/.eyebrow/.trust-chip/
   .included-grid/.tool-list/.tool-card/.btn from the shared blocks above.
   The reference's gallery was a hand-drawn CSS wireframe mockup specific to
   one real-estate example — replaced here with a real-image gallery (or a
   generic icon panel when a project has no images) so it works for any
   project, not just that one example.
===================================================================== */
.stt26 .project-hero{ padding:40px 24px 8px; background:var(--surface); }
.stt26 .project-hero h1{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight:700; letter-spacing:-0.015em; margin-top:12px; }
.stt26 .project-hero-sub{ margin-top:10px; max-width:70ch; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; }
.stt26 .project-meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; font-size:.85rem; color:var(--ink-soft); }
.stt26 .project-meta-rating{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); }
.stt26 .project-meta-rating .icon-sm{ width:15px; height:15px; color:var(--star); }
.stt26 .project-meta-sep{ color:var(--border-strong); }

.stt26 .project-layout{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:32px; align-items:start; margin-top:8px; }
/* Grid items default to min-width:auto, so their own content's intrinsic
   width (e.g. a long button label, the big price number) can force them
   wider than their track regardless of the minmax() above — that's a
   property of the grid ITEM, not the track. Without this, that excess
   width used to spill into page-level horizontal scroll; now that the
   real overflow-x:hidden works it was silently clipping these cards
   instead. min-width:0 lets them actually shrink to fit. */
.stt26 .project-layout > *{ min-width:0; }
@media (max-width:900px){ .stt26 .project-layout{ grid-template-columns:1fr; } }

.stt26 .gallery-frame{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.stt26 .gallery-stage{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-alt); }
.stt26 .gallery-view{ position:absolute; inset:0; display:none; }
.stt26 .gallery-view.is-active{ display:block; }
.stt26 .gallery-view img{ width:100%; height:100%; object-fit:cover; display:block; }
.stt26 .gallery-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent-strong); background:var(--accent-soft); }
.stt26 .gallery-placeholder i{ font-size:2.6rem; }
.stt26 .gallery-thumbs{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); background:var(--surface-alt); overflow-x:auto; }
.stt26 .gallery-thumb-btn{ flex:none; width:78px; height:48px; border-radius:8px; border:2px solid transparent; background:var(--surface); cursor:pointer; padding:0; position:relative; overflow:hidden; }
.stt26 .gallery-thumb-btn:hover{ border-color:var(--border-strong); }
.stt26 .gallery-thumb-btn.is-active{ border-color:var(--accent); }
.stt26 .gallery-thumb-btn img{ width:100%; height:100%; object-fit:cover; display:block; }

.stt26 .purchase-card{ position:sticky; top:88px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; background:var(--surface); box-shadow:var(--shadow); }
.stt26 .purchase-price{ font:800 34px/1 var(--font-mono); color:var(--ink); }
.stt26 .purchase-price .unit{ font-size:12px; font-weight:600; color:var(--ink-faint); margin-left:6px; text-transform:uppercase; letter-spacing:.03em; }
.stt26 .purchase-list{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.stt26 .purchase-list li{ display:flex; gap:8px; align-items:flex-start; font-size:.88rem; color:var(--ink-soft); }
.stt26 .purchase-list li svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--accent); }
.stt26 .purchase-actions{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.stt26 .purchase-secondary-link{ display:block; text-align:center; font:600 13px var(--font-body); color:var(--ink-soft); padding:10px; border-radius:10px; border:1px solid var(--border); text-decoration:none; }
.stt26 .purchase-secondary-link:hover{ background:var(--surface-alt); color:var(--ink); }
.stt26 .purchase-fineprint{ font-size:11px; color:var(--ink-faint); margin-top:14px; line-height:1.4; text-align:center; }

.stt26 .table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
.stt26 .spec-table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:420px; }
.stt26 .spec-table th, .stt26 .spec-table td{ text-align:left; padding:11px 16px; border-bottom:1px solid var(--border); }
.stt26 .spec-table tr:last-child th, .stt26 .spec-table tr:last-child td{ border-bottom:none; }
.stt26 .spec-table th{ width:220px; color:var(--ink-soft); font-weight:600; background:var(--surface-alt); }

.stt26 .changelog-item{ display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); }
.stt26 .changelog-item:last-child{ border-bottom:none; }
.stt26 .changelog-ver{ flex:none; width:96px; font:700 13px var(--font-mono); color:var(--accent); }
.stt26 .changelog-date{ display:block; font-weight:400; color:var(--ink-faint); font-size:11px; margin-top:3px; }
.stt26 .changelog-body p{ margin:0 0 4px; font-size:.9rem; color:var(--ink); font-weight:600; }
.stt26 .changelog-body ul{ margin:4px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.86rem; line-height:1.6; list-style:disc; }

/* Demo checkout modal — same honest "no payment wired up" pattern as the
   coffee-page checkout preview; never collects real card details. */
.stt26 .checkout-overlay{ position:fixed; inset:0; background:rgba(15,15,20,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:300; }
.stt26 .checkout-overlay[hidden]{ display:none; }
.stt26 .checkout-modal{ position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px 26px 26px; box-shadow:0 24px 60px rgba(0,0,0,.28); text-align:center; }
.stt26 .checkout-modal-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:none; background:transparent; color:var(--ink-faint); font-size:20px; line-height:1; cursor:pointer; border-radius:8px; }
.stt26 .checkout-modal-close:hover{ background:var(--surface-alt); color:var(--ink); }
.stt26 .checkout-icon{ width:46px; height:46px; margin:0 auto 14px; border-radius:12px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent-ink); }
.stt26 .checkout-modal h3{ font-family:var(--font-display); font-size:19px; margin:0 0 8px; }
.stt26 .checkout-modal p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.stt26 .checkout-price{ font:800 28px/1 var(--font-mono); margin:0 0 18px; color:var(--ink); }

@media (max-width:640px){
  .stt26 .project-hero{ padding:28px 16px 6px; }
}

/* =========================================================================
   Blog article (detail) page — ported from
   backups_redesign_2026/scriptandtools-blog-detail-artifact.html.
   Reuses .page-container/.page-section/.eyebrow/.blog-tag/.section-head-row/
   .cta-banner/.cta-actions/.btn/.blog-post/.blog-post-media/.blog-info/
   .blog-meta/.blog-read/.blog-cover(+variants) from the shared/blog-listing
   blocks above — only page-specific classes below.
===================================================================== */

/* --- Reading progress bar (fixed, under the sticky header) --- */
.stt26 .reading-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:101; background:transparent; }
.stt26 .reading-progress-fill{ height:100%; width:0%; background:var(--accent); transition:width .1s linear; }

/* --- Article header --- */
.stt26 .article-header{ padding:44px 24px 8px; }
.stt26 .article-header .blog-tag{ position:static; display:inline-flex; width:fit-content; }
.stt26 .article-header h1{
  font-size:clamp(1.7rem, 1.25rem + 2.1vw, 2.5rem); font-weight:800; letter-spacing:-0.015em;
  line-height:1.18; margin-top:16px; max-width:26ch; text-wrap:balance;
}
.stt26 .article-deck{ margin-top:14px; max-width:64ch; color:var(--ink-soft); font-size:1.08rem; line-height:1.6; }
.stt26 .article-byline{ display:flex; align-items:center; gap:10px; margin-top:22px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.stt26 .article-byline-avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-strong); font-family:var(--font-mono); font-weight:700; font-size:.72rem;
  overflow:hidden;
}
.stt26 .article-byline-avatar img{ width:100%; height:100%; object-fit:cover; }
.stt26 .article-byline-name{ font-size:.87rem; font-weight:700; color:var(--ink); }
.stt26 .article-byline-meta{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); margin-top:1px; }
.stt26 .article-byline-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); flex:none; }

/* --- Article cover / banner slot (reuses .blog-cover system, larger box) --- */
.stt26 .article-cover{ position:relative; margin-top:28px; aspect-ratio:12/5; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.stt26 .article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.stt26 .article-cover .blog-cover{ position:absolute; inset:0; }
.stt26 .article-cover .blog-cover-ghost{ width:34%; opacity:.22; }
@media (max-width:640px){ .stt26 .article-cover{ aspect-ratio:4/3; } }

/* --- Layout: prose + sticky TOC --- */
.stt26 .article-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:52px; align-items:start; margin-top:36px; }
@media (max-width:960px){ .stt26 .article-layout{ grid-template-columns:1fr; gap:0; } }

.stt26 .article-toc{ position:sticky; top:88px; }
.stt26 .article-toc-label{ font-family:var(--font-mono); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.stt26 .toc-list{ display:flex; flex-direction:column; margin-top:10px; border-left:2px solid var(--border); }
.stt26 .toc-list a{
  display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent;
  font-size:.85rem; color:var(--ink-soft); text-decoration:none; line-height:1.4; transition:color .12s ease, border-color .12s ease;
}
.stt26 .toc-list a:hover{ color:var(--ink); }
.stt26 .toc-list a.is-active{ color:var(--accent-strong); border-left-color:var(--accent); font-weight:600; }
@media (max-width:960px){
  .stt26 .article-toc{ position:static; order:-1; margin-bottom:28px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised); }
  .stt26 .toc-list{ margin-top:8px; }
}

/* --- Article body typography --- */
.stt26 .article-body{ max-width:68ch; font-size:1.05rem; line-height:1.75; color:var(--ink); }
.stt26 .article-body > *{ max-width:68ch; }
.stt26 .article-body p{ margin:0 0 1.3em; }
.stt26 .article-body p:last-child{ margin-bottom:0; }
.stt26 .article-body h2{
  font-size:clamp(1.2rem, 1.05rem + .6vw, 1.4rem); font-weight:800; letter-spacing:-0.01em;
  margin:2.1em 0 .6em; line-height:1.3; scroll-margin-top:96px;
}
.stt26 .article-body h2:first-child{ margin-top:0; }
.stt26 .article-body h3{ font-size:1.02rem; font-weight:700; margin:1.7em 0 .4em; scroll-margin-top:96px; }
.stt26 .article-body ul, .stt26 .article-body ol{ margin:0 0 1.3em; padding-left:1.3em; line-height:1.7; list-style:revert; }
.stt26 .article-body li{ margin-bottom:.4em; }
.stt26 .article-body li:last-child{ margin-bottom:0; }
.stt26 .article-body img{ border-radius:var(--radius-md); margin:1.4em 0; }
.stt26 .article-body a{ color:var(--accent-strong); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; }
.stt26 .article-body a:hover{ text-decoration-color:currentColor; }
.stt26 .article-body strong{ font-weight:700; color:var(--ink); }

.stt26 .pull-quote{
  margin:1.8em 0; padding:2px 0 2px 22px; border-left:3px solid var(--accent);
  font-family:var(--font-display); font-size:1.28rem; font-weight:700; letter-spacing:-0.01em;
  line-height:1.45; color:var(--ink); max-width:60ch;
}

.stt26 .code-block{
  margin:1.4em 0; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-alt);
  overflow-x:auto; max-width:68ch;
}
.stt26 .code-block-label{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px;
  border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
}
.stt26 .code-block pre{ margin:0; padding:16px 18px; }
.stt26 .code-block code{ font-family:var(--font-mono); font-size:.83rem; line-height:1.65; color:var(--ink); white-space:pre; }

/* --- Author bio card --- */
.stt26 .author-card{
  display:flex; gap:16px; align-items:flex-start; margin-top:3em; padding:22px;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-raised); max-width:68ch;
}
.stt26 .author-card-avatar{
  width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-strong); font-family:var(--font-mono); font-weight:700; font-size:.85rem;
  overflow:hidden;
}
.stt26 .author-card-avatar img{ width:100%; height:100%; object-fit:cover; }
.stt26 .author-card h3{ font-size:.92rem; font-weight:700; }
.stt26 .author-card p{ margin-top:4px; font-size:.85rem; color:var(--ink-soft); line-height:1.55; }

/* --- Share row --- */
.stt26 .share-row{ display:flex; align-items:center; gap:10px; margin-top:28px; }
.stt26 .share-label{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-right:2px; }
.stt26 .share-btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface-raised); color:var(--ink-soft); transition:border-color .12s ease, color .12s ease;
}
.stt26 .share-btn:hover{ border-color:var(--border-strong); color:var(--accent-strong); }
.stt26 .share-btn svg{ width:16px; height:16px; }
.stt26 .share-btn.is-copied{ color:var(--accent-strong); border-color:var(--accent); }

/* --- Related articles grid (reuses .blog-post card, 3 across) --- */
.stt26 .related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:22px; }
@media (max-width:780px){ .stt26 .related-grid{ grid-template-columns:1fr; } }

@media (max-width:480px){
  .stt26 .article-header{ padding:32px 16px 4px; }
}

/* =========================================================================
   Login / Sign-up modal — was styled entirely by the pre-redesign
   css/header-styles.css (old --dark/--gray/--gradient tokens, Font Awesome
   icons, and no .stt26 scoping at all, so none of the locked-palette design
   system applied to it). Rebuilt here to match the rest of the site, and
   given an explicit max-height + overflow-y so the card can never grow to
   fill the full viewport height — it stays a compact centered card the way
   every other modal on the site (checkout, etc.) does. These rules are
   more specific than header-styles.css's unscoped ones (extra .stt26
   ancestor), so they win without needing to touch that file.
===================================================================== */
.stt26 .auth-modal-overlay{
  position:fixed; inset:0; background:rgba(15,15,20,.55);
  z-index:300; display:none; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .2s ease;
}
.stt26 .auth-modal-overlay.active{ display:flex; opacity:1; }
.stt26 .auth-modal-container{
  width:100%; max-width:420px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(15,23,42,.28); position:relative;
  transform:translateY(20px) scale(.97); transition:transform .25s cubic-bezier(.16,1,.3,1);
  text-align:left;
}
.stt26 .auth-modal-overlay.active .auth-modal-container{ transform:translateY(0) scale(1); }

.stt26 .modal-close-btn{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  background:var(--surface-alt); border:none; color:var(--ink-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
  z-index:10;
}
.stt26 .modal-close-btn:hover{ background:var(--border); color:var(--ink); }

.stt26 .auth-header-section{ text-align:center; padding:28px 28px 8px; }
.stt26 .logo-mini{
  width:40px; height:40px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.1rem;
}
.stt26 .auth-header-section h3{ font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 4px; }
.stt26 .auth-header-section p{ color:var(--ink-soft); font-size:.9rem; margin:0; }

.stt26 .auth-tabs-wrapper{ padding:16px 28px 0; }
.stt26 .auth-tabs{ display:flex; background:var(--surface-alt); padding:4px; border-radius:var(--radius-sm); gap:0; }
.stt26 .auth-tab-btn{
  flex:1; padding:9px; border:none; background:transparent; color:var(--ink-soft);
  font-weight:600; font-size:.87rem; border-radius:7px; cursor:pointer; transition:all .15s ease;
}
.stt26 .auth-tab-btn.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

.stt26 .auth-body{ padding:22px 28px 28px; }

.stt26 .google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); padding:11px;
  border-radius:var(--radius-sm); font-weight:600; color:var(--ink); cursor:pointer;
  font-size:.9rem; margin-bottom:18px; transition:background .15s ease, border-color .15s ease;
}
.stt26 .google-btn:hover{ background:var(--surface-alt); border-color:var(--border-strong); }

.stt26 .auth-divider{ display:flex; align-items:center; margin-bottom:18px; }
.stt26 .auth-divider span{ padding:0 10px; color:var(--ink-faint); font-size:.75rem; font-weight:600; background:var(--surface); }
.stt26 .auth-divider::before, .stt26 .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }

.stt26 .auth-form{ display:none; }
.stt26 .auth-form.active{ display:block; }

.stt26 .auth-group{ margin-bottom:16px; display:block; }
.stt26 .auth-group label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.stt26 .auth-input-wrapper{ position:relative; width:100%; }
.stt26 .auth-input-wrapper i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; z-index:2; }
.stt26 .auth-input-wrapper input{
  width:100%; display:block; padding:11px 14px 11px 42px; background:var(--surface-alt);
  border:1px solid transparent; border-radius:var(--radius-sm); font-size:.92rem; color:var(--ink);
  font-weight:500; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.stt26 .auth-input-wrapper input:focus{ background:var(--surface); border-color:var(--accent); box-shadow:var(--focus-ring); outline:none; }
.stt26 .auth-input-wrapper input:focus + i{ color:var(--accent); }

.stt26 .forgot-wrapper{ text-align:right; margin-top:6px; }
.stt26 .forgot-wrapper a{ font-size:.82rem; color:var(--ink-faint); text-decoration:none; font-weight:500; }
.stt26 .forgot-wrapper a:hover{ color:var(--accent-strong); }

.stt26 .submit-btn{
  width:100%; padding:12px; background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:var(--radius-sm); font-weight:600; font-size:.95rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px;
  transition:background .15s ease;
}
.stt26 .submit-btn:hover{ background:var(--accent-strong); }

.stt26 .legal-text{ font-size:.72rem; color:var(--ink-faint); text-align:center; margin-top:14px; }

.stt26 .auth-message{
  padding:11px 14px; margin-bottom:14px; border-radius:var(--radius-sm); font-size:.87rem;
  font-weight:500; display:none; text-align:center;
}
.stt26 .auth-message.success{ background:var(--good-soft, #F0FDF4); color:#166534; border:1px solid #86EFAC; display:block; }
.stt26 .auth-message.error{ background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); display:block; }

@media (max-width:480px){
  .stt26 .auth-modal-container{ max-width:100%; border-radius:var(--radius-md); }
  .stt26 .auth-header-section{ padding:22px 18px 8px; }
  .stt26 .auth-tabs-wrapper{ padding:12px 18px 0; }
  .stt26 .auth-body{ padding:18px 18px 24px; }
}

/* =========================================================================
   WooCommerce Cart / Checkout / My Account — these are plain WP Pages with
   no custom Page Template, so they used to render through page.php's old
   Bootstrap article wrapper with zero .stt26 scoping (see page.php). Now
   wrapped in .stt26 there; this maps WooCommerce Blocks' own (well-known,
   stable-across-versions) class names onto the locked-palette tokens so
   buttons/inputs/totals read as part of this site instead of vanilla
   WooCommerce defaults. Not a full pixel-for-pixel redesign of the block
   checkout UI itself — just enough to look native to the site.
===================================================================== */
.stt26 .woocommerce, .stt26 .wc-block-checkout, .stt26 .wc-block-cart{ font-family:var(--font-body); color:var(--ink); }
.stt26 .wc-block-components-checkout-place-order-button,
.stt26 .wc-block-cart__submit-button,
.stt26 .wc-block-components-button:not(.is-link){
  background:var(--accent) !important; border-color:var(--accent) !important; color:var(--accent-ink) !important;
  border-radius:var(--radius-sm) !important; font-family:var(--font-body) !important; font-weight:600 !important;
}
.stt26 .wc-block-components-checkout-place-order-button:hover,
.stt26 .wc-block-cart__submit-button:hover,
.stt26 .wc-block-components-button:not(.is-link):hover{
  background:var(--accent-strong) !important; border-color:var(--accent-strong) !important;
}
.stt26 .wc-block-components-text-input input,
.stt26 .wc-block-components-combobox input,
.stt26 .wc-block-components-textarea textarea,
.stt26 .woocommerce input.input-text,
.stt26 .woocommerce select,
.stt26 .woocommerce textarea{
  border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important;
  font-family:var(--font-body) !important; color:var(--ink) !important;
}
.stt26 .wc-block-components-text-input input:focus,
.stt26 .wc-block-components-combobox input:focus{
  border-color:var(--accent) !important; box-shadow:var(--focus-ring) !important;
}
.stt26 .wc-block-components-panel,
.stt26 .wc-block-components-order-summary,
.stt26 .wc-block-components-totals-item,
.stt26 .woocommerce table.shop_table{
  border-color:var(--border) !important;
}
.stt26 .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.stt26 .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  color:var(--ink) !important; font-weight:700 !important;
}
.stt26 .woocommerce-message, .stt26 .woocommerce-info{
  border-top-color:var(--accent) !important;
}
.stt26 .woocommerce-message::before, .stt26 .woocommerce-info::before{
  color:var(--accent) !important;
}
.stt26 a.wc-forward,
.stt26 .woocommerce a.button,
.stt26 .woocommerce button.button.alt{
  background:var(--accent) !important; color:var(--accent-ink) !important; border-radius:var(--radius-sm) !important;
}
.stt26 a.wc-forward:hover,
.stt26 .woocommerce a.button:hover,
.stt26 .woocommerce button.button.alt:hover{
  background:var(--accent-strong) !important;
}

/* ---- Long text can never break a card ----------------------------------
   Descriptions are clamped to 2 lines (3 on the larger feature cards) and
   titles to 2 lines, on every card type: tools, projects and games (the
   .tool-card grid), the homepage project showcase, and the featured
   carousels. The full text stays in the HTML for SEO and screen readers. */
.stt26 .tool-card-body,
.stt26 .project-info{ min-width:0; }

.stt26 .tool-card h3,
.stt26 .project-feature h3,
.stt26 .project-compact h3{ overflow-wrap:anywhere; }

.stt26 .tool-card h3,
.stt26 .project-compact h3,
.stt26 .tool-card-body p,
.stt26 .project-compact p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.stt26 .project-feature p,
.stt26 .feature-desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.stt26 .tool-card-body p,
.stt26 .project-compact p{ overflow-wrap:anywhere; }

/* Price sits on its own line so a long description can't push it out of view. */
.stt26 .tool-card-price{ font-size:.84rem; color:var(--ink-soft); margin-top:auto; padding-top:2px; }
.stt26 .tool-card-price .price-tag{ margin-left:0; }

/* Projects featured carousel: keep the blurb short (2 lines). */
.stt26 .feature-desc.feature-desc--short{ -webkit-line-clamp:2; line-clamp:2; }

/* ---- Rendering cost: skip layout/paint of long below-the-fold blocks until they scroll near the
   viewport (the Tools page alone has ~100 cards with inline SVG previews). The size hint keeps the
   scrollbar stable; "auto" remembers the real height once a block has been shown. ---- */
.stt26 .tool-group{ content-visibility:auto; contain-intrinsic-size:auto 780px; }
.stt26 .projects-section,
.stt26 .games-section,
.stt26 .blog-section,
.stt26 .services-section,
.stt26 .submit-section{ content-visibility:auto; contain-intrinsic-size:auto 640px; }