/* Clarity Web Manager - public site stylesheet.
   Brand: CDM Clarity greens (#096126 deep / #49A91D bright from the logo
   mark), Wix Madefor faces self-hosted from /static/fonts.
   --brand / --accent are injected per-request from the settings table.

   v0.18.0 "Illustrated" (design direction B, chosen 2026-09-12): the square,
   high-contrast v0.9.2 treatment gives way to a brighter, rounder one built
   around the illustration set the blog and the LinkedIn series already use -
   pill buttons, rounded cards on a soft green-white ground, soft shadows in
   the brand green rather than grey, an organic-shaped hero illustration and
   a light footer. Structure, class names and copy are unchanged: this is a
   skin over the same blocks. */

@font-face {
  font-family: "Wix Madefor Display";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/madefor-display-700.woff2") format("woff2");
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/madefor-text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/madefor-text-600.woff2") format("woff2");
}

:root {
  --brand: #096126;
  --accent: #49A91D;
  --ink: #14201a;
  --muted: #5d6b62;
  --paper: #ffffff;
  --ground: #fbfcf9;
  --wash: #eef4ef;
  --line: #e1e8e2;
  --display: "Wix Madefor Display", "Segoe UI", system-ui, Arial, sans-serif;
  --text: "Wix Madefor Text", "Segoe UI", system-ui, Arial, sans-serif;
  /* v0.18.0 direction B: one radius scale and two shadows, both tinted with
     the brand green so nothing on the page casts a grey shadow. */
  --r-pill: 999px;
  --r-card: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow-card: 0 18px 40px -30px rgba(9, 97, 38, .38);
  --shadow-lift: 0 24px 48px -26px rgba(9, 97, 38, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
}

/* v0.10.0: full-width layout - the canvas widens to 1560px. Reading-measure
   columns (.blog-post 760, .block-rich_text 800, .news-index 900) stay
   deliberately narrow: a text column on the wide canvas is typography, not
   a leftover. */
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 24px; }

a { color: var(--brand); }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  color: #0c1510;
  text-wrap: balance;
}
h1 { font-size: 2.4rem; letter-spacing: -.015em; }
h2 { font-size: 34px; font-weight: 800; letter-spacing: -.015em; }

/* Buttons are pills in direction B, and lift a little on hover. */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--brand);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  filter: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .btn, .post-card, .feature-card, .news-item { transition: none; }
  .btn:hover, .post-card:hover, .feature-card:hover, .news-item:hover { transform: none; }
}

/* Header: white, logo left, pill nav, no hard rule under it. */
.site-header {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-height: 76px;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* v0.19.0: the mark and, optionally, the name beside it in the page's own
   typeface - the house style on the Clarity account site. */
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.site-logo { display: block; height: 56px; width: auto; }
.site-wordmark {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* The phone menu button: hidden until the header runs out of room. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 600;
}
.site-nav a:hover { background: var(--wash); color: var(--brand); }
.site-nav a.active { background: var(--wash); color: var(--brand); border-radius: var(--r-pill); }
/* The last top-level item (Contact us) reads as the header call to action. */
.site-nav > a:last-child {
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
}
.site-nav > a:last-child:hover { background: var(--accent); color: #fff; }
.site-nav > a:last-child.active { background: var(--brand); color: #fff; }

/* v0.11.0 menu drop-downs: a group heading (button, not a link) opens a
   panel of page links on hover, keyboard focus or tap (the inline toggle
   script adds .open). The heading takes the active state when one of its
   pages is the current page. */
.nav-group { position: relative; }
.nav-group-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
}
.nav-group-label:hover, .nav-group.open .nav-group-label { background: var(--wash); color: var(--brand); }
.nav-group.active .nav-group-label { background: var(--wash); color: var(--brand); }
.nav-caret { width: 14px; height: 14px; }
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 230px;
  /* No gap between the heading and the panel: a margin here looks tidy and
     breaks the menu, because the pointer leaves the group crossing it and
     the panel closes before it can be reached (v0.18.4). Spacing comes from
     the panel's own padding instead. */
  margin-top: 0;
  padding: 10px 8px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.nav-menu a { display: block; white-space: nowrap; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: block; }
/* v0.18.4: bare :hover closes the panel the instant the pointer strays off
   the group, which loses the menu on a diagonal path to the link. The script
   adds .hovering on enter and takes it off a fraction of a second AFTER
   leaving, so a wobble does not shut the menu. Pointer widths only - below
   the breakpoint the panel flows inside the folded menu and is opened by
   tapping. CSS :hover above stays as the no-JavaScript fallback. */
@media (min-width: 861px) {
  .nav-group.hovering .nav-menu { display: block; }
}

/* Blocks */
/* Generic hero (other pages): left-aligned, bold type on the soft ground. */
.block-hero {
  background: var(--ground);
  background-size: cover;
  background-position: center;
  color: var(--ink);
  padding: 88px 0;
  text-align: left;
}
.block-hero h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
.hero-strap {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: min(46em, 100%);
  margin: 0 0 1.4em;
}

/* Split hero: copy column + either the green panel of items or (v0.18.0) an
   illustration in an organic frame. With neither it runs full width. */
.block-split_hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 560px;
  background: var(--ground);
}
.split-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 48px;
  padding-left: max(24px, calc((100vw - 1560px) / 2 + 24px));
  min-width: 0;
}
.split-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  margin: 0 0 18px;
}
.split-hero-main h1 {
  font-family: var(--display);
  font-size: 62px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  max-width: min(13em, 100%);
}
.split-strap {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  max-width: min(480px, 100%);
  margin: 0 0 30px;
}
.split-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.split-ctas .btn { padding: 16px 34px; }

