/* ============================================================
   CurbMate blog - the /blog list (.cm-blog) and every post (.cm-guide).

   Loaded after style.css on blog pages only, and built from the site's own
   tokens in :root (--accent, --surface, --border, ...), so the dark theme
   comes along without a second set of colours. Fredoka for headings and
   Nunito for text come from style.css too.

   style.css is one global sheet, and four of its rules reach into an article
   unless they are answered here:
     header { position: fixed }  the post's hero is a <div>, not a <header>
     #waitlist                   the closing section keeps its #waitlist anchor;
                                 .final-cta below undoes the waitlist page's box
     .button                     the site's pill button - used on purpose for
                                 the call to action, with its margin reset
     nav a:hover                 the top nav's orange underline, taken off the
                                 contents list
   ============================================================ */

/* Height of the fixed site header. js/blog.js replaces this with the real,
   measured value; this is the fallback. */
:root {
  --blog-header-h: 70px;
}

.cm-guide,
.cm-blog {
  --g-collect: #3F6F8C;              /* the collection truck: slate, so it reads as "not us" */
  --g-collect-tint: rgba(63, 111, 140, 0.10);
  --g-collect-line: rgba(63, 111, 140, 0.35);
  --g-radius: 20px;
  display: block;
  padding-top: var(--blog-header-h);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.75;
}

