/* Lawn care, the block: a neighborhood drawn from straight above. The page is long runs on one ground, and the
   ground changes only for a real moment: the full-width plate, which opens the lit run, the houses figure and the
   month chart. Margin plates are masks painted in a token, so the art is always tone on tone, and each fades out
   before any text. Ink and muted-porch carry text on porch and lit; the night tokens carry it on ink. */

:root { --measure: 57ch; }
.lit-run { --ground: var(--lit); background: var(--ground); }

.run {
  padding: clamp(2.5rem, 5.5vw, 5rem) var(--gutter);
  background: var(--ground);
  color: var(--fg);
}
.cols { display: grid; row-gap: 1.25rem; align-items: start; }
.text { max-width: var(--measure); }
.text + .text { margin-top: 0.85rem; }
.cols > .text + .text { margin-top: 0; }
.big-note { max-width: var(--measure); font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }

@media (min-width: 768px) {
  .cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cols.ends { align-items: end; }
  .half { grid-column: span 6; }
  .wide { grid-column: span 7; }
  .narrow { grid-column: span 5; }
}

/* ---------- Plates: a corner of the neighborhood, masked to fade before the words ---------- */
.plated { position: relative; isolation: isolate; }
.plated::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--plate-box, 0);
  background: var(--plate-ink, var(--ink));
  opacity: var(--plate-strength, 0.5);
  mask-image: var(--plate), var(--fade);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: cover, 100% 100%;
  mask-position: var(--plate-at, right top), center;
}

/* ---------- Hero ---------- */
.lawn-hero {
  --plate: url('/assets/img/trades/lawn-care/hero.svg');
  --plate-box: 0 0 auto 40%;
  --plate-at: right top;
  --fade: radial-gradient(ellipse 100% 100% at 100% 0, black 34%, transparent 82%);
  overflow: clip;
  padding: calc(var(--header-h) + 0.35rem) var(--gutter) 0;

  &::before { height: min(33rem, 60vw); }
  & .block-greeting { margin-top: clamp(0.25rem, 1vw, 0.75rem); font-family: var(--f-head); letter-spacing: var(--track-mega); }
  & .block-hello { display: block; font-size: var(--t-mega); font-weight: var(--w-quiet); line-height: 1; }
  & .block-place { display: block; margin-top: -0.04em; font-size: min(var(--t-mega), 15.6vw); font-weight: var(--w-loud); line-height: 1.05; white-space: nowrap; }
  & .hero-lower { display: grid; row-gap: 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.75rem); }
  & .hero-press { margin-top: 1.1rem; }
  & .hero-count-num { font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; font-variant-numeric: lining-nums; margin-block: 0.2rem; }
  & .hero-count-unit { color: var(--fg-muted); font-size: var(--t-s); }
}

@media (min-width: 1100px) {
  .lawn-hero .hero-lower {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;

    & .headline-cell { grid-column: span 5; }
    & .hero-count { grid-column: span 2; }
    & .hero-intro { grid-column: span 5; }
  }
}
/* Below that the count needs a wider cell, and the two intro sentences take the full row. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .lawn-hero .hero-lower {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;

    & .headline-cell { grid-column: span 8; }
    & .hero-count { grid-column: span 4; }
    & .hero-intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
    & .hero-intro .text + .text { margin-top: 0; }
  }
}

/* ---------- Sources ---------- */
.guide-table.channel-table {
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t-body);
  line-height: 1.3;

  & thead th { color: var(--fg-muted); font-size: var(--t-s); font-weight: 650; text-align: left; box-shadow: none; }
  & a { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & td:not(.has-price):nth-child(3) { color: var(--fg-muted); }
  & td.has-price { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-loud); letter-spacing: var(--track-l); font-variant-numeric: lining-nums; }
}

