/* Streams8K Design System - green brand, richer surfaces, rebuilt chrome. */

/* ---------- 1. Tokens: keep the green brand, add tinted depth ---------- */
:root{
  --spk-bg:#f2f9f5;
  --spk-bg2:#eef3fc;
  --spk-bg3:#ffffff;
  --spk-line:#dde8e2;
  --spk-line2:#c9dcd2;
  --spk-pri:#0e9f6e;
  --spk-sec:#14b8a6;
  --spk-pri-soft:#e3f6ee;
  --spk-grad:linear-gradient(135deg,#15a34a,#4dbe28 55%,#0d9488);
  --spk-grad-dark:linear-gradient(135deg,#15803d,#16a34a 48%,#65a30d);
  --spk-cta:linear-gradient(135deg,#15a34a,#4dbe28 52%,#8bc519);
  --spk-cta2:linear-gradient(135deg,#65a30d,#a3e635);
  --spk-acc:#0e9f6e;
  --spk-acc-soft:#e3f6ee;
  --s8k-ink:#04140f;
  --s8k-ink2:#08211a;
  --s8k-ink-txt:#dcece5;
  --s8k-r:20px;
  --spk-sh:0 8px 30px rgba(6,60,44,.09);
  --spk-sh2:0 18px 46px rgba(11,84,62,.16);
}
body{
  background:
    radial-gradient(900px 420px at 8% -8%,rgba(14,159,110,.10),transparent 60%),
    radial-gradient(760px 380px at 96% 4%,rgba(20,184,166,.11),transparent 62%),
    linear-gradient(180deg,#f6fbf8 0%,#eef5f8 45%,#f7faf9 100%);
  background-attachment:fixed;
}
[data-cat="voice"]  {--spk-acc:#7c3aed;--spk-acc-soft:#f3eeff;--s8k-acc-d:#2b1c4e;--s8k-acc-l:#c4b5fd}
[data-cat="video"]  {--spk-acc:#ec4899;--spk-acc-soft:#ffeef7;--s8k-acc-d:#4a1733;--s8k-acc-l:#f9a8d4}
[data-cat="docs"]   {--spk-acc:#f59e0b;--spk-acc-soft:#fff5e6;--s8k-acc-d:#452c08;--s8k-acc-l:#fcd34d}
[data-cat="image"]  {--spk-acc:#06b6d4;--spk-acc-soft:#e4f8fd;--s8k-acc-d:#0b3a45;--s8k-acc-l:#67e8f9}
[data-cat="text"]   {--spk-acc:#3b82f6;--spk-acc-soft:#e9f1ff;--s8k-acc-d:#12305f;--s8k-acc-l:#93c5fd}
[data-cat="social"] {--spk-acc:#d946ef;--spk-acc-soft:#fdeaff;--s8k-acc-d:#451347;--s8k-acc-l:#f0abfc}
[data-cat="dev"]    {--spk-acc:#6366f1;--spk-acc-soft:#eceeff;--s8k-acc-d:#222a5f;--s8k-acc-l:#a5b4fc}
[data-cat="calc"]   {--spk-acc:#f97316;--spk-acc-soft:#fff0e6;--s8k-acc-d:#45230c;--s8k-acc-l:#fdba74}
[data-cat="fun"]    {--spk-acc:#eab308;--spk-acc-soft:#fffbe6;--s8k-acc-d:#41380a;--s8k-acc-l:#fde047}
[data-cat="studio"] {--spk-acc:#f43f5e;--spk-acc-soft:#ffeaef;--s8k-acc-d:#4a1524;--s8k-acc-l:#fda4af}
/* fallback so any uncategorised node still gets a readable dark surface */
:root{--s8k-acc-d:#14251f;--s8k-acc-l:#7fd8b4}

/* ---------- 2. Promo strip ---------- */
.s8k-promo{background:var(--spk-cta);color:#06210f;font-size:13px}
.s8k-promo-in{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;padding:10px 22px;text-align:center;max-width:1380px}
.s8k-promo-item b{font-weight:800}
.s8k-promo-sep{width:4px;height:4px;border-radius:50%;background:rgba(6,33,15,.45)}

/* ---------- 2b. Contextual tool list on tool pages ---------- */
.s8k-ctxbar{border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,var(--s8k-acc-d),#0a0d0c 62%)}
.s8k-ctxbar-in{display:flex;align-items:center;gap:16px;padding:12px 22px;max-width:1380px;
  margin-inline:auto;overflow-x:auto;scrollbar-width:thin}
.s8k-ctx-title{display:flex;flex-direction:column;gap:2px;text-decoration:none;
  flex-shrink:0;padding-right:16px;border-right:1px solid rgba(255,255,255,.14)}
.s8k-ctx-kicker{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--s8k-acc-l);font-weight:800}
.s8k-ctx-name{font-size:15px;font-weight:800;color:#fff;white-space:nowrap}
.s8k-ctx-list{display:flex;align-items:center;gap:7px;flex:1}
.s8k-ctx-a{display:inline-block;padding:7px 14px;border-radius:999px;font-size:13.5px;
  font-weight:650;white-space:nowrap;text-decoration:none;color:#c8d8d0;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05);transition:.16s}
.s8k-ctx-a:hover{background:rgba(255,255,255,.14);color:#fff;border-color:var(--s8k-acc-l)}
.s8k-ctx-a.is-current{background:var(--spk-cta);color:#06210f;border-color:transparent;font-weight:800}
.s8k-ctx-cat{flex-shrink:0;font-size:13px;font-weight:700;color:var(--s8k-acc-l);
  text-decoration:none;white-space:nowrap;padding:7px 14px;border-radius:999px;
  background:var(--s8k-acc-d)}
.s8k-ctx-cat:hover{background:var(--s8k-acc-l);color:#06210f}

/* ---------- 2c. Standalone page copy (Privacy, About, Contact) ----------
   The host blank template emits page copy with no container, so it began at
   the very left edge of the viewport. This gives it a measured column on a
   white document card with room to breathe between blocks.

   These rules are deliberately dark text on a light card. The header and
   footer are dark surfaces and use --s8k-ink-txt; the page body background is
   pale, so white text here was invisible. Keep this block on the light scale. */
.s8k-page{
  --lg-ink:#0a0f18; --lg-body:#18212f; --lg-soft:#46536a;
  --lg-link:#0a6b4a; --lg-line:#e2e8f0; --lg-chip:#f2f5f9;
  max-width:920px;margin:0 auto;padding:46px 44px 62px;
  background:#fff;border:1px solid var(--lg-line);border-radius:18px;
  box-shadow:0 2px 20px rgba(16,32,24,.05);
  color:var(--lg-body);font-size:16.5px;line-height:1.8;overflow-wrap:break-word}
.s8k-page > *:first-child{margin-top:0}
.s8k-page > h1{font-size:clamp(29px,4.2vw,42px);line-height:1.14;letter-spacing:-.02em;
  font-weight:850;color:var(--lg-ink);margin:0 0 12px}
.s8k-page > h1 + p,.s8k-page > .s8k-lead{font-size:18.5px;line-height:1.6;
  color:var(--lg-soft);font-weight:600;margin:0 0 32px}
.s8k-page > h2{font-size:22px;line-height:1.32;font-weight:800;color:var(--lg-ink);
  margin:40px 0 13px;padding-top:20px;border-top:1px solid var(--lg-line);
  scroll-margin-top:120px}
.s8k-page > h2:first-of-type{margin-top:26px}
.s8k-page > h3{font-size:18px;font-weight:750;color:var(--lg-ink);margin:28px 0 9px}
.s8k-page > h4{font-size:16px;font-weight:750;color:var(--lg-ink);margin:22px 0 8px}
.s8k-page > p{margin:0 0 17px}
.s8k-page > p strong,.s8k-page > p b{color:var(--lg-ink);font-weight:750}
.s8k-page > ul,.s8k-page > ol{margin:0 0 20px;padding-left:25px}
.s8k-page > ul li,.s8k-page > ol li{margin:0 0 10px;padding-left:3px}
.s8k-page > ul li::marker,.s8k-page > ol li::marker{color:var(--lg-link);font-weight:700}
.s8k-page > ul ul,.s8k-page > ol ol,.s8k-page > ul ol,.s8k-page > ol ul{margin:10px 0 0}
.s8k-page a{color:var(--lg-link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.s8k-page a:hover{color:#084f37}
.s8k-page code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--lg-chip);border:1px solid var(--lg-line);
  padding:2px 6px;border-radius:6px;color:#0f2a20;overflow-wrap:anywhere}
.s8k-page > table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.s8k-page > table th,.s8k-page > table td{border:1px solid var(--lg-line);
  padding:10px 13px;text-align:left}
.s8k-page > table th{background:#f7f9fc;color:var(--lg-ink);font-weight:750}
.s8k-page > blockquote{margin:0 0 20px;padding:14px 20px;
  border-left:3px solid var(--lg-link);background:#f7f9fc;border-radius:0 10px 10px 0}
.s8k-page > hr{border:0;border-top:1px solid var(--lg-line);margin:30px 0}
.s8k-page > img{max-width:100%;height:auto;border-radius:12px}
/* The host template injects <br /> for source newlines. Paragraph text is
   stored on one line, so these only appear where a break was really wanted. */
.s8k-page > p br:only-child{display:none}
@media (max-width:640px){
  .s8k-page{padding:32px 20px 48px;font-size:16px;line-height:1.75;border-radius:14px}
  .s8k-page > h1 + p,.s8k-page > .s8k-lead{font-size:17px}
  .s8k-page > h2{font-size:20px;margin:32px 0 11px;padding-top:17px}
  .s8k-page > ul,.s8k-page > ol{padding-left:22px}
}

/* ---------- 2e. Same treatment for the About and Contact legal blocks ----------
   Those two pages keep the host's spk-wrap spk-legal container. Matched to
   .s8k-page so all three legal pages read identically, on the same light
   scale, because the page background is pale. */
.spk-wrap.spk-legal{
  --lg-ink:#0a0f18; --lg-body:#18212f; --lg-soft:#46536a;
  --lg-link:#0a6b4a; --lg-line:#e2e8f0; --lg-chip:#f2f5f9;
  max-width:920px;padding:40px 44px 56px;background:#fff;
  border:1px solid var(--lg-line);border-radius:18px;
  box-shadow:0 2px 20px rgba(16,32,24,.05)}
/* The host ships .spk-legal a in its light green, which is only 3.16:1 on this
   background. Overridden here for any legal block that is not also spk-wrap. */
.spk-legal a{color:var(--lg-link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.spk-wrap.spk-legal p,.spk-wrap.spk-legal li{line-height:1.8;color:var(--lg-body)}
.spk-wrap.spk-legal p{margin:0 0 17px}
.spk-wrap.spk-legal h2{font-size:22px;line-height:1.32;font-weight:800;color:var(--lg-ink);
  margin:40px 0 13px;padding-top:20px;border-top:1px solid var(--lg-line);
  scroll-margin-top:120px}
.spk-wrap.spk-legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.spk-wrap.spk-legal h3{font-size:18px;font-weight:750;color:var(--lg-ink);margin:28px 0 9px}
.spk-wrap.spk-legal ul,.spk-wrap.spk-legal ol{margin:0 0 20px;padding-left:25px}
.spk-wrap.spk-legal li{margin:0 0 10px;padding-left:3px}
.spk-wrap.spk-legal ul li::marker,.spk-wrap.spk-legal ol li::marker{color:var(--lg-link);font-weight:700}
.spk-wrap.spk-legal a{color:var(--lg-link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.spk-wrap.spk-legal a:hover{color:#084f37}
.spk-wrap.spk-legal b,.spk-wrap.spk-legal strong{color:var(--lg-ink);font-weight:750}
.spk-wrap.spk-legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--lg-chip);border:1px solid var(--lg-line);
  padding:2px 6px;border-radius:6px;color:#0f2a20;overflow-wrap:anywhere}
@media (max-width:640px){
  .spk-wrap.spk-legal{padding:30px 20px 46px;border-radius:14px}
  .spk-wrap.spk-legal h2{font-size:20px;margin:32px 0 11px;padding-top:17px}
}

/* ---------- 2d. Advertising consent banner retired ----------
   No advertising network is running, so the accept/decline prompt has nothing
   to ask about. Hidden in CSS and switched off in the script as well, so it
   cannot flash before the stylesheet applies. Restore both if ads return. */
.spk-consent,.spk-consent-manage{display:none!important}

/* ---------- 3. Header: solid black ---------- */
.s8k-hdr{position:sticky;top:0;z-index:120;background:#07090a;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.s8k-hdr.is-stuck{box-shadow:0 14px 40px rgba(0,0,0,.55)}
.s8k-hdr-main{display:flex;align-items:center;gap:24px;padding:15px 22px;min-height:74px;
  max-width:1380px;margin-inline:auto}
.s8k-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.s8k-logo-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--spk-cta);color:#06210f;font-weight:900;font-size:14.5px;letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(21,163,74,.34)}
.s8k-logo-text{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.3px}
.s8k-nav-list{display:flex;align-items:center;gap:2px;margin-left:10px;flex:1}
.s8k-nav-list>a,.s8k-nav-btn{position:relative;padding:10px 15px;border-radius:11px;font-weight:650;
  font-size:15px;color:#d6e2dc;text-decoration:none;background:none;border:0;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:color .16s,background .16s}
.s8k-nav-list>a:hover,.s8k-nav-btn:hover,.s8k-nav-drop.is-open .s8k-nav-btn{
  background:rgba(255,255,255,.09);color:#fff}
.s8k-caret{display:inline-block;width:8px;height:8px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7}
.s8k-hdr-right{display:flex;align-items:center;gap:11px}
.s8k-search{display:flex;align-items:center}
.s8k-search input{width:250px;padding:11px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#fff;font-size:14px;font-family:inherit;outline:none;
  transition:border-color .18s,background .18s,box-shadow .18s}
.s8k-search input::placeholder{color:#8fa49b}
.s8k-search input:focus{border-color:var(--spk-acc,#22c55e);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(34,197,94,.16)}
.s8k-cta{display:inline-block;padding:12px 24px;border-radius:999px;background:var(--spk-cta);
  color:#06210f;font-weight:800;font-size:14.5px;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 22px rgba(21,163,74,.34);transition:transform .16s,box-shadow .16s,filter .16s}
.s8k-cta:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 14px 30px rgba(21,163,74,.45)}
.s8k-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  border-radius:13px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  cursor:pointer;padding:0}
.s8k-burger span{display:block;width:20px;height:2px;margin:0 auto;background:#e8f1ec;border-radius:2px}

/* ---------- 4. Mega menu (dark) ---------- */
.s8k-nav-drop{position:relative}
.s8k-mega{position:absolute;top:calc(100% + 14px);left:-10px;width:min(1180px,94vw);
  display:none;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px;padding:20px;
  background:#0d1211;border:1px solid rgba(255,255,255,.11);border-radius:19px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);z-index:130}
.s8k-nav-drop.is-open .s8k-mega{display:grid}
.s8k-mega-col{border-radius:14px;padding:11px;background:var(--s8k-acc-d);border:1px solid rgba(255,255,255,.07)}
.s8k-mega-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;
  color:var(--s8k-acc-l);text-decoration:none;margin-bottom:7px;padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.11)}
.s8k-mega-head em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.12);padding:2px 8px;border-radius:999px;color:#e8f1ec}
.s8k-mega-a{display:block;padding:6px 8px;border-radius:9px;font-size:13px;color:#c2d2ca;
  text-decoration:none;line-height:1.35}
.s8k-mega-a:hover{background:rgba(255,255,255,.11);color:#fff;font-weight:650}
.s8k-mega-all{grid-column:1/-1;text-align:center;padding:12px;border-radius:13px;
  background:var(--spk-cta);color:#06210f;font-weight:800;text-decoration:none;font-size:14.5px}

/* ---------- 5. Category chips (dark) ---------- */
.s8k-catbar{border-top:1px solid rgba(255,255,255,.08);background:#0a0d0c}
.s8k-catbar-in{display:flex;gap:9px;overflow-x:auto;padding:11px 22px;max-width:1380px;
  margin-inline:auto;scrollbar-width:thin}
.s8k-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--s8k-acc-l);text-decoration:none;font-size:13.5px;
  font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.10);transition:.16s}
.s8k-chip:hover{background:var(--s8k-acc-d);border-color:var(--s8k-acc-l);transform:translateY(-1px)}
.s8k-chip-name{display:inline-block}
.s8k-chip-n{font-size:11px;font-weight:800;background:rgba(255,255,255,.13);
  padding:1px 8px;border-radius:999px;color:#dfeae4}

/* ---------- 6. Mobile drawer (dark) ---------- */
.s8k-drawer{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);overflow-y:auto}
.s8k-drawer[hidden]{display:none}
.s8k-drawer-in{background:#0b0f0e;min-height:100%;padding:22px;max-width:540px;
  box-shadow:0 0 70px rgba(0,0,0,.7)}
.s8k-search-drawer{margin-bottom:18px}
.s8k-search-drawer input{width:100%}
.s8k-dacc{border:1px solid rgba(255,255,255,.10);border-radius:14px;margin-bottom:9px;
  background:var(--s8k-acc-d);overflow:hidden}
.s8k-dacc summary{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;
  font-weight:750;font-size:15px;color:var(--s8k-acc-l);list-style:none}
.s8k-dacc summary::-webkit-details-marker{display:none}
.s8k-dacc summary em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.13);padding:2px 9px;border-radius:999px;color:#dfeae4}
.s8k-dacc>a{display:block;padding:10px 15px 10px 42px;border-top:1px solid rgba(255,255,255,.06);
  color:#c8d8d0;text-decoration:none;font-size:14.5px}
.s8k-dacc>a:active{background:rgba(255,255,255,.10)}
.s8k-dacc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.s8k-dacc-links a{padding:11px 18px;border-radius:12px;background:rgba(255,255,255,.08);
  color:#fff;font-weight:700;text-decoration:none;font-size:14.5px}

/* ---------- 7. Footer ---------- */
.s8k-foot{position:relative;margin-top:60px;background:
  radial-gradient(700px 300px at 12% 0%,rgba(20,184,166,.20),transparent 60%),
  radial-gradient(600px 300px at 88% 10%,rgba(14,159,110,.18),transparent 62%),
  linear-gradient(165deg,#08211a 0%,#04140f 60%,#061a24 100%);
  color:var(--s8k-ink-txt);border-top:0}
.s8k-foot a{color:var(--s8k-ink-txt)}
.s8k-foot-pop{padding:40px 20px 0;border-bottom:1px solid rgba(255,255,255,.10);
  padding-bottom:30px;margin-bottom:34px}
.s8k-foot-poptitle{margin:0 0 16px;font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:#7fbfa6;font-weight:800}
.s8k-foot-poplist{display:flex;flex-wrap:wrap;gap:10px}
.s8k-poplink{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  text-decoration:none;font-size:13.5px;font-weight:650;color:#d6e5de;
  transition:transform .16s,background .16s,border-color .16s}
.s8k-poplink:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);
  border-color:var(--s8k-acc-l);color:#fff}
.s8k-poprank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--s8k-acc-d);color:var(--s8k-acc-l);font-size:11.5px;font-weight:800;flex-shrink:0}
.s8k-popname{white-space:nowrap}
.s8k-foot-top{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;padding:56px 20px 34px}
.s8k-logo-foot .s8k-logo-text{color:#fff}
.s8k-foot-tag{margin:16px 0 18px;font-size:14.5px;line-height:1.65;color:#a9c8bc;max-width:44ch}
.s8k-trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.s8k-trust li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-size:12.5px;font-weight:600}
.s8k-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.s8k-foot-col h3{font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:#7fbfa6;
  margin:0 0 11px;font-weight:700}
.s8k-foot-col a{display:block;padding:4px 0;font-size:13.5px;color:#bcd7cd;text-decoration:none;
  line-height:1.45}
.s8k-foot-col a:hover{color:#fff}
.s8k-foot-all{color:var(--spk-sec)!important;font-weight:700;margin-top:3px}
.s8k-foot-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin:8px 20px 0;padding:26px 30px;border-radius:20px;
  background:linear-gradient(120deg,rgba(14,159,110,.22),rgba(20,184,166,.16));
  border:1px solid rgba(255,255,255,.14)}
.s8k-foot-cta h2{margin:0 0 5px;font-size:20px;color:#fff;letter-spacing:-.3px}
.s8k-foot-cta p{margin:0;font-size:14px;color:#a9c8bc}
.s8k-search-foot{flex:1;min-width:280px}
.s8k-search-foot input{flex:1;width:auto;background:rgba(255,255,255,.95);min-width:0}
.s8k-search-foot button{margin-left:9px;padding:11px 24px;border-radius:999px;border:0;
  background:var(--spk-cta);color:#06210f;font-weight:800;cursor:pointer;font-family:inherit;font-size:14px}
.s8k-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:28px;padding:20px;border-top:1px solid rgba(255,255,255,.10)}
.s8k-foot-bottom p{margin:0;font-size:13px;color:#8bb3a4}
.s8k-foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.s8k-foot-bottom a{font-size:13px;text-decoration:none;color:#a9c8bc}
.s8k-foot-bottom a:hover{color:#fff}

/* ---------- 8. Tool cards get their category accent ---------- */
.spk-tool,[data-cat]{border-radius:var(--s8k-r)}
.spk-tool{border-top:3px solid var(--spk-acc);box-shadow:var(--spk-sh);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.spk-tool:hover{transform:translateY(-3px);box-shadow:var(--spk-sh2);border-color:var(--spk-acc)}
.spk-tool-title{font-weight:750}

/* ---------- 8b. Overrides on host-rendered buttons ----------
   The host buttons inherit the teal gradient, which reads as blue next to the
   new black header. Repoint them at the green brand so "Try the Tools" and the
   rest of the primary buttons match. */
.spk-btn-primary,.spk-btn-big,.spk-btn-mini{background:var(--spk-cta);color:#06210f}
.spk-btn-primary:hover,.spk-btn-big:hover,.spk-btn-mini:hover{filter:brightness(1.07)}
.spk-btn-ghost{background:rgba(0,0,0,.04);border-color:rgba(6,60,44,.20)}
.spk-hero .spk-btn-ghost{background:rgba(255,255,255,.8);border-color:rgba(6,60,44,.22)}

/* ---------- 8c. Decorative pictographs removed from tool names ----------
   The host prints a pictograph in front of every tool title and in front of
   every category heading. Several are simply wrong (Text to Speech shipped with
   a parcel glyph, Voice with a clapperboard), which is what reads as a stray dot
   beside the name. The cards keep their colour through the accent border above,
   so the glyphs are hidden rather than replaced. */
.spk-tool-ico,.spk-tsec-ico{display:none!important}
.spk-tool-head{gap:0}
.spk-cat-pill,.spk-tool-cat{font-weight:700}

/* ---------- 9. Responsive ---------- */
@media (max-width:1080px){
  .s8k-nav-list{display:none}
  .s8k-search input{width:170px}
  .s8k-foot-top{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .s8k-burger{display:flex}
  .s8k-cta{display:none}
  .s8k-search input{width:100%}
  .s8k-hdr-right .s8k-search{flex:1}
  .s8k-hdr-main{gap:12px;flex-wrap:wrap}
  .s8k-hdr-right{width:100%}
  .s8k-foot-cta{padding:22px}
  .s8k-foot-cta h2{font-size:18px}
  .s8k-promo-item{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .s8k-cta,.s8k-chip{transition:none}
}