html:has(#dark-mode:checked) .cm-guide,
html:has(#dark-mode:checked) .cm-blog {
  --g-collect: #9CC3DC;
  --g-collect-tint: rgba(156, 195, 220, 0.10);
  --g-collect-line: rgba(156, 195, 220, 0.35);
}

.cm-guide *,
.cm-blog * {
  box-sizing: border-box;
}

.cm-guide p,
.cm-blog p {
  margin: 0 0 1.1em;
}

.cm-guide p:last-child {
  margin-bottom: 0;
}

.cm-guide a {
  color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.cm-guide a:hover {
  color: var(--orange-dark);
}

.cm-guide :focus-visible,
.cm-blog :focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  border-radius: 6px;
}

.cm-guide strong {
  color: var(--text);
  font-weight: 800;
}

.cm-guide .svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cm-guide .icon,
.cm-blog .icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Skip link and the reading-progress line sit outside <main>, next to the
   site header, so they are not scoped. */
.blog-skip {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 20;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.blog-skip:focus {
  transform: none;
}

/* Along the header's bottom border, drawn over it in orange as you read. */
.reading-progress {
  position: fixed;
  left: 0;
  top: calc(var(--blog-header-h) - 3px);
  z-index: 11;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------------- post hero ---------------- */

.cm-guide .article-hero {
  background:
    radial-gradient(ellipse at 8% -10%, var(--green-tint), transparent 55%),
    var(--surface-alt);
  border-bottom: 2px solid var(--border);
}

.cm-guide .hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.cm-guide .eyebrow,
.cm-blog .eyebrow,
.cm-guide .section-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--accent);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The breadcrumb back to the list, as a pill. */
.cm-guide .eyebrow a {
  padding: 3px 14px;
  border: 2px solid var(--green-light);
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--accent);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cm-guide .eyebrow a:hover {
  background: var(--green-light);
  color: #0B3327;
}

.cm-guide .eyebrow a + span::before {
  content: "/";
  margin-right: 10px;
  color: var(--text-soft);
}

.cm-guide h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.cm-guide h1 span {
  display: block;
  max-width: 28rem;
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 0.5em;
  font-weight: 500;
  line-height: 1.35;
}

.cm-guide .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 28px 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.cm-guide .article-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cm-guide .article-meta > span + span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 14px;
  border-radius: 50%;
  background: var(--green-light);
}

.cm-guide .article-meta .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* ---------------- the hero picture ---------------- */

.cm-guide .hero-visual {
  position: relative;
  margin: 0;
  border: 2px solid rgba(124, 199, 111, 0.45);
  border-radius: 26px;
  background: linear-gradient(165deg, #13805F 0%, var(--green-deep) 52%, #0A5540 100%);
  box-shadow: var(--shadow-lift);
}

.cm-guide .hero-photo {
  overflow: hidden;
}

.cm-guide .hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* Messaging-bank line, stuck on the corner like a sticker. */
.cm-guide .hero-sticker {
  position: absolute;
  top: -16px;
  right: 22px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--cream);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(226, 80, 42, 0.35);
  transform: rotate(3deg);
}

.hero-scene {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
}

.hero-scene .scene-sun      { fill: var(--orange); }
.hero-scene .scene-cloud    { fill: var(--cream); opacity: 0.9; }
.hero-scene .scene-hill     { fill: rgba(124, 199, 111, 0.28); }
.hero-scene .scene-lawn     { fill: rgba(124, 199, 111, 0.5); }
.hero-scene .scene-house    { fill: var(--cream); }
.hero-scene .scene-roof     { fill: var(--green-light); }
.hero-scene .scene-chimney  { fill: var(--cream-edge); }
.hero-scene .scene-window   { fill: var(--green-deep); opacity: 0.85; }
.hero-scene .scene-door     { fill: var(--orange); }
.hero-scene .scene-knob     { fill: var(--green-deep); }
.hero-scene .scene-curb     { fill: var(--cream-edge); }
.hero-scene .scene-street   { fill: #0A4A38; }

.hero-scene .scene-path {
  stroke: var(--cream);
  stroke-width: 3;
  stroke-dasharray: 2 10;
  stroke-linecap: round;
  opacity: 0.75;
}

.hero-scene .scene-lane {
  stroke: var(--cream);
  stroke-width: 3;
  stroke-dasharray: 22 18;
  opacity: 0.3;
}

.hero-scene .scene-label {
  fill: var(--cream);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-scene .scene-curb-label {
  fill: var(--green-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hero-scene .bin-wheel                { fill: #0B3327; }
.hero-scene .bin-garbage .bin-body    { fill: var(--cream); }
.hero-scene .bin-garbage .bin-lid,
.hero-scene .bin-garbage .bin-handle  { fill: #D9CBA8; }
.hero-scene .bin-organics .bin-body   { fill: var(--green-light); }
.hero-scene .bin-organics .bin-lid,
.hero-scene .bin-organics .bin-handle { fill: #56A64C; }
.hero-scene .bin-recycling .bin-body  { fill: #7DB3D6; }
.hero-scene .bin-recycling .bin-lid,
.hero-scene .bin-recycling .bin-handle { fill: #4E8DB9; }

.hero-scene .truck-body   { fill: #6F98B3; }
.hero-scene .truck-stripe { fill: var(--cream); opacity: 0.7; }
.hero-scene .truck-cab    { fill: #3F6F8C; }
.hero-scene .truck-window { fill: #D7E8F2; }
.hero-scene .truck-bumper { fill: #2C5570; }
.hero-scene .truck-wheel  { fill: #0B3327; }
.hero-scene .truck-hub    { fill: var(--cream-edge); }

/* The loop: carts out, truck in, carts hop as they are emptied, truck gone,
   carts home. Nine seconds; the two animations share the clock. */
.hero-scene .scene-bins  { animation: cm-carts 9s ease-in-out infinite; }
.hero-scene .scene-truck { animation: cm-truck 9s ease-in-out infinite; }
.hero-scene .scene-cloud { animation: cm-drift 14s ease-in-out infinite alternate; }
.hero-scene .scene-cloud-2 { animation-duration: 19s; animation-direction: alternate-reverse; }

@keyframes cm-carts {
  0%, 10%   { transform: translate(0, 0); }
  30%, 51%  { transform: translate(170px, 0); }
  54%       { transform: translate(170px, -8px); }
  57%, 76%  { transform: translate(170px, 0); }
  94%, 100% { transform: translate(0, 0); }
}

@keyframes cm-truck {
  0%, 36%   { transform: translateX(260px); }
  48%, 61%  { transform: translateX(0); }
  75%, 100% { transform: translateX(-560px); }
}

@keyframes cm-drift {
  to { transform: translateX(26px); }
}

/* No motion: the carts wait at the curb and the truck stays out of frame. */
@media (prefers-reduced-motion: reduce) {
  .hero-scene .scene-bins,
  .hero-scene .scene-truck,
  .hero-scene .scene-cloud {
    animation: none;
  }

  .hero-scene .scene-bins  { transform: translate(170px, 0); }
  .hero-scene .scene-truck { transform: translateX(260px); }
}

html:has(#dark-mode:checked) .cm-guide .hero-visual {
  border-color: var(--border);
}

/* ---------------- article layout ---------------- */

.cm-guide .article-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 40px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 72px;
}

.cm-guide .article-layout-single {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
}

.cm-guide .article-body {
  min-width: 0;
  max-width: 46rem;
}

/* Contents list: sticks beside the article, below the fixed header. */
.cm-guide .contents {
  position: sticky;
  top: calc(var(--blog-header-h) + 28px);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cm-guide .contents-label {
  margin: 0 0 16px;
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cm-guide .contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--border);
}

.cm-guide .contents li + li {
  margin-top: 4px;
}

.cm-guide .contents a {
  position: relative;
  display: block;
  margin-left: -2px;
  padding: 5px 0 5px 16px;
  border-left: 2px solid transparent;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* style.css gives every nav link an orange underline on hover; not here. */
.cm-guide .contents a:hover {
  border-bottom: 0;
  border-radius: 0;
  border-left-color: var(--green-light);
  color: var(--accent);
}

.cm-guide .contents a.is-active {
  border-left-color: var(--orange);
  color: var(--heading);
  font-weight: 700;
}

/* ---------------- article text ---------------- */

.cm-guide .article-intro {
  padding-bottom: 40px;
}

.cm-guide .article-intro p:first-child {
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.45;
}

.cm-guide .article-section {
  padding: 48px 0;
  border-top: 2px solid var(--border);
  scroll-margin-top: calc(var(--blog-header-h) + 24px);
}

.cm-guide h2 {
  margin: 0 0 24px;
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.cm-guide h3 {
  margin: 32px 0 12px;
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.35;
}

.cm-guide ul,
.cm-guide .article-prose ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
}

.cm-guide .article-body li {
  margin-bottom: 0.35em;
}

.cm-guide li::marker {
  color: var(--accent);
}

/* Markdown posts: headings get the same room as the sections above, and
   images and quotes look like the rest of the site. */
.cm-guide .article-prose h2 {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid var(--border);
  scroll-margin-top: calc(var(--blog-header-h) + 24px);
}

.cm-guide .article-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cm-guide .article-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
  border: 2px solid var(--border);
  border-radius: var(--g-radius);
}

.cm-guide .article-prose blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 5px solid var(--orange);
  border-radius: 0 16px 16px 0;
  background: var(--surface-alt);
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.2rem;
}

.cm-guide .article-prose code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-alt);
  font-size: 0.92em;
}

/* ---------------- quick answer ---------------- */

.cm-guide .quick-answer {
  margin-bottom: 40px;
  padding: 34px 36px;
  border: 2px solid var(--green-light);
  border-left-width: 7px;
  border-radius: var(--g-radius);
  background: var(--green-tint);
}

.cm-guide .quick-answer h2 {
  font-size: 1.55rem;
}

/* "Your home -> curb -> collection -> curb -> your home" */
.cm-guide .quick-answer p:last-child {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--surface);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  text-align: center;
}

.cm-guide .quick-answer p:last-child strong {
  color: var(--accent);
  font-weight: 600;
  word-spacing: 0.15em;
}

/* ---------------- how it works, at a glance ---------------- */

.cm-guide .step-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.cm-guide .step-overview li {
  margin: 0;
  padding: 22px 20px;
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.cm-guide .step-overview li:hover {
  transform: translateY(-4px);
  border-color: var(--green-light);
}

.cm-guide .step-overview li::marker {
  content: "";
}

.cm-guide .step-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--accent);
}

/* The step number, as a badge on the icon. */
.cm-guide .step-icon > span {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------------- valet vs. collection ---------------- */

.cm-guide .comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 30px;
}

.cm-guide .comparison > div {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 22px 24px;
  border: 2px solid var(--green-light);
  border-radius: 18px;
  background: var(--green-tint);
}

.cm-guide .comparison > div + div {
  border-color: var(--g-collect-line);
  background: var(--g-collect-tint);
}

.cm-guide .comparison .icon {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
}

.cm-guide .comparison > div + div .icon {
  color: var(--g-collect);
}

.cm-guide .comparison span {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cm-guide .comparison strong {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}

/* ---------------- the trip, home to curb and back ---------------- */

.cm-guide .journey {
  margin: 30px 0;
  padding: 28px 22px 22px;
  border: 2px solid var(--border);
  border-radius: var(--g-radius);
  background: var(--surface-alt);
}

.cm-guide .journey figcaption {
  margin-bottom: 26px;
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.cm-guide .journey-flow {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 0.8fr 1.4fr 0.8fr 1.2fr 0.8fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-guide .journey-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1.35;
  text-align: center;
}

.cm-guide .journey-flow li::marker {
  content: "";
}

.cm-guide .journey-flow li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 12px;
  right: -12px;
  color: var(--text-soft);
  font-weight: 700;
}

.cm-guide .journey-flow .icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-soft);
}

.cm-guide .journey-flow strong {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.cm-guide .journey-flow span {
  font-size: 0.8rem;
}

.cm-guide .journey-flow .valet .icon {
  border-color: var(--green-light);
  background: var(--green-tint);
  color: var(--accent);
}

.cm-guide .journey-flow .valet strong {
  color: var(--accent);
}

.cm-guide .journey-flow .collector .icon {
  border-color: var(--g-collect-line);
  background: var(--g-collect-tint);
  color: var(--g-collect);
}

.cm-guide .journey-flow .collector strong {
  color: var(--g-collect);
}

.cm-guide .journey-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  color: var(--text-soft);
  font-size: 0.85rem;
}

.cm-guide .journey-key i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.cm-guide .journey-key span + span i {
  background: var(--g-collect);
}

/* ---------------- who uses it ---------------- */

.cm-guide .audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.cm-guide .audience-card {
  padding: 26px;
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 1rem;
  line-height: 1.7;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cm-guide .audience-card:hover {
  transform: translateY(-6px);
  border-color: var(--green-light);
  box-shadow: var(--shadow-lift);
}

.cm-guide .audience-card .icon {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--accent);
}

.cm-guide .audience-card h3 {
  margin: 14px 0 10px;
}

.cm-guide .audience-card p {
  color: var(--text-soft);
}

/* ---------------- five minutes ---------------- */

.cm-guide .five-minutes {
  margin: 12px 0 48px;
  padding: 38px;
  border: 2px solid var(--border);
  border-radius: var(--g-radius);
  background: var(--surface-alt);
}

.cm-guide .five-minutes .mental-checklist {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 5px solid var(--orange);
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.35;
}

/* The week's other jobs, as unticked boxes. */
.cm-guide .five-minutes .checklist-item {
  position: relative;
  margin-bottom: 0.45em;
  padding-left: 32px;
}

.cm-guide .five-minutes .checklist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-soft);
  border-radius: 5px;
  background: var(--surface);
}

/* "Would having garbage day handled for you make your week easier?" */
.cm-guide #is-it-for-you p:has(> strong) {
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--green-tint);
  color: var(--heading);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.3rem;
  line-height: 1.4;
}

.cm-guide #is-it-for-you p:has(> strong) strong {
  color: inherit;
  font-weight: 600;
}

/* ---------------- CurbMate in Greater Victoria ---------------- */

.cm-guide .local-section {
  margin: 12px 0 48px;
  padding: 38px 170px 38px 38px;
  border: 2px solid var(--green-light);
  border-radius: var(--g-radius);
  background:
    url("/images/logo-mark.png") no-repeat right 32px top 34px / 110px auto,
    var(--surface);
  box-shadow: var(--shadow);
}

.cm-guide .local-section .section-eyebrow {
  margin-bottom: 14px;
}

/* "One less thing to remember." */
.cm-guide .local-section p:last-child {
  margin-top: 26px;
  color: var(--accent);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-size: 1.8rem;
  line-height: 1.2;
}

.cm-guide .local-section p:last-child strong {
  color: inherit;
  font-weight: 600;
}

/* ---------------- FAQ ---------------- */

.cm-guide .faq-item {
  margin-bottom: 12px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.2s ease;
}

.cm-guide .faq-item[open] {
  border-color: var(--green-light);
}

.cm-guide .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.cm-guide .faq-item summary::-webkit-details-marker {
  display: none;
}

.cm-guide .faq-item h3 {
  margin: 0;
  font-size: 1.12rem;
}

.cm-guide .faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--accent);
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.cm-guide .faq-toggle::before,
.cm-guide .faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.cm-guide .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 0.2s ease;
}

.cm-guide .faq-item[open] .faq-toggle {
  transform: rotate(180deg);
  background: var(--green-light);
  color: #0B3327;
}

.cm-guide .faq-item[open] .faq-toggle::after {
  opacity: 0;
}

.cm-guide .faq-item summary:hover .faq-toggle {
  background: var(--green-light);
  color: #0B3327;
}

.cm-guide .faq-answer {
  padding: 0 22px 20px;
  color: var(--text-soft);
  font-size: 1.02rem;
}

/* ---------------- closing call to action ---------------- */

/* Two classes and the id, so it beats style.css's #waitlist, which boxes the
   waitlist page's own section (70rem wide, 13.5rem of top padding). */
.cm-guide #waitlist.final-cta {
  max-width: none;
  margin: 24px 0 0;
  padding: 44px 44px 40px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 199, 111, 0.35), transparent 45%),
    linear-gradient(160deg, #13805F, var(--green-deep) 60%, #0A5540);
  color: #E6F3E8;
  box-shadow: var(--shadow-lift);
}