@media (min-width: 768px) {
  .guide-table.channel-table {
    table-layout: fixed;

    & :is(th, td) { padding: 0.75rem 1.5rem 0.75rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
    & thead th { padding-block: 0.5rem; border-bottom: 2px solid var(--fg); }
    & tr > :last-child { padding-right: 0; }
    & th:nth-child(1) { width: 31%; }
    & th:nth-child(2) { width: 27%; }
    & th:nth-child(3) { width: 19%; }
  }
}

@media (max-width: 767.98px) {
  .guide-table.channel-table {
    display: block;

    & thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    & :is(tbody, tr, th, td) { display: block; }
    & tbody tr { padding-block: 1rem; border-top: 1px solid var(--line); }
    & tbody th { margin-bottom: 0.4rem; padding: 0; border: 0; text-align: left; }
    & td { position: relative; padding: 0.15rem 0 0.15rem 8.25rem; border: 0; }
    & td::before { content: attr(data-label); position: absolute; left: 0; top: 0.3rem; width: 7.75rem; color: var(--fg-muted); font-family: var(--f); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
  }
}

.sources-notes { margin-top: clamp(1.75rem, 3.2vw, 2.75rem); }

.postcard-moment {
  --plate: url('/assets/img/trades/lawn-care/postcard.svg');
  --plate-box: 0 calc(var(--gutter) * -1) calc(clamp(2.5rem, 5.5vw, 5rem) * -1) 60%;
  --plate-at: right center;
  --fade: radial-gradient(ellipse 100% 50% at 100% 50%, black 34%, transparent 100%);
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-block: 0 clamp(0.5rem, 2vw, 1.75rem);
  min-height: clamp(6rem, 12vw, 10rem);
}
.note-tail { font-weight: 650; }
@media (min-width: 768px) {
  .postcard-moment .big-note { max-width: min(var(--measure), 56%); }
}

/* ---------- The full-width plate: the neighborhood as a moment ---------- */
.block-plate {
  height: clamp(19rem, 39vw, 36rem);
  overflow: clip;
  mask-image: linear-gradient(to bottom, black 80%, transparent);

  & img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- New homeowners and services: one lit run ---------- */
.advice {
  margin-top: 0.9rem;

  & li { padding-block: 0.55rem; font-size: var(--t-m); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
  & li + li { border-top: 1px solid var(--line); }
}
.money-row { margin-top: clamp(2.5rem, 5.5vw, 5rem); }
/* The figure sits inside its own sentence, with the caveat at display weight right beside it. */
.money-line, .money-caveat { max-width: var(--measure); font-size: var(--t-m); line-height: 1.32; }
.mega-number {
  display: block; margin-block: 0.08em 0.12em;
  font-family: var(--f-head); font-size: var(--t-mega); font-weight: var(--w-loud);
  letter-spacing: var(--track-mega); line-height: 0.9; font-variant-numeric: lining-nums;
}
.money-caveat strong {
  display: block; margin-bottom: 0.2em;
  font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud);
  letter-spacing: var(--track-xl); line-height: 1; text-wrap: balance;
}
.keep-whole { white-space: nowrap; }

/* The block is the chart: its share of the column is ink. */
.percent-row {
  --plate: url('/assets/img/trades/lawn-care/yards.svg');
  --plate-box: -2rem calc(var(--gutter) * -1) 2rem 80%;
  --plate-at: right center;
  --fade: radial-gradient(ellipse 100% 50% at 100% 50%, black 40%, transparent 100%);
  margin-top: clamp(2.5rem, 5.5vw, 5rem);
}
.percent-fill {
  display: grid; row-gap: 0.75rem; width: 79%;
  padding: clamp(1.25rem, 1.8vw, 1.6rem) clamp(1rem, 2vw, 2rem);
  background: var(--ink); color: var(--porch);
}
.percent-number {
  font-family: var(--f-head); font-size: var(--t-mega); font-weight: var(--w-loud);
  letter-spacing: var(--track-mega); line-height: 0.95; font-variant-numeric: lining-nums;
}
.percent-notes { margin-top: 1.25rem; }

#services { padding-top: 0; }
.lead-in {
  max-width: var(--measure); font-size: var(--t-m); line-height: 1.32;

  & strong { font-family: var(--f-head); font-weight: var(--w-sub); letter-spacing: -0.015em; }
  & + .lead-in { margin-top: 0.85rem; }
}
.statement {
  font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head);
  letter-spacing: var(--track-l); line-height: 1.12;
}
.services-window, .services-law { margin-top: clamp(2rem, 4vw, 3.5rem); }
.organic-line {
  font-size: var(--t-m); line-height: 1.32;

  & strong {
    display: block; margin-top: 0.4rem;
    font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud);
    letter-spacing: var(--track-xl); line-height: 1; font-variant-numeric: lining-nums;
  }
}

@media (min-width: 768px) {
  .percent-fill { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gutter); align-items: center; }
}