/* v0.18.0: the illustration column. The picture sits in an organic frame
   with a soft green shape behind it - the same silhouette language as the
   illustrations on the blog. */
.split-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  padding-right: max(24px, calc((100vw - 1560px) / 2 + 24px));
  min-width: 0;
}
.split-hero-art .art-blob {
  position: absolute;
  inset: 8% 10% 6% 4%;
  background: var(--wash);
  border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
}
.split-hero-art img {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 38% 62% 55% 45% / 50% 40% 60% 50%;
  box-shadow: var(--shadow-lift);
}

/* The green panel of items, when the hero carries one. */
.split-hero-panel {
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 48px;
  padding-right: max(24px, calc((100vw - 1560px) / 2 + 24px));
  border-radius: var(--r-card) 0 0 var(--r-card);
  min-width: 0;
}
.split-panel-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #9fd487;
  margin: 0 0 12px;
}
.split-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.split-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.split-item-arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  stroke: var(--accent);
}
.split-item h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.split-item p { font-size: 14px; line-height: 1.55; color: #bfe0c8; margin: 0; }

/* Prose. h3 subheads inside a rich-text block take a small green rule so a
   long run of copy reads as sections rather than one wall. */
.block-rich_text { padding: 64px 0; }
.block-rich_text .wrap { max-width: 800px; }
.block-rich_text h2 { margin: 0 0 .5em; }
.block-rich_text h3 {
  font-size: 21px;
  margin: 1.9em 0 .35em;
  padding-top: .9em;
  border-top: 2px solid var(--wash);
  color: var(--brand);
}
.block-rich_text h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* v0.19.0: tables in admin-written prose - price lists, company details.
   They scroll inside their own box rather than widening the page. */
.block-rich_text table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: .96rem;
  display: block;
  overflow-x: auto;
}
.block-rich_text table th,
.block-rich_text table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.block-rich_text table th {
  font-family: var(--display);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.block-rich_text table tr:first-child th { border-bottom: 2px solid var(--line); }

/* Feature grid: rounded tiles with an icon chip, on the soft wash. */
.block-feature_grid { background: var(--wash); padding: 76px 0; text-align: center; }
.block-feature_grid h2 { margin: 0; }
.feature-intro {
  color: var(--muted);
  font-size: 18px;
  max-width: min(62ch, 100%);
  margin: 14px auto 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}
.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: var(--wash);
  color: var(--brand);
  margin: 0 0 20px;
}
.feature-icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.feature-card h3 { margin: 0 0 8px; font-size: 22px; }
.feature-card p { margin: 0; color: var(--muted); }
.feature-link { display: inline-block; margin-top: 14px; font-weight: 700; text-decoration: none; }
.feature-link:hover { color: var(--accent); }

