/* Article kit: widgets for hand-written blog posts (src/layouts/Article.astro). Site tokens come from the Webflow CSS. */
.ak{--ak-line:#e4e4e4;--ak-soft:#fff;--ak-lime:var(--brand,#adec5d);--ak-orange:var(--tertiary,#ff702c);--ak-lilac:var(--secondary,#bfb4ee);--ak-ink:var(--black,#131313);--ak-mute:var(--grey-800,#5a5a5a)}
.ak h2{scroll-margin-top:120px}
.ak h3{margin-top:1.6em}
.ak .ak-box,.ak .ak-tldr,.ak .ak-callout,.ak .ak-quiz,.ak .ak-calc,.ak .ak-check,.ak .ak-tabs,.ak .ak-table,.ak .ak-fig,.ak .ak-stats,.ak .ak-bars{margin:32px 0;font-size:16px;line-height:1.55}
.ak-tldr{background:var(--ak-ink);color:#fff;border-radius:20px;padding:26px 30px}
.ak-tldr h4,.ak-box h4,.ak-calc h4,.ak-quiz h4,.ak-check h4{margin:0 0 12px;font-family:"Space Grotesk",sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.ak-tldr h4{color:var(--ak-lime)}
.ak-tldr ul{margin:0;padding-left:20px}.ak-tldr li{margin:6px 0}
.ak-callout{border-radius:20px;padding:20px 24px;background:#fff;border:1px solid var(--ak-line);border-left:6px solid var(--ak-lime)}
.ak-callout.warn{border-left-color:var(--ak-orange)}.ak-callout.note{border-left-color:var(--ak-lilac)}
.ak-callout b:first-child{display:block;font-family:"Space Grotesk",sans-serif;margin-bottom:4px}
.ak-callout p{margin:0}
.ak-box{background:#fff;border:1px solid var(--ak-line);border-radius:20px;padding:24px 28px}

/* tables */
.ak-table{overflow-x:auto;border:1px solid var(--ak-line);border-radius:20px;background:#fff}
.ak-table table{width:100%;min-width:640px;border-collapse:collapse}
.ak-table th,.ak-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ak-line)}
.ak-table thead th{background:var(--ak-ink);color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px}
.ak-table tbody th{font-weight:500;background:#fafafa;width:22%}
.ak-table tr:last-child td,.ak-table tr:last-child th{border-bottom:0}
.ak-table .y{color:#2e7d0f;font-weight:500}.ak-table .n{color:#c2410c;font-weight:500}
.ak-table caption{caption-side:bottom;padding:10px 18px;color:var(--ak-mute);font-size:13px;text-align:left}

/* stat tiles */
.ak-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ak-stats div{background:#fff;border:1px solid var(--ak-line);border-radius:20px;padding:18px 20px}
.ak-stats b{display:block;font-family:"Space Grotesk",sans-serif;font-size:34px;line-height:1.1;margin-bottom:6px}
.ak-stats span{color:var(--ak-mute);font-size:14px}

/* horizontal bars: <div class="ak-bar" style="--v:62"> */
.ak-bars{background:#fff;border:1px solid var(--ak-line);border-radius:20px;padding:22px 26px}
.ak-bars h4{margin:0 0 14px;font-family:"Space Grotesk",sans-serif;font-size:17px}
.ak-bar{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;align-items:center;gap:12px;margin:9px 0;font-size:15px}
.ak-bar i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--c,var(--ak-lime)) calc(var(--v)*1%),#efefef 0)}
.ak-bar b{font-family:"Space Grotesk",sans-serif;min-width:3.5em;text-align:right}
.ak-bars small{display:block;margin-top:12px;color:var(--ak-mute);font-size:13px}

/* figures with inline SVG */
.ak-fig{background:#fff;border:1px solid var(--ak-line);border-radius:20px;padding:22px}
.ak-fig svg{display:block;width:100%;height:auto}
.ak-fig figcaption{margin-top:10px;color:var(--ak-mute);font-size:14px}

/* steps */
.ak ol.ak-steps{list-style:none;counter-reset:s;padding:0;margin:28px 0}
.ak-steps>li{counter-increment:s;position:relative;padding:0 0 22px 58px;margin:0}
.ak-steps>li:before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--ak-lime);color:var(--ak-ink);font:700 17px/40px "Space Grotesk",sans-serif;text-align:center}
.ak-steps>li:after{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--ak-line)}
.ak-steps>li:last-child:after{display:none}
.ak-steps>li>b:first-child{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.05em;margin-bottom:2px}

/* buttons / form controls shared by quiz + calc */
.ak button.ak-btn,.ak .ak-opt{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--ak-line);background:#fff;color:var(--ak-ink);padding:12px 16px;text-align:left;transition:background .15s,border-color .15s}
.ak .ak-opt:hover{border-color:var(--ak-ink)}
.ak .ak-opt[aria-pressed=true]{background:var(--ak-lime);border-color:var(--ak-ink)}
.ak button.ak-btn{background:var(--ak-ink);color:#fff;border-color:var(--ak-ink);padding:10px 18px;border-radius:999px}
.ak button.ak-btn.ghost{background:transparent;color:var(--ak-ink)}

/* quiz */
.ak-quiz,.ak-calc,.ak-check{background:#fff;border:1px solid var(--ak-line);border-radius:20px;padding:26px 28px}
.ak-quiz .q{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:600;margin:4px 0 14px}
.ak-quiz .opts{display:grid;gap:8px}
.ak-quiz .meta{display:flex;justify-content:space-between;align-items:center;color:var(--ak-mute);font-size:14px;margin-bottom:6px}
.ak-quiz .prog{height:4px;background:#efefef;border-radius:2px;margin-bottom:14px}
.ak-quiz .prog i{display:block;height:100%;background:var(--ak-ink);border-radius:2px;transition:width .25s}
.ak-quiz .res h5{font-family:"Space Grotesk",sans-serif;font-size:24px;margin:6px 0 8px}
.ak-quiz .res p{margin:0 0 12px}
.ak-quiz .nav{display:flex;gap:8px;margin-top:16px}

/* calculator */
.ak-calc .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px}
.ak-calc label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ak-mute)}
.ak-calc label output{color:var(--ak-ink);font-weight:500}
.ak-calc input[type=number],.ak-calc select{font:inherit;padding:10px 12px;border:1px solid var(--ak-line);border-radius:10px;background:#fafafa;color:var(--ak-ink)}
.ak-calc input[type=range]{accent-color:var(--ak-ink);width:100%}
.ak-calc .out{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ak-calc .out div{background:var(--bg,#f8f8f8);border-radius:14px;padding:14px 16px}
.ak-calc .out div.hi{background:var(--ak-lime)}
.ak-calc .out b{display:block;font-family:"Space Grotesk",sans-serif;font-size:26px;line-height:1.15}
.ak-calc .out span{font-size:13px;color:var(--ak-mute)}
.ak-calc .out div.hi span{color:var(--ak-ink)}
.ak-calc .note{margin-top:12px;font-size:13px;color:var(--ak-mute)}

/* checklist */
.ak-check ul{list-style:none;padding:0;margin:0}
.ak-check li{margin:0;border-top:1px solid var(--ak-line)}
.ak-check li:first-child{border-top:0}
.ak-check label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.ak-check input{margin-top:4px;width:18px;height:18px;accent-color:var(--ak-ink);flex:none}
.ak-check input:checked+span{color:var(--ak-mute);text-decoration:line-through}
.ak-check .score{margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--bg,#f8f8f8);font-weight:500}

/* tabs */
.ak-tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:-1px}
.ak-tabs [role=tab]{font:500 15px "Space Grotesk",sans-serif;cursor:pointer;border:1px solid var(--ak-line);border-bottom:0;background:#f1f1f1;border-radius:14px 14px 0 0;padding:10px 16px;color:var(--ak-mute)}
.ak-tabs [role=tab][aria-selected=true]{background:#fff;color:var(--ak-ink)}
.ak-tabs [role=tabpanel]{background:#fff;border:1px solid var(--ak-line);border-radius:0 20px 20px 20px;padding:22px 26px}
.ak-tabs [role=tabpanel] p:last-child,.ak-tabs [role=tabpanel] ul:last-child{margin-bottom:0}

/* FAQ */
.ak details{border-top:1px solid var(--ak-line);padding:4px 0}
.ak details:last-of-type{border-bottom:1px solid var(--ak-line)}
.ak summary{cursor:pointer;list-style:none;padding:14px 36px 14px 0;position:relative;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px}
.ak summary::-webkit-details-marker{display:none}
.ak summary:after{content:"+";position:absolute;right:6px;top:10px;font-size:24px;font-weight:400}
.ak details[open] summary:after{content:"–"}
.ak details>div{padding:0 0 14px;font-size:17px}

@media (max-width:767px){
  .ak-tldr,.ak-quiz,.ak-calc,.ak-check,.ak-box,.ak-bars{padding:20px 18px}
  .ak-bar{grid-template-columns:1fr auto;}
  .ak-bar i{grid-column:1/-1;grid-row:2}
  .ak-tabs [role=tabpanel]{border-radius:0 0 20px 20px;padding:18px}
}

/* overrides of Webflow rich-text defaults */
.ak h2{margin-top:56px}
.ak a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--ak-lime);text-decoration-thickness:3px;text-underline-offset:3px}
.ak a:not([class]):hover{background:var(--ak-lime)}
.ak .ak-tldr,.ak .ak-tldr li,.ak .ak-tldr b{color:#fff}
.ak figure.ak-fig{max-width:100%;width:auto;display:block;text-align:left}
.ak label{font-weight:400;margin:0}
.ak-check label{font-size:16px}
.ak-calc .out{grid-template-columns:repeat(2,1fr)}
@media (max-width:479px){.ak-calc .out{grid-template-columns:1fr}}

/* ===== Article page layout (layouts/Article.astro) ===== */
/* Blog post v2: listicle-style single column (900px) */
.gzb-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--brand);z-index:2000;transition:width .1s}
.gzb{max-width:900px;margin:0 auto;box-sizing:border-box;width:100%}
.gzb-head{display:flex;flex-direction:column;gap:22px}
.gzb-crumbs{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gzb-crumbs nav{display:flex;gap:8px;align-items:center}
.gzb-crumbs nav a,.gzb-crumbs nav span{font:500 16px "Space Grotesk",sans-serif;text-transform:uppercase;color:var(--grey-600);text-decoration:none}
.gzb-crumbs nav a:hover{color:var(--black)}
.gzb-meta{font:400 13px Ubuntu,sans-serif;color:var(--grey-800)}
.gzb h1{margin:0}
.gzb-lede{font:300 21px/1.55 Ubuntu,sans-serif;color:var(--black);margin:0;max-width:62ch}
.gzb-byline{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:6px}
.gzb-author{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.gzb-author img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.gzb-author b{display:block;font:600 16px "Space Grotesk",sans-serif}
.gzb-author span{font:300 14px Ubuntu,sans-serif;color:var(--grey-800)}
.gzb-share{display:flex;gap:8px}
.gzb-share a,.gzb-share button{font:500 13px Ubuntu,sans-serif;border:1px solid #dcdcdc;background:#fff;border-radius:999px;padding:7px 14px;color:var(--black);text-decoration:none;cursor:pointer}
.gzb-share a:hover,.gzb-share button:hover{border-color:var(--black)}
.gzb-cover{display:block;width:100%;height:auto;border-radius:20px;margin-top:8px}

/* "In this article" box, same frame as the listicle's "What are you looking for?" */
.gzb-box{border:1px solid var(--black);border-radius:20px;background:#fff;padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.gzb-box__title{margin:0;font:700 12px "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-800)}
.gzb-sum{background:var(--black);color:#fff;border-radius:14px;padding:20px 24px}
.gzb-sum b.t{display:block;font:700 22px/1.2 "Space Grotesk",sans-serif;text-transform:uppercase;margin-bottom:10px}
.gzb-sum ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.gzb-sum li{position:relative;padding-left:26px;font:300 16px/1.5 Ubuntu,sans-serif}
.gzb-sum li:before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--brand)}
.gzb-sum li b{font-weight:500}
.gzb-toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;counter-reset:t}
.gzb-toc li{counter-increment:t}
.gzb-toc a{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--black);font:400 15px/1.35 Ubuntu,sans-serif}
.gzb-toc a:before{content:counter(t,decimal-leading-zero);font:700 12px "Space Grotesk",sans-serif;color:var(--grey-600);min-width:20px}
.gzb-toc a:hover{background:var(--grey-300)}

/* body */
.gzb-body{font:300 18px/1.65 Ubuntu,sans-serif;color:var(--black)}
.gzb-body>p,.gzb-body>ul,.gzb-body>ol:not(.ak-steps){margin:0 0 18px}
.gzb-body li{margin-bottom:8px}
.gzb-body h2{counter-increment:h;font:700 34px/1.15 "Space Grotesk",sans-serif;text-transform:uppercase;margin:64px 0 18px;scroll-margin-top:110px;display:flex;gap:14px;align-items:flex-start}
.gzb-body h2:before{content:counter(h,decimal-leading-zero);flex:none;font:700 14px/1 "Space Grotesk",sans-serif;background:var(--black);color:var(--brand);border-radius:8px;padding:8px 8px;margin-top:6px}
.gzb-body{counter-reset:h}
.gzb-body h2.plain{counter-increment:none}.gzb-body h2.plain:before{display:none}
.gzb-body h3{font:600 22px "Space Grotesk",sans-serif;margin:32px 0 10px}
.gzb-body a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:3px}
.gzb-body a:not([class]):hover{background:var(--brand)}
.gzb-body b,.gzb-body strong{font-weight:500}
/* widget labels in the listicle's card-section style */
.gzb .ak-quiz h4,.gzb .ak-calc h4,.gzb .ak-check h4,.gzb .ak-box h4{font:700 12px "Space Grotesk",sans-serif;letter-spacing:.08em;color:var(--grey-800)}
.gzb .ak-quiz,.gzb .ak-calc,.gzb .ak-check,.gzb .ak-table,.gzb .ak-fig,.gzb .ak-callout{border-color:#e2e2e2}
.gzb .gz-proof{margin:48px 0}

/* lime CTA bar (listicle green-contact-block) */
.gzb-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:var(--brand);border-radius:20px;padding:22px 26px}
.gzb-cta b{font:700 24px/1.15 "Space Grotesk",sans-serif;text-transform:uppercase}
.gzb-cta small{display:block;font:300 15px Ubuntu,sans-serif;margin-top:4px}
.gzb-cta a{flex:none;background:var(--black);color:#fff;text-decoration:none;font:500 15px "Space Grotesk",sans-serif;text-transform:uppercase;padding:14px 22px;border-radius:12px}

/* author card */
.gzb-bio{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;background:#fff;border:1px solid #e2e2e2;border-radius:20px;padding:24px}
.gzb-bio img{width:96px;height:96px;border-radius:16px;object-fit:cover}
.gzb-bio p{margin:6px 0 0;font:300 16px/1.55 Ubuntu,sans-serif}
.gzb-bio .l{font:700 12px "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-800)}
.gzb-bio b{display:block;font:700 22px "Space Grotesk",sans-serif;text-transform:uppercase;margin-top:4px}
.gzb-bio a{color:var(--black);font:500 14px Ubuntu,sans-serif}

/* prev / next + related */
.gzb-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gzb-pn a{background:var(--black);color:#fff;text-decoration:none;border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:4px}
.gzb-pn a:last-child{text-align:right}
.gzb-pn small{font:700 18px "Space Grotesk",sans-serif;text-transform:uppercase}
.gzb-pn span{font:300 14px/1.4 Ubuntu,sans-serif;color:#d6d6d6}
.gzb-pn a:hover small{color:var(--brand)}
.gzb-rel h3{font:700 34px "Space Grotesk",sans-serif;text-transform:uppercase;margin:0 0 18px}
.gzb-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gzb-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e2e2;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--black);transition:border-color .15s,transform .15s}
.gzb-card:hover{border-color:var(--black);transform:translateY(-2px)}
.gzb-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#131313}
.gzb-card div{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px}
.gzb-card small{font:700 11px "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-800)}
.gzb-card b{font:600 17px/1.3 "Space Grotesk",sans-serif}
.gzb-card span{font:300 13px Ubuntu,sans-serif;color:var(--grey-800)}


.gzb-stack{display:flex;flex-direction:column;gap:36px}
@media (max-width:767px){
  .gzb-lede{font-size:18px}
  .gzb-toc{grid-template-columns:1fr}
  .gzb-body{font-size:17px}
  .gzb-body h2{font-size:24px;margin-top:48px}
  .gzb-body h2:before{font-size:12px;padding:6px;margin-top:3px}
  .gzb-cta{flex-direction:column;align-items:flex-start}
  .gzb-cta b{font-size:20px}
  .gzb-rel__grid,.gzb-pn{grid-template-columns:1fr}
  .gzb-pn a:last-child{text-align:left}
  .gzb-bio{grid-template-columns:64px 1fr;padding:18px}.gzb-bio img{width:64px;height:64px}
  .gzb-share{display:none}
}
.gzb-sum li,.gzb-sum li b{color:#fff}
.gzb .gzb-body.blog-rich-text{margin-left:0;margin-right:0;width:auto;max-width:none}

/* CTAs from widgets to the lead form */
.ak .ak-lead{margin-top:18px;padding-top:16px;border-top:1px solid var(--ak-line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ak .ak-lead span{font-size:13px;color:var(--ak-mute)}
.ak .ak-quiz .nav{align-items:center;flex-wrap:wrap}
.ak a.ak-quiz__more{font-size:14px;color:var(--ak-ink)}
.ak .gz-lead-btn{display:inline-flex;align-items:center;gap:8px;font:500 15px "Space Grotesk",sans-serif;text-transform:uppercase;text-decoration:none;background:var(--black,#131313);color:#fff;border-radius:12px;padding:13px 20px}