.cm-guide .final-cta h2 {
  color: var(--cream);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.cm-guide .final-cta strong {
  color: var(--cream);
}

.cm-guide .cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 28px;
}

/* The site's own pill button (style.css .button), minus the hero's top margin. */
.cm-guide .final-cta .button {
  margin: 0;
  color: #0B3327;
}

.cm-guide .final-cta .button:hover {
  color: var(--cream);
}

.cm-guide .cta-address {
  color: #CFE9C6;
  font-size: 0.9rem;
}

/* "All posts", on the same grid as the article so it lines up with the text
   rather than the contents list. */
.cm-guide .post-end {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 40px 72px;
}

.cm-guide .post-end-single {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
}

.cm-guide .post-end a {
  grid-column: -2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--green-light);
  border-radius: 999px;
  color: var(--accent);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cm-guide .post-end a:hover {
  border-bottom-width: 2px;
  background: var(--green-tint);
  color: var(--accent);
}

/* The Light/Dark switch. style.css floats it bottom-left, which on a post is
   on top of the contents list. From 1240px the right margin beside the
   article is empty, so it goes there; below that there is no empty margin
   and it would sit on the text, so it joins the page just above the footer. */
@media (min-width: 1240px) {
  .blog-page #theme-toggle-container {
    left: auto;
    right: 20px;
  }
}

