/* ============================================================
   Quikbench — shared sitewide stylesheet
   Edit design tokens, header, footer, or any shared component
   ONCE here and it applies across the entire site automatically.
   Page-specific CSS (unique tool layouts) stays in each page's
   own <style> block, loaded AFTER this file so it can still
   override anything here if a specific page needs to.
   ============================================================ */

:root{
  --ink:#151A21; --steel-dark:#151A21; --steel:#5B6472;
  --paper:#FFFFFF; --bench:#F6F7F9;
  --amber:#0E9F6E; --amber-dark:#0B7A54;
  --good:#0E9F6E; --warn:#B87C00; --bad:#DC2626;
  --line:#E7E9ED;
  --display:'Manrope',sans-serif; --body:'Manrope',sans-serif; --mono:'Manrope',sans-serif;
}

/* ---------- Base reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--amber-dark); outline-offset:2px;}

/* ---------- Grain texture ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header / nav ---------- */
header{padding:20px 6vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px 20px;}
.brand{font-family:var(--display); font-weight:800; font-size:1.3rem; display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.95rem;font-weight:800;}
.header-links{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.header-links a{font-weight:600; font-size:0.92rem; text-decoration:none; color:var(--steel);}
.header-links a:hover{color:var(--ink);}
.header-links a.nav-cta{background:var(--amber); color:#fff; padding:10px 18px; border-radius:8px; font-weight:700;}
.header-links a.nav-cta:hover{background:var(--amber-dark); color:#fff;}
.menu-toggle{display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer; padding:0; flex:none;}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--ink); position:relative;}
.menu-toggle span::before, .menu-toggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);}
.menu-toggle span::before{top:-6px;}
.menu-toggle span::after{top:6px;}
@media (max-width:600px){
  header{gap:6px 16px;}
  .tagline{display:none;}
  .menu-toggle{display:flex;}
  .header-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
    flex-direction:column; align-items:stretch; gap:0; width:auto;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 8px 16px rgba(21,26,33,0.08);
  }
  .header-links.open{display:flex;}
  .header-links a{
    width:100%; padding:16px 5vw; border-top:1px solid var(--line); text-decoration:none;
    color:var(--ink); font-size:0.95rem;
  }
  .header-links a:first-child{border-top:none;}
  .header-links a.nav-cta{border-radius:0; text-align:center;}
}

/* ---------- Footer ---------- */
footer{padding:28px 6vw 44px; border-top:1px solid var(--line); font-family:var(--mono); font-size:0.92rem; color:var(--ink); text-align:center; line-height:1.8;}
.footer-links{margin-top:10px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.footer-links a{color:var(--amber-dark); text-decoration:underline; text-decoration-color:var(--line);}
.footer-links a:hover{text-decoration-color:var(--amber-dark);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:0 6vw; margin:-10px 0 0;}
.breadcrumb a{font-family:var(--mono); font-size:0.82rem; color:var(--amber-dark); text-decoration:underline; text-decoration-color:var(--line);}
.breadcrumb a:hover{text-decoration-color:var(--amber-dark);}
.breadcrumb span{font-family:var(--mono); font-size:0.82rem; color:var(--steel-dark);}

/* ---------- Contact / inline link ---------- */
.contact-link{font-family:var(--mono); color:var(--amber-dark); text-decoration:underline; text-decoration-color:var(--line); font-weight:600;}
.contact-link:hover{text-decoration-color:var(--amber-dark);}

/* ---------- Tool icon badge (hero + grid card) ---------- */
.tool-icon-badge{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:#E7F8F1;color:var(--amber);}
.tool-icon-badge svg{width:20px;height:20px;}
.tool-card .tool-icon-badge{margin-bottom:14px;width:44px;height:44px;border-radius:11px;}
.tool-card .tool-icon-badge svg{width:20px;height:20px;}
.tool-card .tool-icon-badge.media{background:#E8F1FF;color:#2563EB;}
.tool-card .tool-icon-badge.pdf{background:#E9F9F0;color:#0E9F6E;}
.tool-card .tool-icon-badge.text{background:#FFF4E5;color:#C2760D;}
.tool-card .tool-icon-badge.calc{background:#F4EEFC;color:#7C3AED;}
.tool-card .tool-icon-badge.social{background:#FDEAF0;color:#DB2777;}
.tool-card .tool-icon-badge.seo{background:#E8F7F5;color:#0D9488;}

/* ---------- Tool card (grid) ---------- */
.tool-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 20px;text-decoration:none;color:var(--ink);transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease;display:block;}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(21,26,33,0.09);border-color:transparent;}
.tool-card h3{font-size:1rem;font-weight:700;margin:0 0 5px;font-family:var(--display);}
.tool-card p{font-size:0.86rem;color:var(--steel);margin:0;line-height:1.4;}

/* ---------- Share buttons ---------- */
.share-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px;}
.share-label{font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--steel-dark);}
.share-btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-size:0.86rem; padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none;}
.share-btn:hover{border-color:var(--steel);}
.share-btn svg{width:15px; height:15px; flex:none;}
.share-btn.copied{background:var(--good); color:#fff; border-color:var(--good);}

/* ---------- Result toast ---------- */
.result-toast{
  display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--good);color:#fff;font-family:var(--mono);font-size:0.88rem;letter-spacing:0.03em;
  padding:12px 22px;border-radius:3px;box-shadow:0 6px 20px rgba(22,20,18,0.18);
  z-index:900;white-space:nowrap;opacity:0;transition:opacity 0.22s ease,transform 0.22s ease;
  pointer-events:none;
}
.result-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line); max-width:74ch;}
.faq-item button.faq-q{width:100%; text-align:left; background:none; border:none; padding:18px 0; font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item .chev{transition:transform 0.2s ease; flex:none; color:var(--steel);}
.faq-item[data-open="true"] .chev{transform:rotate(180deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height 0.25s ease;}
.faq-item[data-open="true"] .faq-answer{max-height:320px;}
.faq-answer p{margin:0 0 18px; color:var(--steel); font-size:0.96rem;}