/* Gardience site, v2 (light, enterprise). Loaded after a page's own styles: it re-points the shared color variables
   to the light theme, widens every page to the full screen with one shared margin, and styles the shared header and
   footer (tools/site/header-v2.html, footer-v2.html). */
:root{
  --g:clamp(24px,4.5vw,88px);
  --bg:#ffffff; --panel:#ffffff; --panel2:#f3f7f7; --line:#d9e2e3;
  --ink:#0f1f22; --muted:#4b5b5f; --faint:#6b7a7d;
  --steel:#23946a; --steel-d:#1b7a57; --ok:#23946a; --gold:#b7791f;
  --teal:#123b40; --teal2:#1b4d53; --green:#2fb37f; --green-d:#23946a; --blue:#3d8fe8; --mint:#9fe3c8; --soft:#f3f7f7;
  --maxw:100%;
}
body{background:#fff !important;color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif !important;font-size:17px}
a{color:var(--green-d)}
.wrap{max-width:none !important;width:100%;padding-left:var(--g) !important;padding-right:var(--g) !important}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(38px,3.4vw,62px) !important;line-height:1.05}
h2{font-size:clamp(28px,2.4vw,44px)}
code,pre,kbd{font-family:"IBM Plex Mono",ui-monospace,monospace}
pre{background:#0e2427 !important;color:#d8efe9 !important;border:0 !important}

/* old page chrome made light */
header.hero{background:#fff !important;border-bottom:1px solid var(--line)}
header.hero:before,header.hero:after{display:none !important}
.eyebrow,.kicker{color:var(--green-d) !important}
.lede,.lead-p{color:#26383c !important}
.card,.panel,.box,.tile{background:#fff !important;border:1px solid var(--line) !important;border-radius:8px !important;box-shadow:none}
section{border-color:var(--line) !important}
section:nth-of-type(even){background:var(--soft)}
table{border-color:var(--line)} th{background:var(--soft);color:var(--ink)} td,th{border-color:var(--line) !important}
.btn,a.btn{background:var(--green) !important;color:#05231a !important;border:2px solid var(--green) !important;border-radius:4px !important;font-weight:700}
.btn:hover,a.btn:hover{background:var(--green-d) !important;border-color:var(--green-d) !important;color:#fff !important;text-decoration:none}
.btn.ghost,a.btn.ghost{background:#fff !important;color:var(--teal) !important;border-color:var(--teal) !important}
.btn.ghost:hover,a.btn.ghost:hover{background:var(--teal) !important;color:#fff !important}
.news{border-color:rgba(35,148,106,.4) !important;background:rgba(47,179,127,.08) !important;color:var(--ink) !important}
.news b{background:var(--green-d) !important}
img{max-width:100%}

/* header v2 */
.util{background:var(--teal);color:#cfe3e1;font-size:13.5px}
.util .in{display:flex;justify-content:space-between;align-items:center;height:38px;gap:18px;padding:0 var(--g)}
.util a{color:#e8f4f2;text-decoration:none}.util a:hover{color:#fff;text-decoration:underline}
.util .l,.util .r{display:flex;gap:20px;align-items:center}
.news-rot{position:relative;min-width:0}.news-rot a{display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.news-rot a.on{display:inline;animation:v2fade .5s}
@keyframes v2fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.util .pill{background:#d94a3d;color:#fff;font-weight:700;padding:3px 10px;border-radius:3px;font-size:12px;letter-spacing:.04em}
nav.v2{background:#fff;border-bottom:3px solid var(--teal);position:sticky;top:0;z-index:50;backdrop-filter:none}
nav.v2 .in{display:flex;align-items:center;height:68px;gap:34px;padding:0 var(--g)}
nav.v2 .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:25px;color:var(--teal);text-decoration:none;margin:0}
nav.v2 .links{display:flex;gap:26px;font-weight:600;font-size:15.5px}
nav.v2 .links a{color:var(--ink);text-decoration:none}nav.v2 .links a:hover,nav.v2 .links a.on{color:var(--green-d)}
nav.v2 .cta{margin-left:auto}
nav.v2 .cta a{display:inline-flex;background:var(--green);color:#05231a;font-weight:700;padding:9px 16px;border-radius:4px;text-decoration:none;font-size:14.5px}
nav.v2 .cta a:hover{background:var(--green-d);color:#fff}
.stripe{display:grid;grid-template-columns:3fr 5fr 1.4fr 2fr;height:7px}
.stripe i:nth-child(1){background:var(--teal)}.stripe i:nth-child(2){background:var(--green)}.stripe i:nth-child(3){background:var(--blue)}.stripe i:nth-child(4){background:var(--mint)}

/* footer v2 */
footer.v2{background:#0a1d20 !important;color:#a9c1bd;font-size:14.5px;padding:48px 0;border:0}
footer.v2 .in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:0 var(--g)}
footer.v2 b{color:#fff;display:block;margin-bottom:10px}footer.v2 a{display:block;padding:3px 0;color:#cfe0dd;text-decoration:none}footer.v2 a:hover{color:#fff}

@media (max-width:1000px){
  nav.v2 .links,.util .l{display:none}
  footer.v2 .in{grid-template-columns:1fr}
}

/* forms */
input,select,textarea{background:#fff !important;color:var(--ink) !important;border:1px solid #b9c7c9 !important;border-radius:4px !important;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green) !important;border-color:var(--green) !important}
input::placeholder,textarea::placeholder{color:#8a999c !important}
label{color:var(--ink) !important;font-weight:600}
header.hero{background:linear-gradient(180deg,#fff 0%,#f4f8f8 100%) !important}

/* full width: the old pages capped headings and text at narrow widths */
h1,header.hero h1,.hero-text h1{max-width:26ch !important}
.lede,.lead-p{max-width:92ch !important}
p.k,ul.k,.bcm p{max-width:110ch !important}
/* questions in two columns on wide screens */
.faq .wrap{column-count:2;column-gap:clamp(40px,5vw,96px)}
.faq .wrap>h2,.faq .wrap>.kicker,.faq .wrap>.eyebrow{column-span:all;margin-bottom:28px}
.faq h3{break-after:avoid;margin-top:0;padding-top:22px;border-top:1px solid var(--line)}
.faq p{max-width:none !important;break-inside:avoid}
@media (max-width:1000px){.faq .wrap{column-count:1}}

/* blog articles: a readable column under the full-width header */
body.blog main{max-width:860px;margin:0 auto;padding:48px 24px 64px}
body.blog main p,body.blog main li{color:#26383c}
body.blog .meta{color:var(--muted)}
body.blog .lead{color:#26383c;font-size:1.2rem}
body.blog code{background:#eef4f4;border:1px solid var(--line);color:var(--ink)}
body.blog pre code{background:none;border:0;color:inherit}
body.blog .cta-box{background:var(--soft) !important;border:1px solid var(--line);border-left:4px solid var(--green)}
body.blog .btn.p{background:var(--green) !important;color:#05231a !important}
body.blog .btn.s{background:#fff !important;color:var(--teal) !important;border:2px solid var(--teal) !important}
body.blog .list a.card{background:#fff;color:var(--ink)}
body.blog blockquote{border-left-color:var(--green);color:var(--muted)}
.tm{background:#0a1d20;color:#7f9a96;font-size:12.5px;margin:0;padding:0 var(--g) 28px}
/* the shared header wins over older page styles for nav */
nav.v2 .in{max-width:none !important;margin:0 !important;flex-wrap:nowrap !important;padding:0 var(--g) !important}
nav.v2 .links{margin-left:0 !important;flex-wrap:nowrap}
nav.v2 .cta{margin-left:auto !important;background:none !important;padding:0 !important;border-radius:0 !important}
nav.v2 .brand{color:var(--teal) !important}
/* blog index: the full width, cards in a grid */
body.blog main.index{max-width:none;padding:48px var(--g) 64px}
body.blog main.index .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:22px}
body.blog main.index .list a.card{margin:0;border-radius:8px;border-top:4px solid var(--teal)}
body.blog main.index .list a.card:hover{border-color:var(--green);border-top-color:var(--green)}

nav.v2 .cta{display:flex;align-items:center;gap:18px}
nav.v2 .cta a.signin{background:none !important;border:0 !important;color:var(--teal) !important;padding:0 !important;font-weight:600}
nav.v2 .cta a.signin:hover{text-decoration:underline;background:none !important;color:var(--green-d) !important}
@media (max-width:700px){.util .in{min-width:0}.util .r{min-width:0;max-width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.util .r::-webkit-scrollbar{display:none}}
nav.v2 .cta a{white-space:nowrap}
@media (max-width:480px){nav.v2 .cta{gap:12px}nav.v2 .cta a{padding:8px 11px;font-size:13.5px}nav.v2 .brand{font-size:19px}}
/* 1001 to 1180 px: the full menu shows, so tighten it until "Start free" fits */
nav.v2 .links a,nav.v2 .cta a{white-space:nowrap}
.util .r a{white-space:nowrap}
@media (min-width:1181px) and (max-width:1400px){nav.v2 .in{gap:24px !important}nav.v2 .links{gap:20px;font-size:15px}}
@media (min-width:1001px) and (max-width:1180px){nav.v2 .in{gap:16px !important}nav.v2 .links{gap:13px;font-size:14px}nav.v2 .cta{gap:12px}nav.v2 .links a[href="/compare.html"]{display:none}}

/* evaluator box: the three easy next steps, near the top of evaluation pages */
.evalbox{background:#f3f8f7;border:1px solid #d4e5e2;border-radius:10px;padding:22px clamp(16px,3vw,28px);margin:8px 0 0}
.evalbox h2{font-size:1.25rem;margin:0 0 4px}.evalbox>p{margin:0 0 16px;color:#40585c}
.evalgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.evalopt{background:#fff;border:1px solid #d4e5e2;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px}
.evalopt h3{margin:0;font-size:1rem}.evalopt p{margin:0;font-size:.88rem;color:#40585c;flex:1}
.evalopt .btn{align-self:flex-start}.evalopt form{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.evalopt input[type=email]{flex:1 1 160px;min-width:0;padding:9px 10px;border:1px solid #b9cdca;border-radius:4px;font:inherit}
.evalopt .ok{font-size:.88rem;color:#1d6b4c;font-weight:600}
@media(max-width:820px){.evalgrid{grid-template-columns:minmax(0,1fr)}}
/* the same three, following the reader down the page */
.evalbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#123b40;color:#fff;padding:10px 16px;display:none;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:0 -6px 18px -10px rgba(0,0,0,.5)}
.evalbar.on{display:flex}.evalbar b{font-weight:650}.evalbar a{color:#fff;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.evalbar .x{background:none;border:0;color:#cfe3e0;font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1}
@media(max-width:640px){.evalbar{font-size:.85rem;gap:8px}.evalbar .lbl{display:none}}
.evalopt .hp{position:absolute;left:-9999px}
.evalopt .err{font-size:.85rem;color:#b3261e;margin:6px 0 0}