/* Fire-retardant-treated line page (held until release). Loaded by that page only, through its meta "styles".
   Reads tokens.css and reuses the product page components in system.css and site.css; this file adds the captioned
   hero, the icon rows (shared icon set: thin bronze outlines, never filled), the FR specs table that stacks on
   phones, the TO CONFIRM tag, the guide specification blocks and the fine print. No new colours. */

/* Icons: inline SVG, stroke set on the element (bronze, 1.6 on a 48 grid). Sized here. */
.ic { display: block; flex: none; width: 44px; height: 44px; }

/* Hero: the photograph carries its caption. Phones: caption under the photo. Desktop: on the photo, bottom left. */
.frt-hero .p-hero__media { overflow: hidden; }
.frt-hero__cap { margin: 0; padding: var(--s-3) var(--margin) 0; font-size: .8125rem; line-height: 1.45; color: var(--c-grey); }
@media (max-width: 899px) {
  .frt-hero .p-hero__media { aspect-ratio: auto; overflow: visible; }
  .frt-hero .p-hero__media .pic { position: relative; inset: auto; aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .frt-hero__cap { position: absolute; z-index: 2; left: var(--s-5); bottom: var(--s-5); max-width: min(34rem, calc(100% - 3rem)); padding: .75em 1em; background: rgba(10, 10, 10, .78); color: var(--c-on-dark); }
}

/* TO CONFIRM tag: the program's proof tag (tracked caps, bronze outline). Internal proofs only. */
.tag-confirm { display: inline-block; margin-left: .35em; padding: 1px 6px; border: 1px solid var(--c-bronze); border-radius: var(--radius); font: 600 .6875rem/1.35 var(--f-sans); letter-spacing: .1em; color: var(--c-bronze); white-space: nowrap; vertical-align: .08em; }

/* Overview: heading, two sentences and the no-hourly-rating line, then four icon facts. */
.frt-intro { display: grid; gap: var(--s-5) var(--gutter); }
@media (max-width: 899px) { .frt-overview { padding-top: calc(var(--section) + var(--s-6)); } }
.frt-intro .h2 { margin-top: var(--s-4); max-width: 12em; }
.frt-intro__body { max-width: 36rem; align-self: end; }
.frt-intro__body p { color: var(--c-grey); }
.frt-intro__body .frt-key { margin-top: var(--s-4); color: var(--c-ink); padding-left: var(--s-4); border-left: 2px solid var(--c-ink); }
@media (min-width: 900px) { .frt-intro { grid-template-columns: 1fr 1fr; } }
.frt-facts { display: grid; margin-top: var(--s-8); border-top: 1px solid var(--c-line); }
.frt-fact { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }
.frt-fact__big { display: block; font: 600 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.2 var(--f-sans); letter-spacing: -.005em; }
.frt-fact__small { display: block; margin-top: 2px; font-size: .875rem; color: var(--c-grey); }
@media (min-width: 700px) { .frt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
@media (min-width: 1100px) {
  .frt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--c-line); }
  .frt-fact { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-6); border-bottom: 0; }
  .frt-fact + .frt-fact { padding-left: var(--gutter); border-left: 1px solid var(--c-line); }
  .frt-fact .ic { width: 52px; height: 52px; }
}

/* How it is tested: three icon steps, one line each. */
.frt-steps { display: grid; margin-top: var(--s-7); border-top: 1px solid var(--c-line); counter-reset: none; }
.frt-step { display: grid; grid-template-columns: auto 2.25rem 1fr; align-items: center; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }
.frt-step__n { font: 600 .8125rem/1 var(--f-sans); letter-spacing: .08em; color: var(--c-bronze); }
.frt-step p { max-width: 34rem; }
@media (min-width: 900px) {
  .frt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-bottom: 1px solid var(--c-line); }
  .frt-step { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; align-content: start; row-gap: var(--s-4); padding-block: var(--s-6); border-bottom: 0; }
  .frt-step p { grid-column: 1 / -1; }
  .frt-step + .frt-step { padding-left: var(--gutter); border-left: 1px solid var(--c-line); }
  .frt-step .ic { width: 52px; height: 52px; }
}