/* Call to action: an inset rounded green panel, not a full-bleed band. */
.block-cta { padding: 16px 0 72px; }
.cta-panel {
  background: var(--brand);
  color: #fff;
  text-align: center;
  border-radius: 32px;
  padding: 64px 40px;
  box-shadow: var(--shadow-card);
}
.cta-panel h2 { color: #fff; margin: 0 auto 24px; max-width: min(22ch, 100%); }
.cta-panel p { margin: 0; }
.cta-panel .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-panel .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.block-image { padding: 40px 0; text-align: center; }
.block-image img { border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.block-image figcaption { color: var(--muted); font-size: .9rem; margin-top: 12px; }

/* Blog: rounded white cards on the wash. The index joins the full-width
   1560px layout: 4 columns at full width, 3 below 1280px, 2 below 980px,
   1 below 640px. */
.blog-index { background: var(--wash); padding: 56px 0 72px; }
.blog-cat-desc { color: var(--muted); max-width: min(46em, 100%); }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.blog-cats a {
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
}
.blog-cats a:hover { border-color: var(--brand); color: var(--brand); }
.blog-cats a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card-img { display: block; }
.post-card-img img,
.post-card-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Plain placeholder block when the post has no featured image. */
.post-card-noimg { background: var(--wash); }
.post-card-body { padding: 20px 22px 24px; min-width: 0; }
.post-card h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.post-card h2 a { text-decoration: none; color: inherit; }
.post-card h2 a:hover { color: var(--brand); }
.post-date {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 10px;
}
.post-date time { color: var(--muted); }
.post-excerpt {
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-pagination { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 34px; }
.muted { color: var(--muted); }

.blog-post { padding: 56px 0 64px; }
.blog-post .wrap { max-width: 760px; }
.blog-post .crumb { margin: 0 0 14px; }
.blog-post h1 { margin: 0 0 6px; }
.post-featured { width: 100%; border-radius: var(--r-card); margin: 18px 0 6px; box-shadow: var(--shadow-card); }
.post-body { margin-top: 18px; }
.post-body img { border-radius: var(--r-sm); }
.post-body blockquote {
  border-left: 4px solid var(--accent);
  margin: 1.2em 0;
  padding: 4px 0 4px 18px;
  color: var(--muted);
}
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post-body figure { margin: 1.4em 0; text-align: center; }
.post-body figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; }

/* News (v0.10.0): aggregated external headlines that LINK OUT - rounded
   white rows on the wash, keeping a 900px reading measure. */
.news-index { background: var(--wash); padding: 56px 0 72px; }
.news-index .wrap { max-width: 900px; }
.news-intro { color: var(--muted); max-width: min(46em, 100%); margin: 0 0 26px; }
.news-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.news-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 8px;
}
.news-source {
  display: inline-block;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  color: var(--brand);
}
.news-item h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.news-item h2 a { text-decoration: none; color: inherit; }
.news-item h2 a:hover { color: var(--brand); }
.news-summary { margin: 0; font-size: .95rem; color: var(--muted); }

@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* Forms (Batch 3). v0.18.0: on a wide screen the heading and intro sit
   beside the fields, the way the home page reads; with no heading the form
   keeps its own single centred column. */
.block-form { background: var(--ground); padding: 72px 0; }
.block-form .wrap {
  max-width: 1160px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 30px 56px;
  align-items: start;
}
.block-form .form-lead { min-width: 0; }
.block-form .form-lead h1, .block-form .form-lead h2 { margin: 0 0 12px; }
.block-form .form-body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.block-form.no-lead .wrap { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
.block-form label { display: block; margin: 0 0 18px; font-weight: 600; }
.block-form label.check-label { font-weight: 400; }
.block-form input[type="text"],
.block-form input[type="email"],
.block-form select,
.block-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
}
.block-form input[type="text"]:focus,
.block-form input[type="email"]:focus,
.block-form select:focus,
.block-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(73, 169, 29, .18);
}
.block-form input[type="file"] { display: block; margin-top: 6px; font: inherit; }
.block-form .btn { border: 2px solid var(--brand); cursor: pointer; font-size: 1rem; }
.block-form .btn-accent { border-color: var(--accent); }
.form-success {
  background: #e7f5ea;
  border: 1px solid #b7dfc0;
  color: #1e5c2e;
  padding: 16px 20px;
  border-radius: var(--r-sm);
}
.form-error {
  background: #fdeceb;
  border: 1px solid #f3c1be;
  color: #8a2a24;
  padding: 16px 20px;
  border-radius: var(--r-sm);
}
/* Honeypot: visually removed, still in the DOM for bots to fill. */
.hp-field { position: absolute !important; left: -9999px !important; }