/* ---------- Houses, not condo units ---------- */
.houses-row {
  --plate: url('/assets/img/trades/lawn-care/houses.svg');
  --plate-ink: var(--porch);
  --plate-strength: 0.46;
  --plate-box: 0 0 auto 50%;
  --plate-at: right top;
  --fade: radial-gradient(ellipse 80% 100% at 100% 0, black 30%, transparent 88%);
  overflow: clip;
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--gutter);

  &::before { height: clamp(14rem, 24vw, 22rem); }
}
.houses-note { margin-top: 0.75rem; color: var(--fg-muted); font-size: var(--t-m); line-height: 1.3; }
.houses-facts { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.houses-trade { font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.01em; }
.houses-figure {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: end;

  & strong { grid-row: 1 / span 2; font-family: var(--f-head); font-size: var(--t-mega); font-weight: var(--w-loud); letter-spacing: var(--track-mega); line-height: 0.95; font-variant-numeric: lining-nums; }
  & span { align-self: end; font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
  & small { align-self: start; margin-top: 0.15rem; padding-bottom: 0.5rem; font-size: var(--t-xs); color: var(--fg-muted); }
}
.houses-rest { font-size: var(--t-m); line-height: 1.32; max-width: 48ch; }
.houses-visual { min-width: 0; margin-top: 0.75rem; }
/* The field fills row by row here, so houses and condos lie in two bands; the site's script would fill by column. */
html .houses-visual .unit-field,
html.js .houses-visual .unit-field.is-columns {
  grid-template-columns: repeat(auto-fill, 5px); grid-template-rows: none; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: 5px; gap: 2px;

  & .dot { width: 5px; height: 5px; }
}
.houses-visual .trade-key { font-size: var(--t-s); }

@media (min-width: 768px) {
  .houses-trade { grid-column: 1 / -1; }
  .houses-figure { grid-column: span 7; }
  .houses-rest { grid-column: span 5; padding-bottom: 0.5rem; }
  .houses-visual { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  html .houses-visual .unit-field,
  html.js .houses-visual .unit-field.is-columns {
    grid-template-columns: repeat(auto-fill, 9px); grid-auto-rows: 9px; gap: 3px;

    & .dot { width: 9px; height: 9px; }
  }
}

/* ---------- Mail plan ---------- */
.mail-head {
  --plate: url('/assets/img/trades/lawn-care/mail.svg');
  --plate-box: calc(clamp(2.5rem, 5.5vw, 5rem) * -1) calc(var(--gutter) * -1) -2rem 52%;
  --plate-at: right top;
  --fade: radial-gradient(ellipse 96% 100% at 100% 0, black 30%, transparent 100%);

  & .h-xl { max-width: 15em; }
}
.mail-run { overflow: clip; }
.mail-steps {
  counter-reset: step;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);

  & > li { counter-increment: step; position: relative; min-height: var(--t-xl); padding-left: clamp(2.75rem, 5vw, 4.5rem); break-inside: avoid; }
  & > li + li { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
  & > li::before {
    content: counter(step); position: absolute; left: 0; top: -0.08em;
    font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud);
    letter-spacing: var(--track-xl); line-height: 1; font-variant-numeric: lining-nums;
  }
  & .step-lead { max-width: var(--measure); font-size: var(--t-m); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
  & .step-lead + .text { margin-top: 0.4rem; }
}

@media (min-width: 768px) {
  .mail-steps {
    columns: 2; column-gap: var(--gutter);

    & > li:first-child { margin-top: 0; }
  }
}

/* ---------- The year wheel ----------
   Art in wheel.svg, curved words in the inline SVG, and the labels on its face as text placed over them. Marks are
   one size whatever the fact, and a fact with one date gets a start tick and the same short tail: nothing here
   reads as an amount or as when anyone buys. */
.wheel {
  margin: clamp(2.75rem, 6vw, 5.5rem) 0 0;
  display: grid; row-gap: 1.5rem;
}
.wheel-caption { font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head); letter-spacing: var(--track-l); line-height: 1.1; }
.wheel-dial { position: relative; min-width: 0; container-type: inline-size; }
.wheel-art { display: block; width: 100%; height: auto; }
.wheel-type { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel-month { fill: var(--porch); font-family: var(--f); font-size: 27px; font-weight: 700; letter-spacing: 0.01em; }
.wheel-word { fill: var(--muted-porch); font-family: var(--f); font-size: 22px; font-weight: 700; }
.wheel-label {
  position: absolute; left: var(--from-left, auto); right: var(--from-right, auto); top: var(--from-top);
  max-width: var(--wrap);
  color: var(--ink); font-family: var(--f-head); font-size: clamp(var(--t-xs), 2.5cqi, var(--t-body)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;

  &.at-crabgrass { --from-right: 23.4%; --from-top: 55.8%; --wrap: 30%; text-align: end; }
  &.at-fertilizer { --from-right: 29.6%; --from-top: 65.8%; --wrap: 26%; text-align: end; }
  &.at-seeding { --from-left: 25.2%; --from-top: 57.6%; --wrap: 30%; }
  &.at-grub { --from-left: 31.9%; --from-top: 69.8%; --wrap: 22%; }
  &.at-winterizer { --from-left: 25.2%; --from-top: 31.2%; --wrap: 32%; }
}

.wheel-list {
  display: grid; row-gap: 0;

  & li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; padding-block: 0.55rem; border-top: 1px solid var(--line); line-height: 1.3; }
  & li:first-child { border-top: 2px solid var(--fg); }
  & b { font-weight: 750; }
}
.wheel-key {
  display: block; width: 2.25rem; height: 1.3em; position: relative;

  &.is-card::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 0.9rem; height: 0.9rem; border-radius: 999px; background: var(--ink); }
  &.is-window::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 2.25rem; height: 0.9rem; background: var(--ink); }
  &.is-start::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 0.3rem; height: 0.9rem; background: var(--ink); }
  & .fa-solid { position: absolute; left: 0.5rem; top: 50%; translate: 0 -50%; font-size: 0.9rem; }
}

@media (min-width: 1100px) {
  .wheel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .wheel-dial, .wheel-caption { grid-column: 1; grid-row: 1; }
  .wheel-caption {
    z-index: 1; place-self: center; width: 32%; text-align: center;
    font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.15;
  }
  .wheel-list { grid-column: 2; grid-row: 1; }
}

