/* Price list page. Reference document, not a conversion page: flat ivory,
   pine tables, no CTAs until the single line at the bottom. Generated
   markup — see scripts/buildPriceList.mjs in the calculator project. */

.price-list-page {
  --pl-pine: #060807;
  --pl-ivory: #F2EFE6;
  --pl-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. */
  --pl-eyebrow: #93a886;
  --pl-rule: rgba(6, 8, 7, 0.24);
}

.pl-content {
  background: var(--pl-ivory);
  color: var(--pl-pine);
}

.pl-wrap {
  margin: 0 auto;
  /* OWNER 2026-09-05: "the price list's white border looks too wide." It was
     1080px inside a page the pricing page fills to 1101px of content, so the
     reference sheet -- the one with the most to show -- had the narrower
     measure and the wider cream margin of the two. Matched to the pricing
     page. */
  max-width: 1240px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 72px) clamp(56px, 7vw, 96px);
}

/* The sheet's opening block: the same furniture every section below it has
   (owner, 2026-09-05). The rule closes it, so the first section still needs
   no rule of its own. */
.pl-intro {
  border-bottom: 1px solid var(--pl-rule);
  display: block;
  padding-bottom: clamp(24px, 3vw, 36px);
}

.pl-intro__label {
  color: var(--pl-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* IVORY ON IVORY UNTIL 2026-09-05. This paragraph was written inside the
   black hero band, where 85% ivory is the right colour, and then deliberately
   moved out onto the page ("it is an explanation, not a headline") -- without
   its colour. It has been rgba(242,239,230,0.85) on a #F2EFE6 background ever
   since: a 102px block of invisible text carrying the tax sentence and the
   only link to /definitions/, which is what the owner was seeing as dead
   space at the top of the sheet ("the top spacing is off on the price list").
   Pine, like every other reading paragraph on this page. */
.pl-hero-copy {
  color: var(--pl-pine);
  font-family: var(--home-regular);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
  /* The sheet's own measure, the one every section lede uses since this
     morning -- at 620px it was visibly narrower than everything under it. */
  max-width: none;
}

.pl-section {
  border-top: 1px solid var(--pl-rule);
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(20px, 2.5vw, 32px);
}

/* No rule above the first section -- the hero is the line -- but it still
   needs air under the sheet's opening paragraph, which was invisible until
   2026-09-05 and so appeared to need none. */
.pl-section:first-of-type {
  border-top: 0;
  padding-top: clamp(28px, 3vw, 40px);
}

.pl-section__heading {
  align-items: baseline;
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}

/* The eyebrow spec, like every other numbered section on the site (owner
   rust-type inventory, 2026-08-30). */
.pl-section__heading .pricing-number {
  color: var(--pl-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.pl-section__heading h2 {
  color: var(--pl-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  text-transform: uppercase;
}

.pl-lede {
  color: var(--pl-pine);
  font-family: var(--home-regular);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  margin: 0 0 20px;
  /* The lede runs the width of the table it introduces (owner, 2026-09-05).
     At 720px "blow off hard surfaces." broke after "hard" and left one word
     on a line of its own under a table three times as wide. */
  max-width: none;
}

/* OWNER 2026-09-05: "'How the brackets work' on one line and rust." Every
   other link on this sheet is rust -- .pl-fact__text says
   so -- and the lede was the one place that rule never reached, so the
   sheet's only cross-reference above a table read as plain text. This is
   also check L5. */
.pl-lede a {
  color: var(--pl-rust);
  text-decoration: none;
  white-space: nowrap;
}

.pl-lede a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-table-wrap {
  overflow-x: auto;
}

/* The cheat sheet is TWO tables (beds, lawns). Butted together they read as
   one table with a stray header in the middle, and their columns landed at
   different widths (owner, 2026-08-31: "the formatting is messy"). A real
   gap between them, and a shared first-column width so the comparisons line
   up down the whole sheet. */
#how-big .pl-table-wrap + .pl-table-wrap {
  margin-top: 40px;
}

#how-big th[scope="col"]:first-child {
  width: 32%;
}

/* ONE COLUMN GRID FOR THE WHOLE SHEET (owner, 2026-09-05: "first columns
   start at different places on both pages. Each table auto-sizes its own. One
   shared column grid per page"). Sixteen different first-column widths were
   measured across this page at 1280px -- 108px under Grass Clippings, 625px
   under Seasonal Care -- because auto layout sizes each table to its own
   longest row label. Fixed layout with one width set makes every price column
   start at the same x down the sheet, which is also what the pricing page has
   done since 2026-08-30. #how-big keeps its own 32%: the cheat sheet's row
   labels are sentences, not sizes. */
.pl-section table {
  border-collapse: collapse;
  min-width: 460px;
  table-layout: fixed;
  width: 100%;
}

.pl-section thead th:first-child {
  width: 28%;
}

/* A crossed chart carries five columns, and on a phone the sheet's tables
   scroll rather than stack (they always have). 460px would leave each price
   83px wide inside that scroll, so this one asks for the room it needs and
   the reader swipes a little further. */
.pl-table--grouped {
  min-width: 640px;
}

/* The group row is the eyebrow that used to sit above a second table: same
   rust, so it reads as the label it replaced. */
.pl-table--grouped thead tr:first-child th:not(:first-child) {
  color: var(--pl-rust);
}

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

/* Row labels wrap rather than run through the price beside them, now that
   the column is a fixed share instead of whatever the longest label needed. */
.pl-section tbody th {
  white-space: normal;
}

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

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

.pl-section tbody th {
  font-weight: 400;
}

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

/* The over-the-ceiling row: a link to the address box, not a price (owner,
   2026-09-05 -- the same row the pricing page's mowing tables carry, so a
   reader who scrolls past 2½ acres gets one answer rather than silence). */
.pl-table__more td {
  font-family: var(--home-regular);
  font-weight: 400;
  white-space: normal;
}

/* a.pl-table__more-label, for the third time today: an .inner-page a rule at
   (0,1,1) beats a bare class, so the rust never landed and the row's link
   rendered as body text. */
a.pl-table__more-label {
  color: var(--pl-rust);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

a.pl-table__more-label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Facts under a table (owner audit, 2026-09-02: text under every table set
   the same way on both sheets). The pricing page's .pr-fact cell, on this
   sheet's palette: a small pine label in the column's own words, then the
   sentence. (.pl-note went with the last unlabelled paragraph on the sheet,
   2026-09-05.)
   ONE COLUMN since 2026-09-05, and this is thirteen of the owner's
   observations at once: "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." The two-column grid was set when these were
   five short labelled facts; they became answers to a question ("Which is my
   lawn?", "Where does the pile end up?") on 2026-09-04, and a paragraph in
   half a column wraps six times under a table that runs the full width. */
.pl-facts {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin: 22px 0 0;
}

.pl-fact__label {
  color: var(--pl-pine);
  font-family: var(--home-bold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

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

/* Rust says "link"; the underline waits for hover (owner, 2026-08-30). */
.pl-hero-copy a,
.pl-fact__text a {
  color: var(--pl-rust);
  text-decoration: none;
}

.pl-hero-copy a:hover,
.pl-fact__text a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-exact {
  border-top: 2px solid var(--pl-pine);
  color: var(--pl-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 700;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-top: 22px;
  text-transform: uppercase;
}

.pl-exact a {
  color: var(--pl-rust);
  text-decoration: none;
}

.pl-exact a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The .pl-exact rule above carries the uppercase display type; the question
   is now a child of it rather than the element itself, so it inherits that
   and only needs its own margin. */
.pl-exact__line {
  margin: 0;
}

/* The hand-off says what it will do before it asks for anything. .pl-exact
   sets uppercase display type for the question; body copy and links have to
   opt back out of it. */
.pl-exact__copy,
.pl-exact__links {
  font-family: var(--home-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  max-width: 62ch;
  text-transform: none;
}

.pl-exact__copy {
  margin: 14px 0 0;
}

.pl-exact__links {
  margin: 16px 0 0;
}

.pl-exact__links a {
  color: var(--pl-rust);
  text-decoration: none;
}

.pl-exact__links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Deliberately the same object as the pricing page's .pr-finder and the
   homepage hero box: one calculator handoff on the site, recognisable
   wherever it appears. Rebuilt against the --pl-* palette rather than
   imported, because this page does not load pricing.css. */
.pl-finder {
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--pl-pine) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
  max-width: 620px;
}

.pl-finder__input {
  background: transparent;
  border: 0;
  color: var(--pl-pine);
  flex: 1 1 240px;
  font-family: var(--home-sans);
  font-size: 1.02rem;
  /* The parent sets uppercase display type for the question above; a typed
     address must not inherit it. */
  font-weight: 400;
  letter-spacing: normal;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 14px 18px;
  text-transform: none;
}

.pl-finder__input::placeholder {
  color: #6b6e68;
}

/* The edge darkens; it does not thicken. Same treatment as the hero field. */
.pl-finder:focus-within {
  border-color: var(--pl-pine);
}

.pl-finder__submit {
  background: var(--pl-rust);
  border: 0;
  color: var(--pl-ivory);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 60px;
  padding: 14px 26px;
  text-transform: uppercase;
}

.pl-finder__submit:hover {
  background: #8f3f22;
}

.pl-finder__submit:focus-visible {
  outline: 3px solid var(--pl-pine);
  outline-offset: 2px;
}

/* On paper the form is useless, so the address goes in words instead. */
.pl-exact__print {
  display: none;
}

@media (max-width: 840px) {
  .pl-finder {
    max-width: none;
  }

  .pl-finder__input,
  .pl-finder__submit {
    flex: 1 1 100%;
  }
}

/* ---- Print: a real share of this audience wants it on paper. Drop the
   chrome, keep the tables. ---- */
@media print {
  .home-header,
  .mobile-menu,
  .home-footer,
  .skip-link,
  .menu-toggle {
    display: none !important;
  }

  body.price-list-page,
  .pl-content {
    background: #fff !important;
    color: #000 !important;
  }

  .inner-hero.price-list-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 0 0 12pt !important;
  }

  .inner-hero.price-list-hero h1,
  .pl-hero-copy,
  .inner-eyebrow {
    color: #000 !important;
  }

  .pl-wrap {
    max-width: none;
    padding: 0;
  }

  .pl-section {
    break-inside: avoid-page;
    padding: 14pt 0 8pt;
  }

  .pl-section th,
  .pl-section td {
    font-size: 10pt;
    padding: 4pt 8pt 4pt 0;
  }



  /* A text field prints as an empty box that means nothing. Hide it and
     print the address to type instead. */
  .pr-finder,
  .inner-hero--contact {
    display: none;
  }

  .pl-exact__print {
    display: block;
    font-size: 10pt;
    margin: 8px 0 0;
    text-transform: none;
  }
}

/* Seasonal Care is the one section without a table -- each visit is priced
   from the real property. Its scope is laid out as two blocks so it reads
   with the same structure as the tables around it. */

.pl-visits {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pl-visit {
  border-top: 2px solid var(--pl-pine);
  padding-top: 14px;
}

/* OWNER 2026-09-05: "space above Fall Cleanup", and "Spring/Fall spacing
   uneven". In Seasonal Care these head the two ladders, and the second one
   sat directly on the last rule of the table above it while the first had the
   lede's margin over it -- so the same heading had two different amounts of
   air. One rhythm; the first in a section still takes the lede's spacing. */
/* h3.pl-visit__name, not .pl-visit__name: `.inner-page h3 { margin: 0 }` in
   inner-pages.css is (0,1,1) and a bare class is (0,1,0), so the margins
   written here never applied at all -- the same specificity trap that left
   .home-story__link cream for a week. Same weight, later file, so this wins
   without an !important. */
h3.pl-visit__name {
  color: var(--pl-pine);
  font-family: var(--home-narrow);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 34px 0 12px;
  text-transform: uppercase;
}

.pl-visit h3.pl-visit__name,
.pl-lede + h3.pl-visit__name {
  margin-top: 0;
}

/* And the includes blocks get the same air, so their two black rules are not
   stacked on the grey one that closes the table above them. */
.pl-table-wrap + .pl-visits {
  margin-top: 40px;
}

h3.pl-visit__name span {
  color: var(--pl-rust);
  display: block;
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-top: 5px;
  text-transform: uppercase;
}

/* One Includes block per visit, compact: two columns, no rule per item
   (owner, 2026-09-03, item 25: "one item per ruled row reads like a mid-90s
   utility page"). */
/* "INCLUDES" sat directly under the rust subtitle with nothing between them,
   so the heading read as three stacked labels. */
.pl-visit__label {
  color: var(--pl-pine);
  font-family: var(--home-bold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 14px 0 8px;
  text-transform: uppercase;
}

/* ONE COLUMN (owner, 2026-09-05: "the layout is just not working"). Two CSS
   columns inside a half-width block meant four narrow columns of scope items
   across the row, each about 200px, which broke "Complete leaf removal,
   including beds" over two lines and left every list ragged at the bottom.
   The block is already the two visits side by side; the list inside it does
   not need to be a grid as well. */
.pl-visit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-visit__list li {
  break-inside: avoid;
  color: var(--pl-pine);
  font-family: var(--home-regular);
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 3px 0;
}

/* A label over a table, naming the payment method or the material the table
   is about, so the table's own columns can stay the rate states or the
   supply choice (owner, 2026-09-03, item 30). */
/* OWNER 2026-09-05, circling the join between two charts on her phone: the
   label sat 22px under the previous chart's last row and 8px above the next
   one's first, so a label like "Burlap wrapping, added to a Fall Cleanup
   visit" read as a footnote to the chart above rather than the heading of the
   chart below. It belongs to what follows it, so the space above it is now
   the larger of the two. */
.pl-table__label {
  color: var(--pl-eyebrow);
  font-family: var(--home-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 38px 0 12px;
  text-transform: uppercase;
}

/* The first label in a section follows the lede, which already carries its
   own space. */
.pl-lede + .pl-table__label {
  margin-top: 6px;
}

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