/* Footer: light in direction B - the soft wash with brand links. */
.site-footer {
  background: var(--wash);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 48px 0;
  margin-top: 0;
  font-size: .95rem;
}
.site-footer a { color: var(--brand); font-weight: 600; }
.footer-strap { margin-top: 0; color: var(--ink); }
.footer-legal { color: var(--muted); }
/* v0.19.0: the footer link row (terms, privacy, company details). Wraps on
   a phone and keeps a comfortable tap target on every row. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.footer-links a { padding: 6px 0; }
.footer-links a:hover { color: var(--accent); }

/* Split hero stacks to one column on small screens. */
@media (max-width: 900px) {
  .block-split_hero { grid-template-columns: 1fr; min-height: 0; }
  .split-hero-main h1 { font-size: 42px; }
  .split-hero-main, .split-hero-panel, .split-hero-art { padding: 48px 24px; }
  .split-hero-panel { border-radius: var(--r-card) var(--r-card) 0 0; }
  /* Stacked, the words lead and the illustration follows them. */
  .split-hero-main { padding-bottom: 24px; }
  .split-hero-art { padding-top: 8px; }
  .split-hero-art img { max-width: 380px; }
  .split-hero-art .art-blob { inset: 4% 14% 2% 8%; }
}

/* v0.18.0: below this width the menu folds behind the Menu button rather
   than wrapping across three rows of the header. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 0 10px;
  }
  .site-nav.open { display: flex; }
  .site-nav a, .nav-group-label { border-radius: var(--r-sm); padding: 12px 14px; }
  .site-nav > a:last-child { margin-top: 8px; text-align: center; }
  .nav-group { width: 100%; }
  .nav-group-label { width: 100%; justify-content: space-between; }
  /* Drop-down panels flow in place on small screens instead of floating. */
  .nav-menu { position: static; min-width: 0; box-shadow: none; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 0 0 0 10px; margin: 0 0 6px 12px; }
  .nav-menu a { white-space: normal; }
}

@media (max-width: 760px) {
  .block-form .wrap { grid-template-columns: minmax(0, 1fr); }
  .block-form .form-body { padding: 24px 20px; }
  .cta-panel { border-radius: var(--r-card); padding: 44px 24px; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 27px; }
  .block-hero h1 { font-size: 2rem; }
  .block-hero { padding: 56px 0; }
  .split-hero-main h1 { font-size: 34px; }
  .block-feature_grid, .block-rich_text { padding: 52px 0; }
  .feature-card { padding: 26px; }
}

/* ---- v0.13.0 content plumbing: card grids that fill their row, the blog
   search box, the call-to-action band under a post, the related-posts strip
   and the latest_posts block. ---- */
.post-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-grid.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
@media (max-width: 980px) {
  .post-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .post-grid.cols-3, .post-grid.cols-2 { grid-template-columns: 1fr; }
}
.blog-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-head h1 { margin: 0; }
.blog-search { display: flex; gap: 8px; margin: 0; }
.blog-search input[type="search"] {
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font: inherit;
  min-width: 240px;
  background: var(--paper);
}
.blog-search input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(73, 169, 29, .18); }
.search-summary { color: var(--muted); margin: 18px 0 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.post-cta {
  background: var(--brand);
  color: #fff;
  padding: 36px;
  margin: 48px 0 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.post-cta h2 { color: #fff; margin: 0 0 8px; }
.post-cta p { margin: 0 0 16px; }
.post-cta p:last-child { margin: 0; }
.post-cta .btn { background: #fff; color: var(--brand); border-color: #fff; }
.post-cta .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.post-related, .block-latest_posts { padding: 64px 0 72px; }
.post-related { border-top: 1px solid var(--line); }
.post-related h2, .block-latest_posts h2 { margin: 0 0 26px; }
.post-related .post-card h2, .block-latest_posts .post-card h2 { margin: 0 0 8px; }
.post-all-link { margin: 30px 0 0; font-weight: 700; }
.form-intro { color: var(--muted); max-width: min(46em, 100%); margin: 0 0 22px; }

/* A split hero with nothing beside the copy - no panel and no illustration -
   runs full width (v0.13.3). min() rather than a bare em measure: at tablet
   widths a 22em heading used to overflow its column. */
.block-split_hero.no-panel { grid-template-columns: minmax(0, 1fr); min-height: 440px; }
.block-split_hero.no-panel .split-hero-main { padding-right: max(24px, calc((100vw - 1560px) / 2 + 24px)); }
.block-split_hero.no-panel .split-hero-main h1,
.block-split_hero.no-panel .split-strap { max-width: min(22em, 100%); }