@media (max-width: 1099.98px) {
  .wheel-dial { width: 100%; max-width: 38rem; justify-self: center; }
  .wheel-month { font-size: 40px; letter-spacing: 0; }
  .wheel-word { display: none; }
  .wheel-label {
    &.at-crabgrass { --from-right: 22.6%; --from-top: 47.4%; }
    &.at-fertilizer { --from-right: 30.8%; --from-top: 66%; }
    &.at-seeding { --from-left: 21.6%; --from-top: 53.3%; }
    &.at-grub { --from-left: 32.1%; --from-top: 68.3%; }
    &.at-winterizer { --from-left: 23.8%; --from-top: 30.1%; }
  }
}

/* ---------- Costs ---------- */
#costs { padding-top: 0; }
.guide-table.cost-table.cost-strip {
  display: block; width: 100%; max-width: none;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);

  & tbody { display: grid; }
  & tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
  & tbody th { padding: 0; border: 0; font-size: var(--t-s); font-weight: 600; line-height: 1.25; text-align: left; }
  & td { padding: 0; border: 0; text-align: left; font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-loud); letter-spacing: var(--track-l); line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
  & .cost-monthlytotal { margin-top: 0.5rem; padding: 1.1rem 1.25rem; border-top: 0; background: var(--ink); color: var(--porch); }
  & .cost-monthlytotal td { font-size: var(--t-xl); letter-spacing: var(--track-xl); }
}

@media (min-width: 768px) {
  .guide-table.cost-table.cost-strip {
    & tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1.5rem; align-items: stretch; }
    & tr { flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1rem 0 0; border-top: 2px solid var(--fg); }
    & .cost-monthlytotal { margin-top: 0; padding: 1rem 1.25rem; border-top: 0; }
  }
}
@media (min-width: 1100px) {
  .guide-table.cost-table.cost-strip tbody { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr); }
}

/* ---------- FAQ ---------- */
#faq { padding-top: 0; }
.faq-head {
  --plate: url('/assets/img/trades/lawn-care/faq.svg');
  --plate-box: -1.5rem calc(var(--gutter) * -1) -0.5rem 56%;
  --plate-at: right center;
  --fade: radial-gradient(ellipse 100% 50% at 100% 50%, black 36%, transparent 100%);

  & .h-xl { max-width: 12.5em; }
}
.faq-grid {
  display: grid; row-gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);

  & > div { border-top: 1px solid var(--line); padding-top: 1.1rem; }
  & dt { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
  & dd { margin: 0.6rem 0 0; max-width: var(--measure); }
}

@media (min-width: 768px) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(1.75rem, 3vw, 2.5rem); }
}

/* ---------- Cities and ZIPs ---------- */
.run.trade-places { padding-top: 0; border-top: 0; }
.places-head {
  --plate: url('/assets/img/trades/lawn-care/places.svg');
  --plate-box: 46% 0 -0.5rem calc(var(--gutter) * -1);
  --plate-at: left center;
  --fade: radial-gradient(ellipse 100% 50% at 0 50%, black 34%, transparent 100%);
  align-self: stretch;
  min-height: 100%;
  & .text { margin-top: 1rem; }
}
.places-row .city-table td .small { margin-left: 0.4rem; font-weight: 450; }
.links-row { display: grid; row-gap: 0.75rem; }
.zips-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.zips-title { margin: 0; color: var(--fg); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; }

@media (min-width: 768px) {
  .links-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .links-row > :first-child { grid-column: span 4; }
  .links-row > :last-child { grid-column: span 8; }
}

/* ---------- The month chart: its own ground, away from any date for lawn work ---------- */
.chart-moment {
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--gutter);

  & .chart-source { margin-top: 0.5rem; margin-bottom: clamp(1.25rem, 2.6vw, 2rem); color: var(--fg-muted); font-size: var(--t-m); line-height: 1.3; }
  & .big-chart-table { margin-top: 0.25rem; }
}

/* ---------- Other trades and the closing call ---------- */
.trades-run { padding-bottom: 0; }
.closing {
  --plate: url('/assets/img/trades/lawn-care/closing.svg');
  --plate-box: -3rem 0 0 46%;
  --plate-at: right bottom;
  --fade: radial-gradient(ellipse 100% 100% at 100% 100%, black 36%, transparent 100%);
  overflow: clip;
  padding-block: clamp(3rem, 6vw, 5.5rem);

  & .big-note { margin-top: 0.75rem; }
}
.closing-press { margin-top: 1.1rem; }

/* ---------- 390: the hero keeps a corner of plate where no word sits; the others stand down ---------- */
@media (max-width: 767.98px) {
  .plated::before { display: none; }
  .lawn-hero { --plate-box: 0 0 auto 52%; --fade: radial-gradient(ellipse 100% 100% at 100% 0, black 28%, transparent 92%); }
  .lawn-hero::before { display: block; height: 11rem; }
  .places-head { min-height: 0; }
  .wheel-dial { margin-inline: calc(var(--gutter) * -0.25); }
}

