/* Pricing page.
 *
 * The page now rides on inner-pages.css -- the same black band / ivory
 * numbered-row system as About, FAQ and Service Area -- so this file only
 * carries what is genuinely specific to pricing: the rate tables, the
 * over-an-acre block, the notes, and the address handoff.
 *
 * This replaces ~1,700 lines that styled a bespoke layout with four
 * hand-built mini-calculators. Those are gone: the calculator lives in one
 * place now, in the second section, exactly as it does on the homepage.
 */
/* ONE SEPARATOR SYSTEM (owner, 2026-09-05: "the spacing and the grey line
   separators are not consistent"). Read at 980px, where three pairs of rules
   were drawing 21-38px apart with dead space between them: a table's own
   closing rule and then the add-on accordion's top rule; the accordion's
   bottom rule and then the section notes' top rule; a bare table's closing
   rule and then its notes' top rule.

   THE RULE NOW: a block draws the line UNDER itself -- a table's last row, an
   accordion's bottom edge, a section's foot -- and whatever follows only
   takes space. Nothing draws a line above itself, so two lines can never
   stack, and every gap between blocks is the same measure. */
.pricing-page {
  --pr-block-gap: 34px;
  --pricing-pine: #060807;
  --pricing-ivory: #F2EFE6;
  --pricing-rust: #A84B29;
  /* Section eyebrows are sage; rust means clickable (owner, 2026-09-07).
     Same decision as home.css, applied here because the confusion is not
     homepage-only: an eyebrow and a text link were the same rust, the same
     size and the same tracking on every page. Her words on the two rejected
     alternatives: the underline was "old school ugly", and dropping rust
     from eyebrows was out because "I wanna leave the eyebrow color rust I
     like it" -- green was her own idea and keeps rust to one meaning. */
  --pricing-eyebrow: #93a886;
  --pricing-rule: rgba(6, 8, 7, 0.22);
}

/* The contact band on About is a second hero; here it introduces the
   calculator. Same treatment, so the two pages read as one system. */
.pricing-page .inner-content--contact {
  padding-bottom: clamp(58px, 4.8vw, 74px);
  padding-top: 0;
}

/* ---- Rate tables ------------------------------------------------------- */

/* Wide tables scroll inside their own box rather than pushing the page
   sideways -- four money columns do not fit a phone. */
.pr-table-wrap {
  margin-top: 26px;
  overflow-x: auto;
}

.pricing-page table {
  border-collapse: collapse;
  min-width: 460px;
  width: 100%;
}

.pricing-page th,
.pricing-page td {
  border-bottom: 1px solid var(--pricing-rule);
  font-family: var(--home-regular);
  font-size: 0.98rem;
  padding: 11px 16px 11px 0;
  text-align: left;
  vertical-align: top;
}

