/* Daylight — /free-tools/ hub (page 184), "Workbench".
   The page is one raw-HTML block with its own inline <style>. Those
   rules are bare classes (0,1,0), so body.dl-tools .x at (0,2,1) beats
   them without !important except where an inline style attribute is in
   play. No page content, H1, schema or FAQ markup is touched. */

body.dl-tools{
  --bg:#fcfaf7; --surface:#ffffff; --raised:#fffdfb; --sand:#f7f2ea; --sand-2:#f1ebe1;
  --sage:#5e8c77; --sage-deep:#3f6b58; --sage-darker:#2f5343;
  --sage-tint:#e6efe9; --sage-tint-2:#f0f6f2; --sage-line:#d7e6de;
  --peach:#e9a07b; --peach-deep:#b86f4a; --peach-tint:#fbeee5;
  --sky:#7fa9c4; --sky-tint:#e7eff4; --sky-deep:#41688a;
  --ink:#2e3335; --body:#4f5759; --muted:#5f6866;
  --line:#ece5db; --line-2:#f4efe7;
  --sh-1:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(92,74,58,.05), 0 4px 12px -5px rgba(92,74,58,.12);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(92,74,58,.06), 0 12px 26px -10px rgba(92,74,58,.16);
  --sh-3:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(92,74,58,.07), 0 26px 52px -18px rgba(92,74,58,.22);
  --ease:cubic-bezier(.22,.9,.3,1);
  background:var(--bg);
}
body.dl-tools .ft-wrap,body.dl-tools .ft-wrap *{
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box}
body.dl-tools .ft-wrap{
  color:var(--ink);background:var(--bg);max-width:1240px;margin-left:auto;margin-right:auto;
  padding:0 clamp(20px,4.5vw,40px) 30px;-webkit-font-smoothing:antialiased}
/* the theme's constrained layout pins this block left */
body.dl-tools main#content .wp-block-columns{margin:0 auto;max-width:100%}

/* ── hero: light, matching the homepage ───────────────────────────── */
body.dl-tools .ft-hero{
  background:var(--bg);border-radius:0;padding:58px 20px 34px;margin-bottom:8px;
  position:relative;overflow:hidden;text-align:center}
body.dl-tools .ft-hero::before{
  content:"";position:absolute;left:50%;top:-330px;width:880px;height:620px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--sage-tint) 0,transparent 72%);opacity:.9}
body.dl-tools .ft-hero-circle1,
body.dl-tools .ft-hero-circle2,
body.dl-tools .ft-ekg{display:none}
body.dl-tools .ft-hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
body.dl-tools .ft-eyebrow{
  background:var(--sage-tint);border:0;color:var(--sage-deep);
  border-radius:999px;padding:8px 16px;font-size:.78rem;font-weight:700;
  letter-spacing:.01em;text-transform:none;margin-bottom:18px}
body.dl-tools .ft-hero h1{
  color:var(--ink);font-size:clamp(2.05rem,4.4vw,3.1rem);font-weight:800;
  letter-spacing:-.022em;line-height:1.14;text-shadow:none;margin:0 0 14px}
body.dl-tools .ft-hero h1 span{color:var(--sage-deep)}
body.dl-tools .ft-hero-sub{
  color:var(--body);font-size:1.05rem;line-height:1.72;opacity:1;max-width:62ch;margin:0 auto}

body.dl-tools .ft-stats{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px;
  border:0;background:none;padding:0}
body.dl-tools .ft-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px 22px;box-shadow:var(--sh-1);min-width:106px;flex:none}
body.dl-tools .ft-stat:last-child{border:1px solid var(--line)}
body.dl-tools .ft-stat-n{
  color:var(--sage-deep);font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
body.dl-tools .ft-stat-l{
  color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;opacity:1}

/* ── section heads ────────────────────────────────────────────────── */
body.dl-tools .ft-sh{margin:46px 0 18px;display:flex;align-items:center;gap:16px}
body.dl-tools .ft-sh h2{
  color:var(--ink);font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.18;white-space:nowrap}
body.dl-tools .ft-sh-line{background:var(--line);height:1px;flex:1}

/* ── search, matched to the homepage tool search ──────────────────── */
body.dl-tools .ft-tool-search-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--sh-2);padding:10px 22px;max-width:580px;margin:0 auto 6px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
body.dl-tools .ft-tool-search-wrap:focus-within{
  border-color:var(--sage-line);box-shadow:var(--sh-2),0 0 0 4px var(--sage-tint-2)}
body.dl-tools .ft-tool-search-wrap input{
  background:none;border:0;color:var(--ink);font-size:.98rem;font-family:inherit}
body.dl-tools .ft-tool-search-wrap input::placeholder{color:var(--muted);opacity:1}
body.dl-tools .ft-tool-search-icon{color:var(--muted);fill:none;stroke:var(--muted)}