/* ---------- 768 to 1099: a big heading needs an even split beside its text, and the cities table the wider cell ---------- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .cols > .narrow, .cols > .wide { grid-column: span 6; }
  .places-row > .narrow { grid-column: span 4; }
  .places-row > .wide { grid-column: span 8; }
}

/* ==================== The national guide: no place and no market's number (docs/plan-national-pages.md) ====================
   The rows changed at the national switch use class names the state page doesn't use, so none of these rules reach
   it, and every rule above stays: the state page still draws its wheel, houses figure, cost strip, places and month
   chart with them. Here: the hero's national figure (.has-national), the made-up sample row on the houses plate
   (.example-moment), the season step's link, the cost calculator (.calc-run), the way to the Coverage page
   (.covered-run) and the national month chart (.national-months). */

/* The hero's national figure, its label and its source, in the cell the count had. Ten figures need more room than a
   count's two columns, so the headline and the figure share the line and the intro sits under them on a rule, as the
   state page's hero does. */
.hero-national {
  & .hero-count-num { white-space: nowrap; }
  & .national-label { max-width: 36ch; font-size: var(--t-s); font-weight: 650; line-height: 1.3; }
}
.national-source {
  margin-top: 0.45rem;
  max-width: 52ch;
  color: var(--fg-muted);
  font-size: var(--t-xs);
  line-height: 1.35;

  & a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & .national-read { display: block; }
}
@media (min-width: 768px) {
  .lawn-hero .hero-lower.has-national {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;

    & .headline-cell { grid-column: span 6; }
    & .hero-count { grid-column: span 6; }
    & .hero-intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 1.25rem; border-top: 2px solid var(--fg); }
    & .hero-intro .text + .text { margin-top: 0; }
  }
}

/* The organic programs' years take the services row's last line on their own, under the statement. */
.services-organic { margin-top: clamp(2rem, 4vw, 3.5rem); }
.services-organic .organic-line { max-width: var(--measure); }

/* The sample row: the night row on the houses plate, the heading and its note on the plate's open side, then the
   file's fields as a ruled ledger, each value in the heading face over its label and the file's own column name. The
   plate is shorter here than over the houses figure, so it fades out above the ledger. */
.example-moment {
  &::before { height: clamp(10rem, 17vw, 15rem); }
  & .example-lead { max-width: 40rem; }
  & .example-note { margin-top: 0.75rem; color: var(--fg-muted); font-size: var(--t-m); line-height: 1.3; }
  & .example-ledger { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
}
.example-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase;
}
.example-fields {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter);
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
}
.example-field {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.3rem;
  padding-block: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);

  & dt { display: grid; gap: 0.1rem; }
  & dd {
    margin: 0;
    font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub);
    letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums;
  }
}
.example-label { font-size: var(--t-s); font-weight: 650; line-height: 1.3; }
.example-column { color: var(--fg-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
/* One field a line on a phone, two from 576, four once the row is wide; the last line's rule is the ledger's own. */
@media (max-width: 575.98px) {
  .example-field:last-child { border-bottom: 0; }
}
@media (min-width: 576px) and (max-width: 1099.98px) {
  .example-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example-field:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .example-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .example-field:nth-last-child(-n + 4) { border-bottom: 0; }
}

/* The season step's way to each state's dates: one ruled arrow link, as the state page links back here. */
.step-link { margin-top: 0.75rem; }
.season-link {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding-block: 0.35rem;
  border-bottom: 2px solid var(--fg);
  font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2;
  text-decoration: none;

  & .fa-solid { flex: none; font-size: 0.75em; transition: translate 0.45s var(--roll); }
  &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
}

/* The cost calculator: the reader's boxes on a ruled line under the words, then the results as the cost strip ran,
   each value over its formula and the monthly total in the ink block. With no script the boxes stay hidden and the
   formulas do the explaining. The demo's cursor is placed in this section, so the section is its frame. */
.calc-run { position: relative; }
.calc-bench {
  display: grid; gap: 1.25rem; align-items: start;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--fg);
}
.calc-field {
  & label { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; }
  & input { max-width: 16rem; font-size: var(--t-m); font-weight: 650; font-variant-numeric: tabular-nums; }
}
.calc-entry {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;

  & input { flex: 0 1 16rem; min-width: 0; }
}
.calc-money { position: relative; display: block; }
/* Past the house form rule's own padding (pages.css, .field input), so the dollar sign sits clear of the number. */
.field.calc-field .calc-money input { padding-left: 1.85rem; }
.calc-unit { position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; font-size: var(--t-m); font-weight: 650; pointer-events: none; }
.calc-help { max-width: 52ch; color: var(--fg-muted); font-size: var(--t-xs); line-height: 1.35; }
/* The example's tag beside the box: the sample row's tag, since both mark something made up. */
.calc-example {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase;
}
.calc-go-line { align-self: center; }
.calc-go { white-space: normal; text-align: left; }
.calc-prompt { align-self: center; max-width: 34ch; font-size: var(--t-m); font-weight: 650; line-height: 1.3; }

.calc-strip {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.calc-strip .calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);

  & dt { font-size: var(--t-s); font-weight: 600; line-height: 1.25; }
  & dd { margin: 0; display: grid; justify-items: end; text-align: right; }
}
.calc-value {
  font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-loud);
  letter-spacing: var(--track-l); line-height: 1; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.calc-how { margin-top: 0.35rem; max-width: 30ch; color: var(--fg-muted); font-size: var(--t-xs); line-height: 1.35; font-variant-numeric: tabular-nums; }
