/* ──────────────────────────────────────────────────────────────────────────
   hatchik-chrome.css — the header and footer, shared by every page.
   Self-contained: it declares the few tokens it needs with the design
   system's values, so it renders identically on the home page (which has
   the full token layer inline) and on the legacy pages (which do not).
   ────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Figtree:wght@400;500;600&display=swap");

.site-header,.site-footer{
  --c-ink:#0c1a14; --c-ink-soft:#5b6b64; --c-paper:#f7f4ea; --c-paper-warm:#fffdf7;
  --c-shell-100:#f0ece0; --c-line:rgba(12,26,20,.14);
  --c-mint:#34d399; --c-mint-600:#17b481; --c-mint-700:#076a4d; --c-night:#06140f;
  --c-px:8px; --c-radius:0px; --c-gutter:clamp(20px,5vw,64px);
  --c-container:calc(1120px + clamp(20px,5vw,64px) * 2);
}
/* ── The header, identical on every page ────────────────────────────────
   Own class vocabulary, so no page's legacy header CSS reaches it.      */
header.site-header{
  position:sticky; top:0; z-index:20; display:block;
  background:var(--c-paper); border-bottom:1px solid var(--c-line);
  padding:0; margin:0; max-width:none;
  font-family:"Figtree",ui-sans-serif,system-ui,sans-serif;
}
.site-header .sh-inner{
  max-width:var(--c-container);
  margin:0 auto; padding:16px var(--c-gutter);
  display:flex; align-items:center; gap:26px;
}
.site-header .sh-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--c-ink); margin-right:auto; border:0;
}
.site-header .sh-brand img{ display:block; border-radius:0; }
.site-header .sh-brand span{
  font-family:"Outfit",sans-serif; font-weight:800; font-size:25px;
  letter-spacing:-.045em; line-height:1; color:var(--c-ink);
}
.site-header .sh-nav{
  display:flex; gap:22px; align-items:center;
  /* some pages style the bare <nav> element for their own footer nav */
  margin:0 !important; padding:0 !important; border:0 !important; font-size:1rem;
}
.site-header .sh-nav a{
  text-decoration:none; color:var(--c-ink-soft); font-weight:500; font-size:1rem;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.site-header .sh-nav a:hover{ color:var(--c-ink); border-bottom-color:var(--c-mint); }
.site-header .sh-signin,
.site-header .sh-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:34px; padding:0 14px; border-radius:var(--c-radius);
  border:1px solid var(--c-night); box-shadow:var(--c-px) var(--c-px) 0 var(--c-ink);
  font-weight:600; font-size:.875rem; text-decoration:none; white-space:nowrap;
  transition:background-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.site-header .sh-signin{ background:var(--c-paper-warm); color:var(--c-ink); }
.site-header .sh-cta{ background:var(--c-mint); color:var(--c-night); }
.site-header .sh-signin:hover,.site-header .sh-cta:hover{
  box-shadow:calc(var(--c-px) * 1.6) calc(var(--c-px) * 1.6) 0 var(--c-ink);
  color:var(--c-night);
}
@media (max-width:640px){
  .site-header .sh-inner{ flex-wrap:wrap; gap:14px; }
  .site-header .sh-nav{ order:3; width:100%; }
}

/* ── The footer, identical on every page ────────────────────────────────
   Its own class vocabulary so no page's legacy footer CSS reaches it.   */
footer.site-footer{
  border-top:1px solid var(--c-line); background:var(--c-shell-100);
  margin:0; padding:clamp(44px,6vw,76px) 0 clamp(32px,4vw,48px);
  color:var(--c-ink-soft); font-family:"Figtree",ui-sans-serif,system-ui,sans-serif;
  font-size:1rem; text-align:left;
}
.site-footer .sf-inner{
  max-width:var(--c-container);
  margin:0 auto; padding-inline:var(--c-gutter);
}
.site-footer .sf-cta{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center;
  justify-content:space-between; padding-bottom:34px; border-bottom:1px solid var(--c-line);
}
.site-footer .sf-shout{
  margin:0; font-family:"Outfit","Figtree",sans-serif; font-weight:800;
  font-size:clamp(28px,3.4vw,42px); letter-spacing:-.04em; line-height:1.05; color:var(--c-ink);
}
.site-footer .sf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px;
  background:var(--c-mint); color:var(--c-night); border:1px solid var(--c-night);
  border-radius:var(--c-radius); box-shadow:var(--c-px) var(--c-px) 0 var(--c-ink);
  font-weight:600; font-size:1.1875rem; text-decoration:none; white-space:nowrap;
  transition:background-color 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms cubic-bezier(.2,0,0,1);
}
.site-footer .sf-btn:hover{
  background:var(--c-mint-600); color:var(--c-night);
  box-shadow:calc(var(--c-px) * 1.6) calc(var(--c-px) * 1.6) 0 var(--c-ink);
}
.site-footer .sf-legal{
  margin:0; max-width:76ch; font-size:12px; line-height:1.7; color:var(--c-ink-soft);
}
.site-footer .sf-legal a{ color:var(--c-ink-soft); text-decoration:underline; }
@media (max-width:640px){
  .site-footer .sf-cta{ align-items:flex-start; }
  .site-footer .sf-btn{ width:100%; }
}

/* stacked link columns */
.site-footer .sf-cols{
  display:grid; gap:36px 28px; padding:40px 0 34px;
  grid-template-columns:1.4fr repeat(3, minmax(140px,1fr));
  border-bottom:1px solid var(--c-line); margin-bottom:26px;
}
.site-footer .sf-brand .sf-mark{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:0;
}
.site-footer .sf-brand .sf-mark img{ display:block; border-radius:0; }
.site-footer .sf-brand .sf-mark span{
  font-family:"Outfit",sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-.045em; line-height:1; color:var(--c-ink);
}
.site-footer .sf-brand p{
  margin:12px 0 0; font-size:.875rem; line-height:1.6; color:var(--c-ink-soft); max-width:26ch;
}
.site-footer .sf-col h3{
  margin:0 0 14px; font-family:"Outfit",sans-serif; font-weight:800;
  font-size:.9375rem; letter-spacing:-.015em; color:var(--c-ink);
}
.site-footer .sf-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer .sf-col li{ margin:0; }
.site-footer .sf-col a{
  font-size:.9375rem; color:var(--c-ink-soft); text-decoration:none; border:0;
}
.site-footer .sf-col a:hover{ color:var(--c-mint-700); text-decoration:underline; }
@media (max-width:820px){
  .site-footer .sf-cols{ grid-template-columns:repeat(2,minmax(140px,1fr)); }
  .site-footer .sf-brand{ grid-column:1 / -1; }
}

/* the pricing cards carry the same tick-list the home page shows */
.plan-feats{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.plan-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:1rem; line-height:1.5; color:var(--c-ink); }
.plan-feats .tick{ color:var(--c-mint-700); display:flex; margin-top:2px; flex:0 0 auto; }