/* ── the category rail, injected by daylight-tools.js ─────────────── */
body.dl-tools .dlt-rail{
  position:sticky;top:73px;z-index:14;margin:14px 0 4px;
  background:rgba(252,250,247,.93);backdrop-filter:saturate(1.3) blur(12px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.dl-tools .dlt-rail-in{
  display:flex;gap:9px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:13px 2px}
body.dl-tools .dlt-rail-in::-webkit-scrollbar{display:none}
body.dl-tools .dlt-chip{
  flex:none;border:1px solid var(--line);background:var(--surface);color:var(--body);
  border-radius:999px;padding:9px 17px;font:inherit;font-size:.87rem;font-weight:700;
  cursor:pointer;white-space:nowrap;box-shadow:var(--sh-1);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
body.dl-tools .dlt-chip:hover{color:var(--sage-deep);border-color:var(--sage-line)}
body.dl-tools .dlt-chip[aria-pressed="true"]{
  background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
body.dl-tools .ft-card[hidden]{display:none!important}

/* ── the tool cards ───────────────────────────────────────────────── */
body.dl-tools .ft-tools-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
body.dl-tools .ft-card{
  background:var(--raised);border:1px solid var(--line-2);border-radius:28px;
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
body.dl-tools .ft-card:hover,body.dl-tools .ft-card.sb-card:hover{
  transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--sage-line)}
/* the multicoloured top stripe belongs to the old palette */
body.dl-tools .ft-card-stripe{display:none}
body.dl-tools .ft-card-body{padding:26px 24px 22px}
body.dl-tools .ft-card h3{
  color:var(--ink);font-size:1.12rem;font-weight:800;letter-spacing:-.012em;
  line-height:1.3;margin:14px 0 8px}
body.dl-tools .ft-card p{color:var(--body);font-size:.93rem;line-height:1.62}

body.dl-tools .ft-icon-box{
  width:52px;height:52px;border-radius:17px;background:var(--sage-tint);
  display:grid;place-items:center;box-shadow:none;border:0}
body.dl-tools .ft-icon-box svg,body.dl-tools .ft-icon-box img{
  width:24px;height:24px;stroke:var(--sage-deep);fill:none}
body.dl-tools .ft-card:nth-child(3n+2) .ft-icon-box{background:var(--peach-tint)}
body.dl-tools .ft-card:nth-child(3n+2) .ft-icon-box svg{stroke:var(--peach-deep)}
body.dl-tools .ft-card:nth-child(3n+3) .ft-icon-box{background:var(--sky-tint)}
body.dl-tools .ft-card:nth-child(3n+3) .ft-icon-box svg{stroke:var(--sky-deep)}

body.dl-tools .ft-card-badge{
  border-radius:999px;padding:5px 12px;font-size:.7rem;font-weight:800;
  letter-spacing:.03em;border:0;text-transform:none}
body.dl-tools .ft-badge-free{background:var(--sage-tint);color:var(--sage-deep)}
body.dl-tools .ft-badge-new{background:var(--peach-tint);color:var(--peach-deep)}
body.dl-tools .ft-badge-ai{background:var(--sky-tint);color:var(--sky-deep)}

body.dl-tools .ft-checklist{margin:14px 0 0;padding:0;list-style:none}
body.dl-tools .ft-checklist li{
  color:var(--body);font-size:.88rem;line-height:1.55;margin-bottom:7px;
  display:flex;align-items:flex-start;gap:9px}
body.dl-tools .ft-check-dot{
  width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--sage);
  opacity:.85;margin-top:.52em;color:transparent;font-size:0;border:0;flex:none}

/* every button variant collapses to one sage action */
body.dl-tools .ft-btn,
body.dl-tools .ft-btn-blue,body.dl-tools .ft-btn-navy,body.dl-tools .ft-btn-green,
body.dl-tools .ft-btn-amber,body.dl-tools .ft-btn-teal,body.dl-tools .ft-btn-purple,
body.dl-tools .ft-btn-rose,body.dl-tools .ft-btn-indigo,body.dl-tools .ft-btn-orange{
  background:var(--sage-deep);color:#fff;border:0;border-radius:999px;
  padding:12px 22px;font-weight:700;font-size:.9rem;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
body.dl-tools .ft-btn:hover{
  background:var(--sage-darker);transform:translateY(-2px);box-shadow:var(--sh-2);color:#fff}
body.dl-tools .ft-btn-outline{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-1)}
body.dl-tools .ft-btn-outline:hover{background:var(--surface);color:var(--sage-deep);border-color:var(--sage-line)}
body.dl-tools .ft-btn-white{background:var(--surface);color:var(--sage-deep);border:1px solid var(--line)}

body.dl-tools .ft-no-results{
  color:var(--muted);background:var(--sand);border:1px dashed var(--line);
  border-radius:24px;padding:46px 22px}

/* ── coming soon ──────────────────────────────────────────────────── */
body.dl-tools .ft-soon{background:var(--bg);border:0;padding:0}
body.dl-tools .ft-small-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.dl-tools .ft-sc{
  background:var(--sand);border:1px solid var(--line);border-radius:20px;
  padding:20px 18px;box-shadow:none;color:var(--body)}
body.dl-tools .ft-sc-icon{
  width:42px;height:42px;border-radius:13px;background:var(--sage-tint);
  display:grid;place-items:center}
body.dl-tools .ft-sc-icon svg{stroke:var(--sage-deep);fill:none}

/* ── why / trust ──────────────────────────────────────────────────── */
body.dl-tools .ft-why{background:var(--sand);border-radius:44px;padding:52px 34px;margin-top:52px}
body.dl-tools .ft-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
body.dl-tools .ft-why-card{
  background:var(--raised);border:1px solid var(--line-2);border-radius:24px;
  padding:24px 22px;box-shadow:var(--sh-1)}
body.dl-tools .ft-why-icon{
  width:48px;height:48px;border-radius:15px;background:var(--sage-tint);display:grid;place-items:center}
body.dl-tools .ft-why-icon svg{stroke:var(--sage-deep);fill:none}
body.dl-tools .ft-why-n{color:var(--ink);font-weight:800;font-size:1.06rem;letter-spacing:-.012em}
body.dl-tools .ft-why-l{color:var(--body);font-size:.9rem;line-height:1.6}
body.dl-tools .ft-why-sub{color:var(--body);font-size:1rem}

/* ── FAQ ──────────────────────────────────────────────────────────── */
body.dl-tools .ft-faq{margin-top:52px}
body.dl-tools .ft-faq-sub{color:var(--body);font-size:1rem}
body.dl-tools .ft-faq-list{display:grid;gap:14px;margin-top:22px}
body.dl-tools .ft-faq-item{
  background:var(--raised);border:1px solid var(--line-2);border-radius:22px;
  padding:22px 24px;box-shadow:var(--sh-1);color:var(--body)}
body.dl-tools .ft-faq-item h3,body.dl-tools .ft-faq-item strong{
  color:var(--ink);font-weight:800;font-size:1.04rem;letter-spacing:-.01em}

/* ── closing CTA ──────────────────────────────────────────────────── */
body.dl-tools .ft-cta{background:var(--bg);padding:0;margin-top:56px}
body.dl-tools .ft-cta-circle{display:none}
body.dl-tools .ft-cta-inner{
  background:var(--sand);border:1px solid var(--line);border-radius:36px;
  padding:50px 40px;text-align:center;box-shadow:none}
body.dl-tools .ft-cta-inner h2{
  color:var(--ink);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.4vw,1.95rem);text-shadow:none}
body.dl-tools .ft-cta-inner p{color:var(--body);opacity:1}
body.dl-tools .ft-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1020px){
  body.dl-tools .ft-tools-grid{grid-template-columns:repeat(2,1fr)}
  body.dl-tools .ft-why-grid,body.dl-tools .ft-small-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body.dl-tools .ft-tools-grid{grid-template-columns:1fr;gap:20px}
  body.dl-tools .ft-why-grid,body.dl-tools .ft-small-grid{grid-template-columns:1fr}
  body.dl-tools .ft-hero{padding:42px 12px 26px}
  body.dl-tools .ft-why{padding:38px 20px;border-radius:32px}
  body.dl-tools .ft-cta-inner{padding:36px 22px;border-radius:28px}
  body.dl-tools .dlt-rail{top:65px}
  body.dl-tools .ft-sh{margin:36px 0 14px}
}
@media (prefers-reduced-motion:reduce){
  body.dl-tools .ft-wrap *{transition:none!important}
}

/* ── mobile refinements ───────────────────────────────────────────────
   Measured at 375px: the template's own main padding (24px) compounds
   with .ft-wrap's 20px, leaving cards 287px wide — 44px of gutter each
   side, nearly a quarter of the screen. And the five stat chips wrapped
   1 / 2 / 1 / 1, which reads as broken rather than deliberate. */
@media (max-width:680px){
  body.dl-tools main#content{padding-left:0!important;padding-right:0!important}
  body.dl-tools .ft-wrap{padding-left:14px;padding-right:14px}
  body.dl-tools .ft-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  body.dl-tools .ft-stat{min-width:0;padding:13px 14px}
  body.dl-tools .ft-stats > *:nth-child(5){grid-column:span 2}
  body.dl-tools .ft-stat-n{font-size:1.35rem}
}