.calc-echo { color: var(--fg); font-weight: 650; }
/* The monthly total in ink, as the cost strip's total was. */
.calc-strip .calc-total {
  --fg: var(--porch);
  --fg-muted: var(--muted-night);
  margin-top: 0.5rem;
  padding: 1.1rem 1.25rem;
  border-top: 0;
  background: var(--ink);
  color: var(--fg);

  & .calc-value { font-size: var(--t-xl); letter-spacing: var(--track-xl); }
}

@media (min-width: 768px) {
  .calc-bench {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter);
  }
  .calc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1.5rem; align-items: stretch; }
  /* Label, then value, then its formula, from the top, so the values sit level whether or not a formula follows. */
  .calc-strip .calc-row {
    flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.25rem;
    padding: 1rem 0 0;
    border-top: 2px solid var(--fg);

    & dd { justify-items: start; text-align: left; }
  }
  .calc-strip .calc-total { margin-top: 0; padding: 1rem 1.25rem; border-top: 0; }
}
@media (min-width: 1100px) {
  .calc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
}

/* Five questions on two columns: the last one takes the whole line rather than leave half of it empty. */
@media (min-width: 768px) {
  [data-page="trade"] .faq-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The way to the Coverage page, where the cities table was: the heading and caption on the narrow side, one ruled arrow
   link at the foot of the wide side, and a corner of the block above that link, faded before it. */
.covered-run { padding-top: 0; }
.covered-row {
  --plate: url('/assets/img/trades/lawn-care/places.svg');
  --plate-box: -1.5rem calc(var(--gutter) * -1) 4.5rem 60%;
  --plate-at: right top;
  --fade: radial-gradient(ellipse 100% 100% at 100% 0, black 30%, transparent 86%);

  & .covered-caption { margin-top: 1rem; max-width: var(--measure); }
}
.covered-list { border-block: 2px solid var(--fg); }
.covered-place {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.9rem;
  font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head); letter-spacing: var(--track-l); line-height: 1.15;
  text-decoration: none;

  & .fa-solid { flex: none; font-size: 0.7em; transition: translate 0.45s var(--roll); }
  &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
}
@media (hover: hover) {
  .season-link:hover .fa-solid, .covered-place:hover .fa-solid { translate: 4px 0; }
}
html.reduced :is(.season-link, .covered-place) .fa-solid { transition: none; }
@media (max-width: 767.98px) {
  .covered-row { row-gap: 1.5rem; }
}

/* The national month chart: its source under the heading, every bar in full ink (no month is singled out; the
   survey's error covers the gaps between neighbors), and what is counted in a caption under the bars. */
.national-months {
  & .chart-credit { margin-top: 0.6rem; margin-bottom: clamp(1.25rem, 2.6vw, 2rem); }
  & .big-col-bar { background: var(--fg); }
  & .chart-caption { margin-top: 1rem; max-width: 60ch; color: var(--fg-muted); font-size: var(--t-s); line-height: 1.35; }
}

/* ==================== Trade pages by place: /for/lawn-care/<state>/ ====================
   The state page keeps the block, the grounds, the plates and the type above, and lays out its own rows here
   (trades/local/lawn-care-local.njk). Every rule is scoped to those pages, so nothing above changes on the national
   guide. Runs stay on one ground: porch for the hero and the license, lit for the marker and the soil, ink for the
   houses figure, porch again for the seasons, costs and places, ink for the month chart. */
