/* =========================================================================
   ALZA — blog components.
   The post layout stays as it was. Its old token names are redefined here in
   terms of the new ones, so the blog follows the site instead of drifting.
   Load after styles.css.
   ========================================================================= */
:root{
  --color-black:          var(--ink);
  --color-near-black:     var(--ink-2);
  --color-white:          #FFFFFF;
  --color-offwhite:       var(--bone);
  --color-emerald:        var(--emerald);
  --color-emerald-bright: var(--emerald-lit);
  --color-emerald-dark:   var(--emerald-ink);
  --color-text:           var(--on-bone);
  --color-text-muted:     var(--on-bone-2);
  --color-border:         rgba(16,24,20,.14);
  --color-border-dark:    rgba(226,238,232,.13);
  --color-text-on-dark:   var(--on-ink-2);
  --font-display:"Manrope",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --fs-hero:clamp(2.1rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.82rem,4.3vw,3.9rem);
  --fs-h3:clamp(1.18rem,1.5vw,1.3rem);
  --fs-stat:clamp(2.25rem,3.4vw,3rem);
  --fs-lead:clamp(1.05rem,1.3vw,1.26rem);
  --fs-body:1rem;
  --fs-small:.94rem;
  --fs-label:.88rem;
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem;
  --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  --section-y:clamp(3.25rem,5.4vw,5.25rem);
  --container:1320px;
  --gutter:clamp(20px,5vw,90px);
  --header-h:76px;
  --card-pad:1.75rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --t-fast:200ms cubic-bezier(.22,.61,.36,1);
  --t-base:320ms cubic-bezier(.22,.61,.36,1);
  --t-slow:500ms cubic-bezier(.22,.61,.36,1);
  --t-scroll:9000ms cubic-bezier(.4,0,.2,1);
}