.pricing-page thead th {
  color: var(--pricing-pine);
  font-family: var(--home-bold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pricing-page tbody th {
  font-weight: 400;
  white-space: nowrap;
}

/* Except the over-the-ceiling row. Every other row label is a size and fits;
   "Over 2½ acres, steep, or awkward" is 250px against a 236px first column at
   980px wide, and nowrap ran it straight into the link beside it (owner's
   phone, 2026-09-05: "awkwardTHE CALCULATOR PRICES IT"). Written with the
   page class because `.pricing-page tbody th` is (0,2,1) and would otherwise
   win -- the third specificity trap of the day. */
.pricing-page .pr-table__more th {
  white-space: normal;
}

.pricing-page td {
  font-family: var(--home-bold);
  font-weight: 700;
  white-space: nowrap;
}

/* The Landscaping table's last column explains what moves the price, so it is
   prose: it wraps, and it does not shout in bold like a number. No min-width
   -- giving it one pushed the table past its container at 1100px wide and
   clipped the explanations, which are the whole point of that column. */
.pr-table--prose td:last-child {
  font-family: var(--home-regular);
  font-weight: 400;
  white-space: normal;
}

/* ---- The landscaping dropdowns (owner-chosen, 2026-08-30) --------------
   Native <details>: no JS, every price stays in the page for search and
   ctrl-F. Summary rows styled like the picker's category rows on the
   calculator -- the collapsible pattern the owner already approved there. */
/* No border-top: the section heading's own underline is the line above this
   stack, and the doubled rule read as "an extra underline" (owner,
   2026-08-31). */
.pr-acc {
  margin-top: 26px;
}

.pr-acc details {
  border-bottom: 1px solid var(--pricing-rule);
}

/* OWNER 2026-09-01: "shrink .pr-acc summary." At 1.05rem in the condensed
   face it was set larger than the table it opens (0.9rem) and read as a
   section heading competing with the <h2> above it -- an add-on dropdown
   wearing a headline's weight. 0.92rem keeps it clearly a heading over the
   rows, without claiming the rank of the section title. */
.pr-acc summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  font-family: var(--home-narrow);
  font-size: 0.92rem;
  font-weight: 700;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 14px 4px;
  text-transform: uppercase;
}

.pr-acc summary::-webkit-details-marker {
  display: none;
}

.pr-acc summary::after {
  color: var(--pricing-rust);
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
}

.pr-acc details[open] summary::after {
  content: "\2013";
}

.pr-acc summary:hover {
  color: var(--pricing-rust);
}

.pr-acc .pr-table-wrap {
  margin: 0 0 20px;
}

/* OWNER 2026-09-04: "what's the double line under 1,400-2,000? ... get rid
   of it or make it consistent." Two rules were drawing 20px apart at the
   foot of an open dropdown -- the table's own last-row line, then the
   accordion's divider. The accordion divider is the one that means
   something (it separates the sections), so the table's closing line goes
   when the table is the LAST thing in the dropdown. Where facts follow the
   table, the line stays: there it is separating the rows from the prose,
   which is a job. */
.pr-acc details > .pr-table-wrap:last-child tbody tr:last-child th,
.pr-acc details > .pr-table-wrap:last-child tbody tr:last-child td {
  border-bottom: 0;
}

/* Facts under a table (owner audit, 2026-09-02: "audit all text under
   charts to make sure it's consistent"). This replaced .pr-drop-note, the
   grey unlabeled paragraph that sat under some tables while others got
   labeled facts at the section's end. One cell now -- .pr-fact, the same
   one "Good to know" uses -- in the same two-column grid, wherever a note
   is about the table above it. Inside a dropdown it follows the table
   directly; under a bare table it takes a hairline first. */
/* ONE COLUMN since 2026-09-05 (owner): "note blocks are trapped in a narrow
   column ... the explanation under each table wraps in half the page width
   while the table above runs full width." Same change as .pl-facts, same
   reason -- these stopped being short labelled facts when they became answers
   to a question on 2026-09-04. */
.pr-facts {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 28px;
}

.pr-wide > .pr-facts {
  margin: var(--pr-block-gap) 0 0;
}

/* A single add-on dropdown under a mowing table (grass clippings). Keeps a
   hairline above it to separate it from the table it follows. */
.pr-acc--addon {
  margin-top: var(--pr-block-gap);
}

/* ---- Notes ------------------------------------------------------------- */

/* .pr-note moved to inner-pages.css 2026-08-29, with .pr-finder. */

/* ---- The address handoff ----------------------------------------------- */

/* .pr-finder moved to inner-pages.css 2026-08-29: the closing hand-off is
   the site standard now (pricing, FAQ), so the component lives in the shared
   sheet every inner page loads. */

/* ---- Full-width tables -------------------------------------------------- */

/* The heading and lede keep the site's two-column row; the table breaks out
   underneath both columns. The left column is empty from the heading down, so
   a four-column money table was living in half the page with ~460px of
   nothing next to it -- the same dead space that made the Service Area town
   list look wrong. Prices are what this page is for.

   The gap is closed above the breakout so the table reads as belonging to the
   heading rather than floating between sections. */
.pr-row {
  row-gap: 0;
}

/* ONE COLUMN, AND THE ROW GAP HAS TO COME BACK (owner, 2026-09-05, on her
   phone: "the line above find your mowable on the mobile site is off").
   row-gap: 0 is for the DESKTOP row, where the heading sits in the left
   column and the table breaks out under both -- closing that gap is what
   keeps the table attached to its heading. Stacked, the same zero puts the
   heading's underline flush on the first line of the lede: measured at 390,
   the rule and the lede's top edge were both at y=482. The About page, which
   keeps the standard gap, reads correctly at the same width. */
@media (max-width: 840px) {
  .pr-row {
    row-gap: 24px;
  }
}

.pr-wide {
  grid-column: 1 / -1;
  margin-top: 4px;
  min-width: 0;
}

/* Row rhythm is set by the section padding, not by a gap the breakout would
   inherit -- without this the lede and the table drift 100px apart. */
.pr-row .inner-row__body {
  margin-bottom: 0;
}

@media (max-width: 840px) {
  .pr-wide {
    margin-top: 10px;
  }
}

/* Auto table layout sized each column to its header text, so the money
   columns came out ragged across the four tables -- "Kept up" got 143px next
   to "Moderately overgrown" at 385px, which reads as a mistake. Fixed layout
   with one width set gives the label its room and shares the rest evenly, so
   every price column is the same width on every table. */
.pricing-page table {
  table-layout: fixed;
}

.pricing-page thead th:first-child {
  width: 28%;
}

/* ONE chart with two header rows, replacing two stacked tables (owner,
   2026-09-04: "I see my size and then I look across and I see all my prices
   for my size within that product", and no smaller type to pay for it). The
   group row carries the same rust eyebrow spec as the .pr-pair__label it
   replaces, so what used to sit above each table now sits above each pair of
   columns and reads as the same thing. Fixed layout takes its widths from
   the first row, so only that row's first cell is sized. */
.pr-table--grouped thead tr:first-child th:not(:first-child) {
  color: var(--pricing-rust);
}

.pr-table--grouped thead tr + tr th:first-child {
  width: auto;
}

/* Landscaping trades price-column width for the explanation column. */
.pr-table--prose thead th:first-child {
  width: 24%;
}

/* The jobs table: a long descriptive label and one price. The label gets the
   room and is allowed to wrap -- with the stock 28% and nowrap, "500 sq ft,
   we bring the mulch" ran straight through its own price. */
.pr-table--jobs thead th:first-child {
  width: 62%;
}

.pr-table--jobs tbody th {
  white-space: normal;
}

/* The table's own last row is the over-the-table answer -- a link straight
   to the address box, not a price. (Owner: "it tells them to use the calc
   but there is no link right here or way to do that?") */
.pr-table__more td {
  font-family: var(--home-regular);
  font-weight: 400;
  white-space: normal;
}

/* The eyebrow spec, owner's pick from the rust-type inventory (2026-08-30):
   the calc-row is a small standard label now, not a rust sentence. */
.pr-table__more-label {
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* "Its own trip" / "Added to a mow visit" above each half of a paired
   table (owner 2026-08-31: every price listed, both ways). Same eyebrow
   spec as every small rust label. */
.pr-pair__label {
  color: var(--pricing-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 26px 0 0;
  text-transform: uppercase;
}

.pr-acc details .pr-pair__label:first-child {
  margin-top: 4px;
}

/* OWNER item 3 (2026-08-30): no underline needed -- the rust and the arrow
   already say "this goes somewhere", and inside a table the underline read
   as clutter. Same treatment for links inside Good-to-know facts (item 6). */
.pr-table__more a,
.pr-fact__text a {
  color: var(--pricing-rust);
  text-decoration: none;
}

.pr-table__more a:hover,
.pr-fact__text a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pr-table--prose thead th:nth-child(2) {
  width: 18%;
}

/* ---- Phones: stop being a table ---------------------------------------- */

/* Checked at 390x844 and the desktop table was genuinely broken, not just
   tight:
   - 460px of table in a 342px box meant the FOURTH column sat off-screen on
     all three mowing tables. It scrolled, but with no visual cue, so a phone
     customer saw three of four rate columns and had no idea "After Feb 28"
     -- the rate most people actually pay -- existed at all.
   - the Landscaping table collapsed into overlapping text: fixed layout with
     a 24%/18% split of 460px left the explanation column no room, so it ran
     straight through the price beside it.

   So below 700px each row becomes a block: the lawn size as its heading, then
   one line per rate carrying its own column label. Nothing is hidden, nothing
   scrolls sideways, and no price depends on the reader discovering a swipe.

   700px, not 840: an iPad in portrait (768) still has 684px of room and reads
   perfectly well as a real table. */
@media (max-width: 700px) {
  .pricing-page table {
    min-width: 0;
    table-layout: auto;
  }

  /* The header row is what the per-cell labels replace. */
  .pricing-page thead {
    display: none;
  }

  .pricing-page table,
  .pricing-page tbody,
  .pricing-page tr,
  .pricing-page tbody th,
  .pricing-page td {
    display: block;
    width: auto;
  }

  .pricing-page tbody tr {
    border-bottom: 1px solid var(--pricing-rule);
    padding: 14px 0 12px;
  }

  .pricing-page tbody tr:first-child {
    border-top: 1px solid var(--pricing-rule);
  }

  /* Same double line, in the stacked layout. */
  .pr-acc details > .pr-table-wrap:last-child tbody tr:last-child {
    border-bottom: 0;
  }

  /* The row's own heading -- the lawn size, or the service name. */
  .pricing-page tbody th {
    border: 0;
    font-family: var(--home-bold);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0 0 8px;
    white-space: normal;
  }

  .pricing-page td {
    align-items: baseline;
    border: 0;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 4px 0;
    white-space: normal;
  }

  .pricing-page td::before {
    color: #5f625d;
    content: attr(data-label);
    font-family: var(--home-bold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* An explanation is a sentence, not a value, so it goes under its label
     rather than trying to sit beside it. */
  .pr-table--prose td:last-child {
    display: block;
  }

  .pr-table--prose td:last-child::before {
    display: block;
    margin-bottom: 4px;
  }

  .pr-table-wrap {
    overflow-x: visible;
  }
}

/* ---- Under the table ---------------------------------------------------- */

/* OWNER: "underneath in orange should be a small header that has the reminder
   or things to know about each one." The over-an-acre block that used to live
   here is gone -- those brackets are rows of the table now, where she asked
   for them four times -- so what is left under each table is genuinely just
   the reminders, and they get a label saying so.

   Two columns, because the table is full width and one column of prose beside
   500px of nothing is what made this look sloppy. Two columns fill the width
   and each keeps a readable measure; letting a line run 1,175px would not. */
.pr-under {
  margin-top: var(--pr-block-gap);
}

/* A GRID, not CSS columns. `columns: 2` flows the content, so the split
   landed wherever the text happened to run out -- one long note on the left,
   two short ones on the right with a hole between them. It read as leftover
   prose rather than a designed block, which is what the owner kept calling
   sloppy. A grid puts each reminder in its own cell, aligned to the same
   baseline row, and each carries its own rust label so it can be scanned
   instead of read. */
.pr-under__notes {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px) clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Pine, not rust. With both this and "Good to know" in rust they read as the
   same level of heading stacked on each other, which is worse than no label
   at all. The section marker is the orange one, per the owner; these are the
   quieter tier below it. */
.pr-fact__label {
  color: var(--pricing-pine);
  font-family: var(--home-bold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.pr-fact__text {
  color: var(--pricing-pine);
  font-family: var(--home-regular);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

/* The definitions page reuses the pricing page's fact cells. They sit in the
   answer column with the line that says where the words appear (2026-09-05),
   so the spacing is the gap under that line, not a breakout's. */
.definitions-page .inner-row__body > .pr-facts {
  margin: 18px 0 0;
}

@media (max-width: 840px) {
  .pr-under__notes {
    grid-template-columns: 1fr;
  }

  .pr-under {
    margin-top: var(--pr-block-gap);
  }
}

/* The calc-row on phones: no money value, so no label chip. */
@media (max-width: 700px) {
  .pr-table__more td::before {
    display: none;
  }

  .pr-table__more td {
    display: block;
  }
}