/* The /blog list is short and its cards run close to the right edge, so there
   it always sits above the footer. */
@media (max-width: 1239px) {
  .blog-page #theme-toggle-container {
    position: static;
    justify-content: center;
    padding: 4px 0 32px;
  }
}

.blog-page .cm-blog ~ #theme-toggle-container {
  position: static;
  justify-content: center;
  padding: 4px 0 32px;
}

/* ---------------- the /blog list ---------------- */

.cm-blog .blog-hero {
  background:
    radial-gradient(ellipse at 90% -20%, var(--green-tint), transparent 55%),
    var(--surface-alt);
  border-bottom: 2px solid var(--border);
}

.cm-blog .blog-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px 56px;
}

.cm-blog h1 {
  margin: 0;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.1;
}

.cm-blog .blog-lead {
  max-width: 36rem;
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: 1.15rem;
}

.cm-blog .blog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px 88px;
}

.cm-blog .post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cm-blog .post-card:hover,
.cm-blog .post-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--green-light);
  box-shadow: var(--shadow-lift);
}

.cm-blog .post-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.cm-blog .post-card-visual {
  background: linear-gradient(165deg, #13805F 0%, var(--green-deep) 52%, #0A5540 100%);
}

.cm-blog .post-card-visual .hero-scene {
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.cm-blog .post-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.cm-blog .post-card-copy {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 32px;
}

.cm-blog .post-card-featured .post-card-copy {
  justify-content: center;
  padding: 40px 44px;
}

.cm-blog .post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.cm-blog .post-card h2 {
  margin: 0 0 14px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.cm-blog .post-card-featured h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

.cm-blog .post-card h2 a {
  color: var(--heading);
  text-decoration: none;
}

.cm-blog .post-card h2 span {
  display: block;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.62em;
  font-weight: 500;
}

/* The whole card is the link: the title's link stretched over it. */
.cm-blog .post-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cm-blog .post-card-copy > p:not(.post-card-meta) {
  color: var(--text-soft);
}

.cm-blog .post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--accent);
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
}

.cm-blog .post-card-more i {
  transition: transform 0.25s ease;
}

.cm-blog .post-card:hover .post-card-more i {
  transform: translateX(5px);
}

.cm-blog .blog-empty {
  grid-column: 1 / -1;
  color: var(--text-soft);
  text-align: center;
}

/* ---------------- smaller screens ---------------- */

@media (max-width: 1000px) {
  .cm-guide .hero-inner {
    gap: 36px;
  }

  .cm-guide .article-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 40px;
  }

  .cm-guide .journey-flow {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cm-guide .journey-flow li {
    display: grid;
    grid-template-columns: 48px 110px 1fr;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  .cm-guide .journey-flow li:not(:last-child)::after {
    content: "\2193";
    top: 50px;
    right: auto;
    left: 18px;
  }

  .cm-guide .journey-flow span {
    font-size: 0.9rem;
  }

  .cm-guide .comparison {
    grid-template-columns: 1fr;
  }

  .cm-guide .post-end {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 40px;
  }

  .cm-blog .post-card-featured {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cm-guide .hero-inner {
    grid-template-columns: 1fr;
    padding: 36px 20px 44px;
    gap: 40px;
  }

  .cm-guide h1 {
    font-size: clamp(2rem, 8.4vw, 2.8rem);
  }

  .cm-guide .article-layout {
    display: block;
    padding: 36px 20px 32px;
  }

  /* The contents list moves above the article, in two columns. */
  .cm-guide .contents {
    position: static;
    margin-bottom: 36px;
    padding: 20px 22px;
    border: 2px solid var(--border);
    border-radius: 18px;
    background: var(--surface-alt);
  }

  .cm-guide .contents ol {
    columns: 2;
    column-gap: 20px;
    border: 0;
  }

  .cm-guide .contents li {
    break-inside: avoid;
  }

  .cm-guide .contents a {
    margin-left: 0;
    padding: 5px 0;
    border-left: 0;
  }

  .cm-guide .contents a.is-active {
    color: var(--accent);
  }

  .cm-guide .article-section {
    padding: 36px 0;
  }

  .cm-guide .article-intro p:first-child {
    font-size: 1.3rem;
  }

  .cm-guide .quick-answer,
  .cm-guide .five-minutes,
  .cm-guide .local-section,
  .cm-guide #waitlist.final-cta {
    padding: 28px 24px;
  }

  /* The logo mark sits above the heading instead of beside the text. */
  .cm-guide .local-section {
    padding-top: 118px;
    background-position: left 24px top 26px;
    background-size: 84px auto;
  }

  .cm-guide .step-overview {
    grid-template-columns: 1fr;
  }

  .cm-guide .step-overview li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
  }

  .cm-guide .step-icon {
    flex-shrink: 0;
    margin: 0;
  }

  .cm-guide .audience-grid {
    grid-template-columns: 1fr;
  }

  .cm-guide .five-minutes .mental-checklist {
    font-size: 1.3rem;
  }

  .cm-guide .post-end {
    display: block;
    padding: 0 20px 48px;
  }

  .cm-blog .blog-hero-inner {
    padding: 44px 20px 40px;
  }

  .cm-blog .blog-list {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 36px 20px 64px;
  }

  .cm-blog .post-card-copy,
  .cm-blog .post-card-featured .post-card-copy {
    padding: 24px 22px 26px;
  }
}

@media (max-width: 480px) {
  .cm-guide,
  .cm-blog {
    font-size: 1rem;
  }

  .cm-guide .hero-sticker {
    right: 14px;
    font-size: 0.85rem;
  }

  /* The meta line wraps here, and a dot would start the second line. */
  .cm-guide .article-meta {
    gap: 6px 18px;
  }

  .cm-guide .article-meta > span + span::before {
    display: none;
  }

  .cm-guide .contents ol {
    columns: 1;
  }

  .cm-guide .journey {
    padding: 22px 16px;
  }

  .cm-guide .journey-flow li {
    grid-template-columns: 44px 92px 1fr;
    gap: 10px;
  }

  .cm-guide .journey-flow .icon {
    width: 44px;
    height: 44px;
  }

  .cm-guide .journey-flow li:not(:last-child)::after {
    top: 46px;
    left: 16px;
  }

  .cm-guide .final-cta .button {
    width: 100%;
  }
}

@media print {
  .blog-skip,
  .reading-progress,
  #navbar,
  #theme-toggle-container,
  footer,
  .cm-guide .article-sidebar,
  .cm-guide .post-end,
  .cm-guide .hero-sticker {
    display: none;
  }

  .cm-guide {
    padding-top: 0;
    color: #111;
  }

  .cm-guide .article-layout {
    display: block;
    padding: 20px 0;
  }

  .cm-guide #waitlist.final-cta {
    background: #fff;
    color: #111;
    border: 1px solid #aaa;
    box-shadow: none;
  }

  .cm-guide .final-cta h2,
  .cm-guide .final-cta strong,
  .cm-guide .cta-address {
    color: #111;
  }

  .cm-guide .audience-card,
  .cm-guide .faq-item {
    break-inside: avoid;
  }
}