/* Arboras /plants/: what's available, in the nursery print. Loads after /v2/v2.css and reuses its tokens,
   buttons, sections, FAQ, coverage/close ending, footer and send panel. Mobile first, like v2.css. */

.num { font-variant-numeric: tabular-nums lining-nums; }
.ico { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- hero: the page's one display moment, a step below the home's ---------- */
.p-hero { padding-top: clamp(1rem, 2.5vw, 2.5rem); }
.p-hero h1 { margin-left: -.03em; font-size: clamp(2.75rem, 1.4rem + 6vw, 5rem); font-weight: 900; line-height: .92; letter-spacing: -.05em; }
.p-hero h1 .l2 { display: block; }
.p-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.hero-ask .p-btns { gap: .75rem; }
/* Where the two hero buttons can't sit side by side, they stack at one width. */
@media (max-width: 519px), (min-width: 700px) and (max-width: 999px) {
  .hero-ask { justify-items: stretch; }
  .hero-ask .p-btns { display: grid; }
}
/* The headline takes its own row until there's room for the home's side-by-side hero. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .p-hero .hero-intro { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .p-hero .hero-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
  .p-hero .hero-ask { margin-top: 0; }
}
@media (min-width: 1200px) {
  .p-hero .hero-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p-hero h1 { font-size: clamp(4rem, 5.6vw, 5rem); }
}

/* ---------- section heads: the heading on the left, its lede on the right ---------- */
.p-head { display: grid; gap: 1.25rem 4.5rem; }
.p-head .lede { margin-top: 0; }
.capsule { max-width: 60ch; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.45; }
.updated { max-width: 60ch; margin-top: .9rem; font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 960px) {
  .p-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .p-head > :last-child { padding-top: .45rem; }
}

/* ---------- the big trees: one size ladder by height, one by caliper ---------- */
.ladders { display: grid; gap: clamp(2.75rem, 6vw, 4rem) 4.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ladder-block { scroll-margin-top: 1.5rem; }
.ladder-sub { max-width: 46ch; margin-top: .6rem; color: var(--ink-2); }
.ladder { margin-top: 1.5rem; border-bottom: 1px solid var(--rule); }
.tier { display: grid; grid-template-columns: clamp(6rem, 4.6rem + 4vw, 8.5rem) minmax(0, 1fr); gap: 0 1.25rem; align-items: baseline; padding-block: 1rem 1.1rem; border-top: 1px solid var(--rule); scroll-margin-top: 1.5rem; }
.tier:first-child { border-top: 2px solid var(--pine); }
.tier dt { font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); font-weight: 900; line-height: .85; letter-spacing: -.05em; white-space: nowrap; }
.tier ul { display: grid; gap: .4rem; }
.tier li { line-height: 1.35; overflow-wrap: break-word; }  /* large text: a long cultivar breaks rather than pushing the page sideways */
.ladder-foot { max-width: 62ch; margin-top: 1.5rem; font-size: var(--t-sm); color: var(--ink-2); }
.ladder-foot + .text-link, .rows + .text-link { margin-top: .75rem; }
@media (min-width: 640px) and (max-width: 999px) {
  .tier ul { display: block; columns: 2; column-gap: 2rem; }
  .tier li { break-inside: avoid; padding-bottom: .4rem; }
}
@media (min-width: 1000px) { .ladders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- the hero's drawing: the example list to scale, from a 12′ hornbeam down to liriope ----------
   The home hero's plant cutouts stand at their real heights on one grade line, over a 12-foot ruler, beside
   a 6-foot person and a 5-foot pool fence. Root balls and pots sit below grade at their real widths, so
   heights read straight off the ruler. The drawing comes from design-language/v3_scale.py; scale.js grows
   it once, brings one label forward, and pins the ruler while the row pans. It runs full bleed on paper,
   so labels and the ruler mask in paper. */
.ts { position: relative; margin-top: clamp(2.25rem, 5vw, 3.5rem); container-type: inline-size; }
.ts-scroll, .ts-float {
  /* the drawing's height; its width follows from the aspect ratio. Labels scale with it. */
  --row-h: clamp(440px, (100cqw - 2 * var(--gutter)) / var(--ar), 640px);
  --ts-fs: min(16px, var(--row-h) * .0283);
}
@media (max-width: 899px) { .ts-scroll, .ts-float { --row-h: 520px; } }  /* tall enough for 14.7px labels on a phone */
.ts-scroll {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: calc(var(--row-h) * .13) 0;
  scrollbar-width: none; -webkit-tap-highlight-color: transparent;
}
.ts-scroll::-webkit-scrollbar { display: none; }
.ts-scroll:focus-visible { outline: 3px solid var(--forest); outline-offset: -3px; }
.ts-track { position: relative; width: max-content; min-width: 100%; overflow: hidden; overflow: clip; }
.ts-stage { position: relative; height: var(--row-h); aspect-ratio: var(--ar); margin-inline: auto; scroll-snap-align: start; }
.ts-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Linework: the ruler, grade and height lines, the fence and person; the plants are the hero's cutouts. */
.ts-art .hl { fill: none; stroke: var(--pine); stroke-opacity: .2; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ts-art .earth { fill: url(#ts-earth); }
#ts-earth path { fill: none; stroke: var(--pine); stroke-opacity: .34; stroke-width: 1.1; }
.ts-art .grade { fill: none; stroke: var(--pine); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ts-art .tick { fill: none; stroke: var(--pine); stroke-width: 1.4; }
.ts-art text, .ts-float text { font: 600 15px var(--font); fill: var(--pine); text-anchor: end; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ts-art .kf { fill: var(--pine); }
.ts-art .picket { fill: none; stroke: var(--pine); stroke-width: 1.6; }
.ts-art .ts-ld path { fill: none; stroke: var(--pine); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ts-art .ts-ld circle { fill: var(--pine); }
.ts-art .ts-ms { fill: none; stroke: var(--pine); stroke-width: 1.5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s var(--ease); }

/* Labels: the plan callout, a name over the leader's shoulder. */
.ts-hit { position: absolute; z-index: 1; min-width: 48px; min-height: 48px; scroll-snap-align: start; }
.ts-tag {
  position: absolute; z-index: 2; display: grid; padding: .1em .45em .22em .3em;
  border-bottom: 1px solid var(--pine); background: var(--paper);
  font-size: var(--ts-fs); line-height: 1.15; white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.ts-tag.is-left { justify-items: end; padding: .1em .3em .22em .45em; }  /* the leader meets its right end */
.ts-n { font-weight: 600; letter-spacing: -.012em; }
.ts-s { font-size: .92em; font-variant-numeric: tabular-nums; }
.ts-b { font-family: var(--font-bot); font-style: italic; font-size: .92em; color: var(--ink-2); }
.ts-ref { position: absolute; translate: -50% 0; font-size: calc(var(--ts-fs) * .88); line-height: 1.2; white-space: nowrap; color: var(--ink-2); }

/* One plant at a time: the rest step back, its label comes forward on sage, and its top reads across to
   the ruler. The step back dims each plant's wrapper, so it never fights the entrance animations inside. */
.ts-pl, .ts-plant { transition: opacity .25s var(--ease); }
.ts.has-on .ts-pl:not(.is-on) { opacity: .38; }
.ts.has-on .ts-plant:not(.is-on) { opacity: .5; }
.ts-plant.is-on .ts-tag { z-index: 3; background: var(--sage-2); }
.ts-art .ts-ms.is-on { opacity: .75; }
.ts-art .is-on .ts-ld path { stroke-width: 1.6; }

/* The ruler follows a pan so every plant stays measurable. */
.ts-float { position: absolute; z-index: 4; left: 0; top: 0; height: var(--row-h); width: auto; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.ts-float-bg { fill: var(--paper); }
.ts-float .tick { fill: none; stroke: var(--pine); stroke-width: 1.4; }
.ts-float .grade { fill: none; stroke: var(--pine); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ts-float .edge { fill: none; stroke: var(--pine); stroke-opacity: .25; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ts.is-panned .ts-float { opacity: 1; }

.ts-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--max)); margin: .9rem auto 0; font-size: var(--t-sm); color: var(--ink-2); }
.ts-cue { display: none; align-items: center; gap: .6rem; min-height: 48px; font-weight: 600; color: var(--pine); transition: opacity .4s var(--ease); }
.ts-cue .arr { width: 1.75rem; height: .75rem; }
.ts.is-pannable .ts-cue { display: inline-flex; }
.ts.has-panned .ts-cue { opacity: 0; }
.ts.is-pannable .ts-scroll { cursor: grab; }
.ts.is-dragging .ts-scroll { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* Growth: each plant rises once from grade, in order; reduced motion shows the finished row. */
.ts-up { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* Keyframes rather than transitions: each runs once from its first frame and then hands back to the
     resting styles, so the hover dimming still applies afterwards. */
  .ts.js-grow .ts-pl:not(.is-up) .ts-up { transform: scale(.05); opacity: 0; }
  .ts.js-grow .ts-pl:not(.is-up) .ts-ld, .ts.js-grow .ts-plant:not(.is-up) .ts-tag { opacity: 0; }
  .ts.js-grow .is-up .ts-up { animation: ts-grow 1.3s var(--ease-expo) calc(var(--d) * 150ms) backwards; }
  .ts.js-grow .is-up .ts-ld, .ts.js-grow .is-up .ts-tag { animation: ts-show .5s var(--ease) calc(var(--d) * 150ms + .6s) backwards; }
  .ts-cue .arr { animation: ts-nudge 1.6s var(--ease) 1s 2 both; }
}
@keyframes ts-grow { from { transform: scale(.05); opacity: 0; } 20% { opacity: 1; } }
@keyframes ts-show { from { opacity: 0; } }
@keyframes ts-nudge { 0%, 100% { transform: none; } 45% { transform: translateX(6px); } }

/* ---------- the rest of the plan: one ruled row per category ---------- */
.rows { margin-top: clamp(2rem, 4vw, 3rem); }
.rows > div { display: grid; gap: .4rem 4.5rem; padding-block: 1.15rem 1.25rem; border-top: 1px solid var(--rule); scroll-margin-top: 1.5rem; }
.rows > div:first-child { border-top: 2px solid var(--pine); }
.rows dt { font-size: 1.25rem; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
.rows dd { max-width: 66ch; }
@media (min-width: 960px) { .rows > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* A jump from the plant check lands on a pale sage row. */
.tier:target, .rows > div:target { background: var(--sage-2); outline: .6rem solid var(--sage-2); }

/* ---------- the plant list, with the check built in ---------- */
.find { margin-top: clamp(1.75rem, 4vw, 2.25rem); scroll-margin-top: 1.5rem; }
.find-label { display: block; font-weight: 600; }
.find-field { display: flex; align-items: center; gap: .75rem; max-width: 40rem; min-height: 56px; margin-top: .55rem; padding: 0 1rem; border: 2px solid var(--pine); border-radius: 2px; background: var(--paper); }
.find-field:focus-within { outline: 3px solid var(--forest); outline-offset: 3px; }
.find-field input { flex: 1; min-width: 0; min-height: 52px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--t-body); outline: none; }
.find-field input::placeholder { color: var(--ink-2); opacity: 1; }
/* The clear control: a pine X with a thumb-sized target, instead of the browser's small blue one. */
.find-field input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; cursor: pointer;
  background: var(--pine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23123226' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23123226' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
}
.find-status { margin-top: .9rem; font-size: var(--t-sm); color: var(--ink-2); }
.find-status:empty { display: none; }
.find-also { max-width: 40rem; margin-top: .5rem; border-bottom: 1px solid var(--rule); }
.find-also:empty { display: none; }
.find-also a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 48px; padding-block: .45rem; border-top: 1px solid var(--rule); text-decoration: none; }
.find-also b { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.find-also span { font-size: var(--t-sm); color: var(--ink-2); }
.find mark, .ix mark { padding: 0 .05em; background: var(--sage-2); color: inherit; }
.find-none { max-width: 40rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--pine); }
.find-none[hidden] { display: none; }
.find-none .text-link { margin-top: .25rem; }

.ix { margin-top: clamp(1.75rem, 4vw, 2.5rem); max-height: min(36rem, 66vh); overflow-y: auto; border-top: 2px solid var(--pine); border-bottom: 1px solid var(--rule); }  /* past A or Z, the page keeps scrolling */
.ix[hidden] { display: none; }
.ix:focus-visible { outline-offset: 4px; }
.ix-l { content-visibility: auto; contain-intrinsic-size: auto 30rem; }
.ix-l[hidden] { display: none; }
.ix-h { position: sticky; top: 0; z-index: 1; padding: .9rem 0 .4rem; background: var(--paper); font-size: 1.375rem; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.ix li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; padding-block: .55rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 3rem; }
.ix li[hidden] { display: none; }
.ix li:target { background: var(--sage-2); }
.ix-s { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.ix-foot { max-width: 62ch; margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-2); }
.ix-foot a, .faq details p a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (min-width: 760px) {
  .ix-l { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1rem; }
  .ix-h { align-self: start; padding-top: .7rem; }
  .ix ul { columns: 2; column-gap: 2.5rem; }
  .ix li { break-inside: avoid; }
}
@media (min-width: 1100px) { .ix ul { columns: 3; } }
/* On a phone the list reads in the page instead of a box that catches the thumb: the first names, then all
   of them on request (the page script sets these classes; without it, the box stays). */
.ix-all { margin-top: 1.25rem; }
.ix-all[hidden] { display: none; }
@media (max-width: 759px) {
  .ix.is-capped, .ix.is-open { max-height: none; overflow: visible; }
  .ix.is-capped:not(.is-searching) .ix-l + .ix-l, .ix.is-capped:not(.is-searching) li:nth-child(n+9) { display: none; }
}

/* ---------- the app as a sales tool, beside a flat print of the client view ---------- */
.show-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.show-list { margin-top: clamp(1.5rem, 3vw, 2rem); }
.sec .show-list h3 { font-size: 1.25rem; }
.show .p-btns { margin-top: 1.75rem; }
@media (min-width: 960px) { .show-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.sc-stage { display: flex; justify-content: center; }
.sc-phone { width: min(300px, 100%); padding: 10px; border-radius: 42px; background: var(--pine); }
.sc-screen { overflow: hidden; border-radius: 32px; background: var(--paper); color: var(--pine); font-size: 13.5px; line-height: 1.35; }
.sc-bar { background: var(--forest); color: var(--on-pine); }
.sc-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px; font-size: 13px; font-weight: 600; }
.sc-title { padding: 6px 18px 14px; }
.sc-title b { display: block; font-size: 17px; font-weight: 650; }
.sc-title span { font-size: 13px; color: var(--on-pine-2); }
.sc-hide { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--paper-2); font-weight: 600; }
.sc-switch { position: relative; flex: none; width: 42px; height: 25px; border-radius: 13px; background: var(--forest); }
.sc-switch::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); }
.sc-photo { aspect-ratio: 4 / 3; background: var(--sage-2); }
.sc-photo img { width: 100%; height: 100%; padding-top: 10px; object-fit: contain; object-position: 50% 100%; }
.sc-pd { padding: 12px 14px 4px; }
.sc-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.sc-bot { font-family: var(--font-bot); font-style: italic; color: var(--ink-2); }
.sc-desc { margin-top: 6px; color: var(--ink-2); }
.sc-sizes { display: grid; gap: 6px; padding: 8px 12px 18px; }
.sc-size { display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid var(--rule); border-radius: 2px; font-variant-numeric: tabular-nums; }
.sc-size.pick { border: 2px solid var(--pine); background: var(--paper-2); }
.sc-size b { font-weight: 650; }

/* ---------- questions: each one a heading inside its summary ---------- */
.faq summary h3 { font: inherit; letter-spacing: inherit; }

/* ---------- the ending: where it grows and where it goes, then the ask ---------- */
.route-map { display: block; width: 100%; max-width: 26rem; height: auto; margin-top: 1.75rem; }
.route-map .rm-line { fill: none; stroke: var(--pine); stroke-width: 2; stroke-dasharray: 8 7; stroke-linecap: round; }
.route-map .rm-dot { fill: var(--pine); }
.route-map .rm-dot-2 { fill: var(--sage-2); stroke: var(--pine); stroke-width: 2.5; }
.route-map text { fill: var(--pine); font: 600 15px var(--font); }
.route-map .rm-mi { fill: var(--ink-2); font-size: 13px; font-weight: 400; }
.coverage h3 { margin-top: 2.25rem; font-size: 1.25rem; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
.counties { margin-top: .9rem; border-bottom: 1px solid var(--rule); }
.counties li { padding-block: .7rem; border-top: 1px solid var(--rule); }
.counties b { display: block; font-weight: 600; }
.counties span { display: block; font-size: var(--t-sm); color: var(--ink-2); }
/* The coverage half carries more than the home's, so it takes the wider share, its counties pair up,
   and the ask stays in view while the reader passes it. */
@media (min-width: 860px) {
  .finish { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .coverage p { max-width: 54ch; }
  .close .contact-in { position: sticky; top: 0; }
}
@media (min-width: 1100px) {
  .counties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; border-bottom: 0; }
  .counties li { border-bottom: 1px solid var(--rule); border-top: 0; }
  .counties li:nth-child(-n+2) { border-top: 1px solid var(--rule); }
}

/* ---------- motion: the headline rises in once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .p-hero h1 > span { display: inline-block; animation: rise .8s var(--ease) both; }
  .p-hero h1 .l2 { display: block; animation-delay: .08s; }
}