/* the blog is a light document; styles.css sets a dark body for the homepage */
body{background:var(--color-white);color:var(--color-text)}
main{background:var(--color-white)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.prose{max-width:68ch;color:var(--color-text-muted)}
.prose h2{color:var(--color-text)}


:focus-visible{
  outline: 2px solid var(--color-emerald-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: var(--section-y); }
section[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }
.center{ margin-inline: auto; text-align: center; }
.center.section-sub{ max-width: 52ch; }
@keyframes lightpass{
  from { transform: translateX(0); }
  to   { transform: translateX(420%); }
}
.link-emerald{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-emerald);
  transition: color var(--t-fast);
}
.link-emerald .arrow{ transition: transform var(--t-fast); }
.link-emerald:hover{ color: var(--color-emerald-bright); }
.link-emerald:hover .arrow{ transform: translateX(4px); }
@keyframes aurora-in{ to { opacity: 1; } }
@keyframes flow-a{ from { background-position: 0 0; } to { background-position: 940px 0; } }
@keyframes flow-b{ from { background-position: 0 0; } to { background-position: 1240px 0; } }
@keyframes flow-c{ from { background-position: 0 0; } to { background-position: 1680px 0; } }
@keyframes swell-a{
  from { transform: translate3d(0, -3%, 0) scaleY(1); }
  to   { transform: translate3d(0, 5%, 0) scaleY(1.22); }
}
@keyframes swell-b{
  from { transform: translate3d(0, 4%, 0) scaleY(1.16); }
  to   { transform: translate3d(0, -5%, 0) scaleY(0.92); }
}
@keyframes swell-c{
  from { transform: translate3d(0, 2%, 0) scaleY(1.1); }
  to   { transform: translate3d(0, -4%, 0) scaleY(0.95); }
}
.services{ background: var(--color-white); }
.project{ display: flex; flex-direction: column; }
.laptop{ transition: transform var(--t-slow); }
.project:hover .laptop{ transform: translateY(-7px); }
.laptop-screen{
  position: relative;
  background: var(--color-near-black);
  border: 1px solid rgba(12, 14, 13, 0.14);
  border-radius: var(--radius-lg) var(--radius-lg) 2px 2px;
  padding: 10px 10px 12px;
  box-shadow: 0 22px 44px -30px rgba(8, 10, 9, 0.55);
  transition: box-shadow var(--t-slow);
}
.project:hover .laptop-screen{
  box-shadow: 0 34px 60px -30px rgba(8, 10, 9, 0.62);
}
.laptop-bar{
  display: flex;
  gap: 6px;
  padding: 2px 4px 10px;
}
.laptop-bar span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.laptop-viewport{
  position: relative;
  aspect-ratio: 1.9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-white);
}
.laptop-viewport img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: translateY(0);
  transition: transform var(--t-scroll);
}
.laptop-viewport.is-tall img{
  height: auto;
  object-fit: fill;
}
.project:hover .laptop-viewport.is-tall img{ transform: translateY(-62%); }
.laptop-base{
  height: 12px;
  margin-inline: auto;
  width: 104%;
  max-width: 104%;
  background: linear-gradient(180deg, #161A18 0%, #0C0E0D 100%);
  border-radius: 0 0 10px 10px;
  transform: translateX(-1.92%);
  box-shadow: 0 12px 22px -16px rgba(8, 10, 9, 0.7);
}
.project-body{
  margin-top: var(--space-6);
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}
.project .link-emerald{ margin-top: var(--space-4); align-self: flex-start; }
.project:hover .link-emerald{ color: var(--color-emerald-bright); }
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pricing{ background: var(--color-white); }
.pricing-layout{
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.type-static{
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
}
.type-static.is-in{
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.type-line{ color: var(--color-emerald-bright); }
.type-caret{
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 4px;
  translate: 0 0.06em;
  background: var(--color-emerald-bright);
  animation: caret 900ms steps(1) infinite;
}
.type-caret.is-done{ animation: none; opacity: 0; }
@keyframes caret{ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.expect-title{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-6);
}
.expect-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.expect-item{
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.check{
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
}
.check svg{ width: 100%; height: 100%; overflow: visible; }
.check-ring,
.check-mark{
  fill: none;
  stroke: var(--color-emerald);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-ring{
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: 0.85;
}
.check-mark{
  stroke: var(--color-emerald-bright);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.expect-item.is-checked .check-ring{
  transition: stroke-dashoffset 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  stroke-dashoffset: 0;
}
.expect-item.is-checked .check-mark{
  transition: stroke-dashoffset 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms;
  stroke-dashoffset: 0;
}
.expect-copy{ min-width: 0; }
.field{ display: grid; gap: 3px; }
.field-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.error{
  min-height: 0;
  font-size: var(--fs-label);
  color: #B3261E;
}
.error:empty{ display: none; }
.hp{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.side-block{
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-emerald);
}
.expect-item .side-title{ margin-top: 2px; }
.side-block:first-child{ border-top-color: var(--color-emerald); }
.side-title{
  font-size: 0.9375rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.side-body{
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 40ch;
}
.faq{
  background: var(--color-near-black);
  color: var(--color-white);
  border-top: 1px solid rgba(0, 155, 103, 0.45);
  padding-block: var(--section-y);
}
.faq-head{ margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.faq .eyebrow{ color: var(--color-emerald-bright); }
.faq-title{
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  text-transform: uppercase;
  max-width: 18ch;
}
.faq-list{
  max-width: 900px;
  border-top: 1px solid var(--color-border-dark);
}
.faq-item{ border-bottom: 1px solid var(--color-border-dark); }
.faq-q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 14px 0;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:hover{ color: var(--color-emerald-bright); }
.faq-q:focus-visible{ outline-offset: -2px; }
.faq-sign{
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq-sign::before,
.faq-sign::after{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1.5px;
  background: var(--color-emerald-bright);
  transition: transform var(--t-base);
}
.faq-sign::after{ transform: rotate(90deg); }
.faq-item[open] .faq-sign::after{ transform: rotate(0deg); }
.faq-a{
  padding-bottom: 16px;
  max-width: 74ch;
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
}
.fm-value{
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fm-label{
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark);
}
.post-head{ padding-block: clamp(2.75rem, 5vw, 4.5rem); text-align: center; }
.post-head .container{ display: flex; flex-direction: column; align-items: center; }
.post-kicker{ margin-bottom: var(--space-6); }
.post-kicker::after{
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: var(--space-4) auto 0;
  background: var(--color-emerald);
}
.post-h1-wrap{
  text-align: center;
  /* in px, not ch or em: on this wrapper those measure against the 17px body
     font, not the display face, and the title breaks into six lines */
  max-width: min(1060px, 92vw);
  margin-inline: auto;
}
.post-h1{
  display: block;
  font-size: clamp(3rem, 8.4vw, 6.75rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
}
.post-h1-wrap::after{
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) auto 0;
  background: var(--color-emerald);
  border-radius: 2px;
}
.post-head .post-kicker{ color: var(--color-text-muted); }
.post-head .post-kicker::after{ background: var(--color-emerald); }
.post-standfirst{ margin-top: clamp(1.5rem, 2.4vw, 2rem); }
.post-standfirst{
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--color-text-muted);
}
.post-byline{ justify-content: center; border-top: 0; padding-top: var(--space-6); }
.post-byline::before{
  content: "";
  position: absolute;
  width: 120px;
  height: 1px;
  background: var(--color-border);
  transform: translateY(-1.75rem);
}
.post-byline{ position: relative; }
.breadcrumb{ justify-content: center; }
.prose{ max-width: 62ch; margin-inline: auto; font-size: 1.1875rem; line-height: 1.78; }
.prose h2{
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
}
.prose h2::after{
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: var(--space-4) auto var(--space-2);
  background: var(--color-emerald);
}
.prose > p:first-of-type{
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--color-text);
}
.toc{ text-align: center; }
.toc ol{ justify-items: center; }
.split{
  width: min(1180px, 92vw);
  margin: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5.5rem) 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.split.reverse .split-media{ order: 2; }
.split-media img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.split-media figcaption,
.split-media .post-figure figcaption{ margin-top: var(--space-3); }
.split-copy > h2{
  text-align: left;
  margin-inline: 0;
  margin-top: 0;
  max-width: 16ch;
}
.split-copy > h2::after{ margin-left: 0; }
.split-copy p{ font-size: 1.0625rem; line-height: 1.7; }
.split figcaption{
  margin-top: var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-muted);
}
.stat-band{ width: min(1180px, 92vw); margin-left: 50%; transform: translateX(-50%); }
.foundation, .compare{ width: min(1000px, 92vw); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 860px){
.split{ grid-template-columns: 1fr; gap: var(--space-8); }
.split.reverse .split-media{ order: 0; }
}
.post-faq .sources{ border-top-color: var(--color-border); }
.post-faq .sources-label{ color: var(--color-text-muted); }
.post-faq .sources ol{ color: var(--color-text-muted); }
.post-faq .sources a{ color: var(--color-emerald-dark); }
.post-faq .author-card{ border-color: var(--color-border); }
.post-faq .author-mark{ background: var(--color-black); color: var(--color-emerald-bright); }
.post-faq .author-name{ color: var(--color-text); }
.post-faq .author-role{ color: var(--color-text-muted); }
.post-faq .author-meta{ color: var(--color-emerald-dark); }
.post-faq .post-foot{ border-top-color: var(--color-border); }
.post-faq .post-cat{ color: var(--color-emerald-dark); }
.post-faq .post-date{ color: var(--color-text-muted); }
.post-faq .copy-link{ border-color: var(--color-border); color: var(--color-text); }
.post-faq .copy-link:hover{ border-color: var(--color-emerald); color: var(--color-emerald); }
.post-faq .prose{ max-width: 900px; }
.post-cta{ border: 1px solid rgba(0, 155, 103, 0.45); }
.post-cover{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  background: var(--color-offwhite);
  position: relative;
  overflow: hidden;
}
.post-cover img{ width: 100%; height: 100%; object-fit: cover; }
.cover-slot{
  position: absolute;
  inset: clamp(0.75rem, 1.5vw, 1.25rem);
  display: grid;
  place-content: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-md);
}
.cover-slot strong{
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.cover-slot span{ font-size: var(--fs-small); color: var(--color-text-muted); }
.post-head{ padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.post-kicker{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-4);
}
.post-h1{
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  max-width: 20ch;
}
.post-standfirst{
  margin-top: var(--space-6);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}
.post-byline{
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.breadcrumb a{ transition: color var(--t-fast); }
.breadcrumb a:hover{ color: var(--color-emerald); }
.stat-band{
  margin-block: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-md);
}
.stat-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.stat-item{ position: relative; }
.stat-item + .stat-item{ padding-left: clamp(1.25rem, 2.4vw, 2.25rem); }
.stat-item + .stat-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-emerald), transparent);
  opacity: 0.6;
}
.stat-num{
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-emerald-bright);
}
.stat-label{
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-on-dark);
}
.stat-source{
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.55);
}
.stat-source a{ color: var(--color-emerald-bright); text-decoration: underline; text-underline-offset: 3px; }
.sources{
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.sources-label{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.sources ol{
  list-style: none;
  counter-reset: src;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.sources li{ counter-increment: src; padding-left: var(--space-8); position: relative; }
.sources li::before{
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-emerald);
}
.author-card{
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: flex-start;
}
.author-mark{
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-content: center;
  background: var(--color-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-emerald-bright);
}
.author-name{
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.author-role{
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.author-meta{
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.post-foot{
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.copy-link{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0 var(--space-6);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.copy-link:hover{ border-color: var(--color-emerald); color: var(--color-emerald); }
.copy-link.is-copied{ border-color: var(--color-emerald); color: var(--color-emerald); }
.related{ background: var(--color-offwhite); }
.related-label{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-emerald);
  margin-bottom: var(--space-6);
}
@media (max-width: 900px){
.stat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.stat-item:nth-child(3){ padding-left: 0; }
.stat-item:nth-child(3)::before{ display: none; }
}
@media (max-width: 560px){
.stat-grid{ grid-template-columns: 1fr; }
.stat-item + .stat-item{ padding-left: 0; padding-top: var(--space-4); }
.stat-item + .stat-item::before{ display: none; }
.author-card{ flex-direction: column; }
}
.toc{
  margin-block: clamp(2rem, 3vw, 2.75rem);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
}
.toc-label{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.toc ol{
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 10px;
  font-size: var(--fs-small);
}
.toc li{ counter-increment: toc; }
.toc li::before{
  content: counter(toc, decimal-leading-zero);
  margin-right: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-emerald);
}
.toc a{ transition: color var(--t-fast); }
.toc a:hover{ color: var(--color-emerald); }
.foundation{
  margin-block: clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-emerald);             
  border: 1px solid var(--color-emerald);       
  border-radius: var(--radius-md);
  overflow: hidden;
}
.foundation-item{
  background: var(--color-white);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: background var(--t-base);
}
.foundation-item:hover{ background: #EEF8F3; }
.foundation-num,
.foundation-item h3{ transition: color var(--t-base), transform var(--t-base); }
.foundation-item:hover .foundation-num{
  color: var(--color-emerald-dark);
  transform: translateY(-2px) scale(1.06);
}
.foundation-item:hover h3{ color: var(--color-emerald-dark); }
.foundation-num{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-emerald);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.foundation-item h3{
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.foundation-item p{ font-size: var(--fs-small); color: var(--color-text-muted); }
.compare{
  margin-block: clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.compare-card{
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.compare-card.is-better{ border-color: var(--color-emerald); background: #F4FBF8; }
.compare-label{
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  min-height: 2.6em;
}
.compare-card.is-better .compare-label{ color: var(--color-emerald-dark); }
.compare-card p:not(.compare-label){ font-size: var(--fs-small); }
.pullquote{
  margin: clamp(2.5rem, 4vw, 3.5rem) 0;
  padding: 0 0 0 clamp(1.25rem, 2.4vw, 2rem);
  border-left: 3px solid var(--color-emerald);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 24ch;
}
.post-figure{ margin-block: clamp(2rem, 3.4vw, 3rem); }
.post-figure img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.post-figure figcaption{
  margin-top: var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-muted);
}
.figure-slot{
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--space-6);
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-md);
  background: var(--color-offwhite);
}
.figure-slot strong{
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.figure-slot span{ font-size: var(--fs-small); color: var(--color-text-muted); }
.post-faq{ background: var(--color-offwhite); }
.post-faq .faq-head{
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 2px solid var(--color-emerald);
  margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 900px;
}
.post-faq .faq-eyebrow{
  display: inline-block;
  padding: 6px var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--emerald-btn);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.post-faq .faq-list{ background: var(--color-white); border-radius: var(--radius-md); padding-inline: clamp(1rem, 2vw, 1.75rem); }
.post-faq .sources, .post-faq .author-card, .post-faq .post-foot{ max-width: 900px; }
.post-faq .author-card{ background: var(--color-white); }
.post-faq .faq-list{ border-top: 1px solid var(--color-border); max-width: 900px; }
.post-faq .faq-item{ border-bottom-color: var(--color-border); }
.post-faq .faq-q{ color: var(--color-text); }
.post-faq .faq-q:hover{ color: var(--color-emerald); }
.post-faq .faq-a{ color: var(--color-text-muted); }
.post-faq .faq-sign::before,
.post-faq .faq-sign::after{ background: var(--color-emerald); }
.post-faq .faq-title{
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: none;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.post-faq .post-cta{ margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.post-cta{
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-md);
}
.post-cta h2{
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  max-width: 20ch;
}
.post-cta p{
  margin-top: var(--space-4);
  max-width: 56ch;
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
}
.post-cta .btn{ margin-top: var(--space-6); }
@media (max-width: 768px){
.foundation, .compare{ grid-template-columns: 1fr; }
}
@media (max-width: 992px){

.project{ max-width: 640px; }
.pricing-layout{ grid-template-columns: 1fr; }
.expect-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
.field-row{ grid-template-columns: 1fr; }
.expect-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 480px){

.link-emerald{ letter-spacing: 0.07em; }
.laptop-screen{ padding: 7px 7px 9px; }
}
@media (hover: none){
.project:hover .laptop{ transform: none; }
.project:hover .laptop-viewport.is-tall img{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
.type-caret{ display: none; }
.type-static{ opacity: 1 !important; transform: none !important; }
.check-ring, .check-mark{ stroke-dashoffset: 0 !important; }
.project:hover .laptop-viewport.is-tall img{ transform: none; }
}
.page-head{
  background: var(--color-black);
  color: var(--color-white);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.page-head .eyebrow{ color: var(--color-emerald-bright); }
.page-title{
  font-size: var(--fs-h2);
  text-transform: uppercase;
  max-width: 20ch;
}
.page-sub{
  margin-top: var(--space-6);
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--color-text-on-dark);
}
.post-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
.post-card{
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.post-card:hover{
  transform: translateY(-5px);
  border-color: rgba(0, 155, 103, 0.45);
  box-shadow: 0 26px 50px -34px rgba(8, 10, 9, 0.45);
}
.post-thumb{
  position: relative;
  aspect-ratio: 74 / 51;
  overflow: hidden;
  background: var(--color-offwhite);
  border-bottom: 1px solid var(--color-border);
}
.post-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-card:hover .post-thumb img{ transform: scale(1.04); }
.thumb-slot{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  padding: var(--space-4);
  border: 1px dashed rgba(0, 155, 103, 0.5);
  border-radius: var(--radius-sm);
  margin: 10px;
}
.thumb-slot strong{
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.thumb-slot span{ font-size: 0.75rem; color: var(--color-text-muted); }
.post-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2vw, 1.6rem);
}
.post-tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-cat{ color: var(--color-emerald-dark); }
.post-date{ color: var(--color-text-muted); }
.post-tags .sep{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border);
}
.post-title{
  font-size: 1.1875rem;
  line-height: 1.25;
  transition: color var(--t-fast);
}
.post-card:hover .post-title{ color: var(--color-emerald); }
.post-excerpt{
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.post-more{
  color: var(--color-emerald-dark);
  margin-top: auto;
  padding-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
.post-more .arrow{ transition: transform var(--t-fast); }
.post-card:hover .post-more .arrow{ transform: translateX(4px); }
.post-card .stretch::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-card{ position: relative; }
@media (max-width: 1100px){
.post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
.post-grid{ grid-template-columns: 1fr; }
.post-card:hover{ transform: none; }
}
.prose{
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.75;
}
.prose h2{
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.prose h3{
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.prose p{ margin-bottom: var(--space-6); }
.prose ul{
  margin-bottom: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.prose li{ position: relative; padding-left: var(--space-6); }
.prose li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--color-emerald);
}
.prose a{ color: var(--color-emerald-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px){
.post-item{ grid-template-columns: 1fr; gap: var(--space-3); }
.post-item:hover{ transform: none; }
}

/* the short answer box: a black panel the assistants can quote whole */
.answer-box{
  width:min(1180px,92vw);margin-left:50%;transform:translateX(-50%);
  margin-block:clamp(2rem,3.4vw,3rem);
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,2.6vw,2.25rem);
  text-align:center;background:var(--color-black);border:0;border-radius:var(--radius-md);
}
.answer-box p:not(.answer-label){
  font-size:1.1875rem;line-height:1.65;max-width:54ch;margin-inline:auto;
  color:var(--color-text-on-dark);
}
.answer-box .answer-label{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-emerald-bright);margin-bottom:var(--space-4);max-width:none;
}

/* no hero sits behind the header on an inner page, so it is solid from the top */
.hdr{
  background:rgba(7,9,8,.92);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(226,238,232,.10);
}

/* ---------------------------------------------------------------------
   Emerald changes with the surface under it. #009B67 only reaches 3.6:1
   on white and #00684A only 2.9:1 on black, so each side gets its own.
   --------------------------------------------------------------------- */
.author-meta,
.sources a,
.post-more,
.compare-label,
.post-cat{ color: var(--color-emerald-dark); }
.stat-band a,
.stat-source a,
.field-ink a:not(.btn),
.post-faq .stat-band a{ color: var(--color-emerald-bright); }