/* Freedom in Work — shared v2 chrome + tool UI. Used by the /tools/ pages. */
:root{--charcoal:#1c1c1c;--charcoal-2:#141414;--cyan:#43B7D1;--cyan-ink:#08272e;--ink:#1c1c1c;--muted:#63696d;--line:#e7e9ea;--bg:#ffffff;--cream:#f4f1ea;--maxw:1120px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-0.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;padding:15px 26px;border-radius:2px;cursor:pointer;border:2px solid transparent;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;background:none}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--charcoal)}
.btn-cyan{background:var(--cyan);color:var(--cyan-ink)}.btn-cyan:hover{box-shadow:6px 6px 0 var(--cyan-ink)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-outline{border-color:currentColor}.btn-outline:hover{box-shadow:6px 6px 0 currentColor}
.btn .arw{transition:transform .18s}.btn:hover .arw{transform:translateX(4px)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:.3s}
header.nav.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center}
.brand .lg{height:36px;width:auto;display:block}
.brand .lg.light{display:none}
header.nav:not(.on-dark) .brand .lg.dark{display:none}
header.nav:not(.on-dark) .brand .lg.light{display:block}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.link{font-weight:500;font-size:14px;color:inherit;opacity:.85}
header.nav.on-dark .nav-links a.link{color:#fff}
.nav-links a.link:hover{opacity:1}
.nav-links .btn{padding:11px 20px;font-size:13px}
/* HEADER (dark) */
.thead{background:var(--charcoal);color:#fff;padding:140px 0 66px;position:relative;overflow:hidden}
.thead .glow{position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(90px);opacity:.4;background:radial-gradient(circle,rgba(67,183,209,.55),transparent 65%);top:-14vw;right:-6vw}
.thead .gridlines{position:absolute;inset:0;opacity:.06;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:64px 64px}
.thead-inner{position:relative;z-index:2;max-width:720px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.kicker .sq{width:9px;height:9px;background:var(--cyan)}
.thead h1{font-size:clamp(28px,4.2vw,52px);margin-bottom:16px}
.thead p{font-size:clamp(16px,2vw,19px);color:#c9ced2;max-width:560px}
.crumbs{font-size:13px;color:#8b9195;margin-bottom:16px}
.crumbs a{color:#8b9195}.crumbs a:hover{color:#fff}
/* MAIN */
main{position:relative;z-index:2;padding:60px 0}
.tool-layout{max-width:760px;margin:0 auto}
/* answer box (AEO) */
.answer{border:3px solid var(--ink);padding:22px 26px;margin-bottom:38px;position:relative;background:var(--cream)}
.answer .tag{position:absolute;top:-13px;left:20px;background:var(--ink);color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px}
.answer p{font-size:16px;margin:0}
/* tool card */
.tool{border:3px solid var(--ink);padding:34px;position:relative;background:#fff;box-shadow:14px 14px 0 var(--cyan)}
.tool h2{font-size:24px;margin-bottom:6px}
.tool .hint{color:var(--muted);font-size:14px;margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field .inp{display:flex;align-items:center;border:2px solid var(--ink);border-radius:2px;overflow:hidden}
.field .inp .pre{padding:12px;background:var(--ink);color:#fff;font-family:'Archivo',sans-serif;font-weight:600;min-width:44px;text-align:center}
.field input,.field select{border:0;outline:0;padding:12px;font-size:16px;width:100%;font-family:'Inter',sans-serif;background:#fff}
.field select{cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seg{display:flex;border:2px solid var(--ink);border-radius:2px;overflow:hidden}
.seg button{flex:1;padding:12px;border:0;background:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--charcoal);color:#fff}
/* results */
.result{margin-top:26px;padding-top:22px;border-top:2px dashed var(--line)}
.result .line{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:15px}
.result .line .k{color:var(--muted)}
.result .line .v{font-family:'Archivo',sans-serif;font-weight:600}
.result .big{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:14px;border-top:2px solid var(--ink)}
.result .big .lab{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.result .big .val{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:600;font-size:34px}
.result .big .val small{font-size:15px;color:var(--muted)}
.usd{color:var(--muted);font-weight:400;font-size:13px}
.disc{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.5}
.disc-box{background:#fff8e6;border:1px solid #f0e2b8;color:#7a5f10;font-size:13px;padding:12px 14px;border-radius:2px;margin-bottom:24px}
/* email gate / cta */
.cta-band{margin-top:38px;background:var(--charcoal);color:#fff;padding:30px;text-align:center}
.cta-band h3{font-size:22px;margin-bottom:8px}
.cta-band p{color:#c9ced2;font-size:15px;margin-bottom:18px}
.cta-band .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:420px;margin:0 auto}
.cta-band input{flex:1;min-width:180px;border:2px solid #3a3f42;background:#141414;color:#fff;padding:13px;border-radius:2px;font-size:15px}
/* FAQ */
.faq{max-width:760px;margin:56px auto 0}
.faq h2{font-size:26px;margin-bottom:18px}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq summary{cursor:pointer;font-family:'Archivo',sans-serif;font-weight:500;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-weight:600;font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:#26292b;font-size:15px}
/* FOOTER */
/* Tools hub card grid */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px;margin:36px auto 0}
.tcard{border:2px solid var(--line);padding:28px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.tcard:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--charcoal);border-color:var(--ink)}
.tcard .status{font-family:'Archivo',sans-serif;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;align-self:flex-start;margin-bottom:12px;background:var(--cyan);color:#08272e}
.tcard .ico{width:44px;height:44px;background:var(--cyan);color:#08272e;display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:600;font-size:20px;margin-bottom:16px}
.tcard h3{font-family:'Archivo',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:20px;margin-bottom:8px}
.tcard p{color:var(--muted);font-size:14px;flex:1;margin-bottom:16px}
.tcard .go{font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;color:var(--ink);display:inline-flex;gap:6px}
@media(max-width:760px){.tools-grid{grid-template-columns:1fr}}

footer{background:var(--charcoal-2);color:#8b9195;padding:54px 0 32px;position:relative;z-index:2}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:#8b9195}.foot-links a:hover{color:#fff}
.foot-bottom{padding-top:18px;font-size:13px;color:#5f6469}
.banner{background:#fff8e6;border-bottom:1px solid #f0e2b8;color:#7a5f10;font-size:12px;text-align:center;padding:7px 16px;position:relative;z-index:50}
.reveal{opacity:0;transform:translateY(22px);transition:.6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(max-width:820px){.nav-links .link{display:none}.grid2{grid-template-columns:1fr}.tool{box-shadow:8px 8px 0 var(--cyan);padding:24px}}

/* "Go deeper" product hand-off band (connective tissue: tool -> paid product) */
.go-deeper{display:block;margin-top:20px;background:#fff;border:2px solid var(--charcoal);border-radius:2px;padding:22px 24px;text-decoration:none;color:var(--charcoal);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.go-deeper:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--cyan)}
.go-deeper .gd-eyebrow{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#2C8CA6}
.go-deeper .gd-title{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:21px;margin:6px 0 4px}
.go-deeper .gd-desc{display:block;font-size:14.5px;color:#4a4f52;line-height:1.5}
.go-deeper .gd-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;color:#2C8CA6}
.go-deeper:hover .gd-cta .arw{transform:translateX(4px)}
.go-deeper .gd-cta .arw{transition:transform .18s}