[data-page="trade-local"] {
  /* Hero: the greeting wraps and fits its box by its longest word (the partial sets who-len-N); 0.6em is a wide
     letter's share of Montserrat's width. The headline and the count share a line, the intro sits under them. */
  & .greet-fit { container-type: inline-size; }
  & .block-greeting { font-size: min(var(--t-mega), calc(100cqi / var(--who-len, 7) / 0.6)); }
  & .lawn-hero .block-hello, & .lawn-hero .block-place { font-size: 1em; }
  & .lawn-hero .block-place { white-space: normal; text-wrap: balance; }
  & .who-len-6 { --who-len: 6; } & .who-len-7 { --who-len: 7; } & .who-len-8 { --who-len: 8; } & .who-len-9 { --who-len: 9; }
  & .who-len-10 { --who-len: 10; } & .who-len-11 { --who-len: 11; } & .who-len-12 { --who-len: 12; } & .who-len-13 { --who-len: 13; }
  & .who-len-14 { --who-len: 14; } & .who-len-15 { --who-len: 15; } & .who-len-16 { --who-len: 16; }

  /* The license: the guide's question set as a statement, the answer under it, and what it takes in an ink ledger
     beside it, the block's one ink panel on a porch run (as the national guide's share bar is). */
  & .license-head {
    --plate: url('/assets/img/trades/lawn-care/faq.svg');
    --plate-box: -1.5rem calc(var(--gutter) * -1) -0.5rem 56%;
    --plate-at: right center;
    --fade: radial-gradient(ellipse 100% 50% at 100% 50%, black 36%, transparent 100%);

    & .h-xl { max-width: 12.5em; }
  }
  & .license-grid { margin-top: clamp(1.75rem, 3.5vw, 3rem); row-gap: 2.25rem; }
  & .license-question { margin-bottom: clamp(1rem, 2vw, 1.5rem); text-wrap: balance; }
  & .license-answer p + p { margin-top: 0.85rem; }
  & .license-needs {
    --fg: var(--porch);
    --fg-muted: var(--muted-night);
    --line: rgb(255 210 63 / 0.24);
    padding: clamp(1.25rem, 2.2vw, 2rem);
    background: var(--ink);
    color: var(--fg);
  }
  & .needs-title { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
  & .needs-list {
    counter-reset: need;
    margin-top: 1rem;
    border-top: 2px solid var(--fg);

    & li {
      counter-increment: need;
      display: grid;
      grid-template-columns: clamp(2.25rem, 3.4vw, 3.25rem) minmax(0, 1fr);
      column-gap: 0.75rem;
      padding-block: 0.9rem;
      line-height: 1.32;
    }
    & li + li { border-top: 1px solid var(--line); }
    & li::before {
      content: counter(need);
      font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud);
      letter-spacing: var(--track-xl); line-height: 0.85; font-variant-numeric: lining-nums;
    }
  }

  /* Every treated lawn: the marker drawn as the row's moment, a near-white sign on its stake in the turf, with the
     duties beside it as a ruled list. */
  & .notice-head {
    --plate: url('/assets/img/trades/lawn-care/yards.svg');
    --plate-box: calc(clamp(2.5rem, 5.5vw, 5rem) * -1) calc(var(--gutter) * -1) -1.5rem 54%;
    --plate-at: right top;
    --fade: radial-gradient(ellipse 96% 100% at 100% 0, black 30%, transparent 100%);

    & .h-xl { max-width: 13em; }
  }
  & .notice-body { margin-top: clamp(1.75rem, 3.5vw, 3rem); row-gap: 2.5rem; }
  & .lawn-marker { margin: 0; display: grid; justify-items: center; align-content: start; row-gap: 1.1rem; }
  /* The sign is 4 by 5 by its minimum height, not by aspect-ratio: a ratio box hands its content's height back to the
     grid as width, which pushed the row sideways. */
  & .notice-body > * { min-width: 0; }
  & .marker-post { display: grid; justify-items: center; width: 19rem; max-width: 100%; }
  & .marker-face {
    width: 100%;
    min-height: 23.75rem;
    display: grid;
    align-content: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 3px solid var(--ink);
    background: color-mix(in srgb, var(--lit), white 70%);
    box-shadow: 0.6rem 0.6rem 0 var(--porch);
    color: var(--ink);
    font-family: var(--f-head);
    font-size: var(--t-m);
    font-weight: var(--w-loud);
    letter-spacing: 0.01em;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  & .marker-stake { display: block; width: 0.7rem; height: clamp(3.5rem, 7vw, 5.5rem); background: var(--ink); }
  & .marker-turf {
    display: block;
    width: 100%;
    height: 1rem;
    border-bottom: 3px solid var(--ink);
    background: repeating-linear-gradient(72deg, transparent 0 7px, var(--ink) 7px 9px);
    mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  }
  & .marker-size { max-width: 32ch; color: var(--fg-muted); font-size: var(--t-s); line-height: 1.35; text-align: center; }
  & .notice-duties .big-note { margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); }
  & .duty-list {
    border-top: 2px solid var(--fg);

    & li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; padding-block: 0.95rem; line-height: 1.35; }
    & li + li { border-top: 1px solid var(--line); }
    & .fa-solid { padding-top: 0.15rem; font-size: 1.2rem; }
    & span { max-width: var(--measure); }
  }
  & .notice-penalty { margin-top: 0.4rem; padding-top: 1rem; border-top: 2px solid var(--fg); font-weight: 650; line-height: 1.35; }

  /* The soil, on the same lit run: the Extension's advice beside the heading, the phosphorus law set large. */
  & .local-soil { padding-top: 0; }
  & .soil-law { margin-top: clamp(2rem, 4vw, 3.5rem); }

  /* The houses figure: the count is in the hero, so here the sentence is set large over the dots, then how a row
     says house or condo unit under a rule. */
  & .houses-local { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
  & .houses-statement {
    max-width: 24em;
    font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head);
    letter-spacing: var(--track-l); line-height: 1.12; text-wrap: balance;
  }
  & .local-houses .houses-rest { padding-bottom: 0.2rem; }
  & .field-how { margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.25rem; border-top: 2px solid var(--fg); }
  & .field-title { font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
  & .field-lines p { max-width: var(--measure); }
  & .field-lines p + p { margin-top: 0.75rem; }
  & .field-first { font-size: var(--t-m); line-height: 1.32; }

  /* The seasons: the freshness figure opens the run, then one ruled label scopes every date under it. */
  & .season-head { --plate: url('/assets/img/trades/lawn-care/postcard.svg'); }
  & .fresh-row { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  & .fresh-days {
    font-family: var(--f-head); font-size: var(--t-mega); font-weight: var(--w-loud);
    letter-spacing: var(--track-mega); line-height: 0.9; font-variant-numeric: lining-nums;
  }
  & .fresh-label { margin-top: 0.5rem; max-width: 24ch; font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
  & .fresh-line { padding-bottom: 0.3rem; }
  & .season-region {
    display: flex; align-items: baseline; gap: 0.65rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-block: 0.8rem;
    border-block: 2px solid var(--fg);
    font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2;

    & .fa-solid { flex: none; font-size: 0.9em; }
  }
  & .season-steps { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  & .season-faq { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

  /* The way back to the national guide: one ruled arrow link above the other trades. */
  & .national-link { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
  & .guide-link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 44rem;
    padding-block: 0.9rem;
    border-block: 2px solid var(--fg);
    font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head);
    letter-spacing: var(--track-l); line-height: 1.15;
    text-decoration: none;

    & .fa-solid { flex: none; font-size: 0.7em; transition: translate 0.45s var(--roll); }
    &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
    .reduced & .fa-solid { transition: none; }
  }
}
@media (hover: hover) {
  [data-page="trade-local"] .guide-link:hover .fa-solid { translate: 4px 0; }
}

/* Wide: the headline and the count on one line, the two intro paragraphs under a rule. */
@media (min-width: 1100px) {
  [data-page="trade-local"] .local-hero .hero-lower {
    & .headline-cell { grid-column: span 7; }
    & .hero-count { grid-column: 9 / -1; }
    & .hero-intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 1.25rem; border-top: 2px solid var(--fg); }
    & .hero-intro .text + .text { margin-top: 0; }
  }
}

/* Two columns and up: the license answer is shorter than the ink ledger beside it, so a corner of the block takes
   the open stretch under the answer. The answer becomes a column and the plate fills only what its words leave,
   so it sits under no word at any width. */
@media (min-width: 768px) {
  [data-page="trade-local"] .license-answer {
    position: relative;
    isolation: isolate;
    align-self: stretch;
    display: flex;
    flex-direction: column;

    &::after {
      content: '';
      position: relative;
      z-index: -1;
      flex: 1 1 auto;
      min-height: 0;
      margin: clamp(2rem, 4vw, 3rem) 0 calc(clamp(2.5rem, 5.5vw, 5rem) * -0.75) calc(var(--gutter) * -1);
      pointer-events: none;
      background: var(--ink);
      opacity: 0.5;
      mask-image: url('/assets/img/trades/lawn-care/block.svg'), radial-gradient(ellipse 80% 50% at 22% 46%, black 25%, transparent 100%);
      mask-composite: intersect;
      mask-repeat: no-repeat;
      mask-size: cover, 100% 100%;
      mask-position: left bottom, center;
    }
  }
}

/* 768 to 1099: the marker takes the narrow cell and the duties the wide one, as from 1100, so the duties don't run
   twice the sign's height down a half-width column. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  [data-page="trade-local"] .notice-body {
    & > .lawn-marker { grid-column: span 5; }
    & > .notice-duties { grid-column: span 7; }
  }
  /* The marker and seasons titles ran under their corners of plate here; each wraps a line sooner and its plate
     keeps to the far corner, so the two never meet. */
  [data-page="trade-local"] .season-head {
    --plate-box: calc(clamp(2.5rem, 5.5vw, 5rem) * -1) calc(var(--gutter) * -1) -2rem 64%;

    & .h-xl { max-width: 10.5em; }
  }
  [data-page="trade-local"] .notice-head {
    --plate-box: calc(clamp(2.5rem, 5.5vw, 5rem) * -1) calc(var(--gutter) * -1) -1.5rem 68%;

    & .h-xl { max-width: 10.5em; }
  }
}

/* Narrow: one column, so the ledger and the marker follow the words they belong to. */
@media (max-width: 767.98px) {
  [data-page="trade-local"] {
    & .lawn-marker { justify-items: start; }
    & .marker-post { width: 16rem; }
    & .marker-face { min-height: 20rem; }
    & .marker-size { text-align: start; }
    & .fresh-row { row-gap: 0.75rem; }
  }
}