/* SEW Tools — /tools/ and /tools/<name>/ (plugin RFM Tools, 2026-10-01).
   The teaser card stays dark in both themes (like the dark newsletter box); everything else follows the
   site's light/dark setting with the same colour values as the article pages. Colours of the top rule,
   the gradient and the tan accent are sampled from the mock-up. */

#sewt{--paper:#FFFFFF;--card:#FFFFFF;--ink:#191B1C;--text2:#3E4347;--muted:#6B7176;--line:#E2E5E7;--accent:#A87A45;--display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;--hero:#151518;--hero-line:#2E2F34;--tan:#BC8F5A;
	display:block;max-width:1016px;margin:0 auto;padding:30px 28px 64px;font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) #sewt{--paper:#131416;--card:#1B1D1F;--ink:#E8EAEC;--text2:#C2C6CA;--muted:#9AA0A6;--line:#33373B;--accent:#BC8F5A;--hero:#1B1D1F}}
html[data-theme="dark"] #sewt{--paper:#131416;--card:#1B1D1F;--ink:#E8EAEC;--text2:#C2C6CA;--muted:#9AA0A6;--line:#33373B;--accent:#BC8F5A;--hero:#1B1D1F}

#sewt *,#sewt *::before,#sewt *::after{box-sizing:border-box}
#sewt h1,#sewt h2,#sewt h3{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.015em}
#sewt p{margin:0}

/* breadcrumb */
#sewt .sewt-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:0 0 26px}
#sewt .sewt-crumbs a{color:var(--muted)}
#sewt .sewt-crumbs a:hover{color:var(--ink);text-decoration:underline}
#sewt .sewt-crumbs svg{width:13px;height:13px;stroke:var(--muted);stroke-width:2.4;fill:none;flex:none}
#sewt .sewt-crumbs .here{color:var(--ink);font-weight:600}

/* teaser card */
#sewt .sewt-hero{position:relative;background:var(--hero);border:1px solid var(--hero-line);border-radius:20px;padding:56px 44px 48px;color:#BCBCC0}
#sewt .sewt-hero::before{content:"";position:absolute;top:-1px;left:44px;right:44px;height:3px;background:linear-gradient(90deg,#7A86D9 0 16.67%,#819F6C 0 33.33%,#B1C374 0 50%,#D2BC6C 0 66.67%,#BC8F5A 0 83.33%,#A25E4D 0)}
#sewt .sewt-hero h1{font-size:clamp(42px,7vw,66px);font-weight:700;line-height:1.04;letter-spacing:-.025em;color:#fff}
#sewt .sewt-grad{background:linear-gradient(90deg,#7A86D9 0%,#819F6C 30%,#D2BC6C 62%,#BC8F5A 82%,#A25E4D 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#sewt .sewt-lede{margin-top:28px;max-width:40em;font-size:20px;line-height:1.6;color:#CFCFD3}
#sewt .sewt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 32px;border-radius:999px;background:var(--tan);color:#0B0B0C;font-family:var(--display);font-weight:700;font-size:18px;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .15s}
#sewt .sewt-btn:hover,#sewt .sewt-btn:focus-visible{background:#CFA572;color:#0B0B0C;text-decoration:none}
#sewt .sewt-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* list of tools (shows once one is published) */
#sewt .sewt-list{margin-top:56px}
#sewt .sewt-list h2{font-size:26px;font-weight:700;margin-bottom:20px}
#sewt .sewt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
#sewt .sewt-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--card);transition:border-color .15s}
#sewt .sewt-card:hover{border-color:var(--accent)}
#sewt .sewt-card h3{font-size:19px;font-weight:700;line-height:1.3}
#sewt .sewt-card h3 a{color:var(--ink);text-decoration:none}
#sewt .sewt-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
#sewt .sewt-card h3 a:focus-visible{outline:none}
#sewt .sewt-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}
#sewt .sewt-card p{font-size:15px;line-height:1.55;color:var(--text2)}
#sewt .sewt-open{margin-top:auto;padding-top:6px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--accent)}

/* "Why build more tools?" | "What will they cost?" */
#sewt .sewt-why{display:grid;grid-template-columns:1fr 1fr;gap:36px 64px;margin-top:56px}
#sewt .sewt-why h2,#sewt .sewt-help h2{font-size:clamp(23px,2.6vw,27px);font-weight:700;line-height:1.25}
#sewt .sewt-why p,#sewt .sewt-help p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--text2)}

/* "Help us decide what to build" + Suggest a tool */
#sewt .sewt-help{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:56px;padding:36px 40px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
#sewt .sewt-help p{max-width:38em}

/* one tool */
#sewt.sewt--tool h1{font-size:clamp(32px,5vw,46px);font-weight:700;line-height:1.08}
#sewt .sewt-standfirst{margin-top:14px;max-width:62ch;font-size:18px;line-height:1.55;color:var(--text2)}
#sewt .sewt-body{margin-top:32px;font-size:17px;line-height:1.7;color:var(--ink)}
#sewt .sewt-body>*+*{margin-top:1.1em}
#sewt .sewt-body h2{font-size:26px;font-weight:700;margin-top:1.6em}
#sewt .sewt-body h3{font-size:20px;font-weight:700;margin-top:1.4em}
#sewt .sewt-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
#sewt .sewt-body ul,#sewt .sewt-body ol{padding-left:1.3em}
#sewt .sewt-body img{max-width:100%;height:auto}
#sewt .sewt-body table{width:100%;border-collapse:collapse;font-size:15px}
#sewt .sewt-body th,#sewt .sewt-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
#sewt .sewt-body input,#sewt .sewt-body select,#sewt .sewt-body textarea{max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
#sewt .sewt-body button{padding:10px 20px;border:0;border-radius:999px;background:var(--tan);color:#0B0B0C;font-family:var(--display);font-weight:700;cursor:pointer}

@media (max-width:760px){
	#sewt{padding:20px 16px 48px}
	#sewt .sewt-hero{padding:44px 22px 32px;border-radius:16px}
	#sewt .sewt-hero::before{left:22px;right:22px}
	#sewt .sewt-lede{margin-top:20px;font-size:18px}
	#sewt .sewt-why{grid-template-columns:1fr;margin-top:44px}
	#sewt .sewt-help{flex-direction:column;align-items:stretch;margin-top:44px;padding:28px 22px;border-radius:16px}
	#sewt .sewt-btn{width:100%}
}