/* FR specs: two blocks with a pin on each title; full table from 700 px, stacked rows on phones. */
.frt-block-h { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-8); }
.frt-block-h .ic, .frt-scope .ic { width: 24px; height: 24px; }
.frt-block-h + .table-wrap { margin-top: var(--s-4); }
.frt-code { min-width: 0; table-layout: fixed; }
.frt-code .c-item { width: 21%; }
.frt-code .c-entry { width: 51%; }
.frt-code .c-src { width: 28%; }
.frt-code td.src { font-size: .875rem; }
.frt-scope { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-5); }
.frt-scope .note { margin-top: 0; max-width: 52rem; }
@media (max-width: 699px) {
  .frt-code, .frt-code tbody, .frt-code tr, .frt-code th, .frt-code td { display: block; width: 100%; }
  .frt-code colgroup, .frt-code thead { display: none; }
  .frt-code tr { padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
  .frt-code tr:first-child { border-top: 1px solid var(--c-line-strong); }
  .frt-code th, .frt-code td { padding: 0; border: 0; }
  .frt-code td { margin-top: var(--s-3); }
  .frt-code td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 .6875rem/1.4 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-grey); }
}

/* Where it goes: one line per species. */
.frt-where { display: grid; gap: var(--s-6) var(--gutter); }
.frt-where .h2 { margin-top: var(--s-4); }
.frt-uses { border-top: 1px solid var(--c-line); }
.frt-uses > div { display: grid; gap: var(--s-2) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }
.frt-uses dt { font-weight: 600; }
.frt-uses__more { display: block; margin-top: var(--s-3); font-size: .9375rem; color: var(--c-grey); }
@media (min-width: 900px) {
  .frt-where { grid-template-columns: 5fr 7fr; align-items: start; }
  .frt-uses > div { grid-template-columns: 15rem 1fr; }
}

/* Working with it: six icon rows, one line each. */
.frt-rules { display: grid; margin-top: var(--s-7); border-top: 1px solid var(--c-line-dark); }
.frt-rules li { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--c-line-dark); }
.frt-rules p { max-width: 26rem; }
@media (min-width: 700px) { .frt-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
@media (min-width: 1100px) { .frt-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Species cards: two across from 700 px */
@media (min-width: 700px) { .frt-species { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frt-cap { margin-top: var(--s-3); font-size: .8125rem; line-height: 1.45; color: var(--c-grey); max-width: 60ch; }
.frt-species .sp-body .link-arrow { margin-top: var(--s-5); }
.frt-species .sp-meta div { grid-template-columns: 7rem 1fr; }

/* Guide specification: one clause per line, the product line given once per species. */
.frt-spec-lead { margin-top: var(--s-5); color: var(--c-grey); max-width: 40rem; }
.frt-clauses { margin-top: var(--s-6); border-top: 1px solid var(--c-ink); font-size: .9375rem; }
.frt-clauses li { display: grid; gap: var(--s-1) var(--s-5); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.frt-clause__k { font: 600 .6875rem/1.9 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-bronze); }
.frt-clauses li > span:last-child { max-width: 52rem; }
@media (min-width: 700px) { .frt-clauses li { grid-template-columns: 11rem 1fr; } }

/* Fine print: one block */
.frt-foot { padding-block: var(--s-8); }
.frt-foot p { font-size: .8125rem; line-height: 1.6; color: var(--c-grey); max-width: 60rem; }

/* Treatment mark (Ben, October 7): black on bone, under a small "Treated with" label, smaller than the ThermoCraft
   wordmark (176 px desktop, 152 px phone) and clear of it. Clear space on every side is at least the height of the
   mark's first capital (111 / 714 of its width): 26 px at 168 wide, 22 px at 140. */
.frt-treated { margin-top: var(--s-6); }
.frt-treated__label { margin-bottom: var(--s-2); }
.frt-mark { --mark-w: 140px; width: var(--mark-w); margin-top: calc(var(--mark-w) * .155); }  /* partner mark rule: clear space at least the capital S, .686 of the mark's height = .155 of its width */
@media (min-width: 900px) { .frt-mark { --mark-w: 168px; } }
.frt-mark--sm, .frt-foot .frt-mark { --mark-w: 140px; }
.frt-foot__grid { display: grid; gap: var(--s-6); }
.frt-foot .frt-treated__label { font-size: var(--t-eyebrow); color: var(--c-bronze); }
@media (min-width: 900px) {
  .frt-foot__grid { grid-template-columns: minmax(0, 60rem) auto; justify-content: space-between; align-items: start; column-gap: var(--s-8); }
  .frt-foot__mark { order: 2; }
}