/* ==========================================================================
   Feature pages · Figma gjYZkxeha34OwmNUr91aQn, page "claude scratch", built
   from the page kit (page/chrome, page/hero, page/card, page/step, page/phone,
   page/callout, page/faq-item, page/meta-block). Pages: /plant-identifier/
   (1156:2349) and /watering/ (1156:2374, whose § 010 scenes and § 020 scroll
   story are driven by scripts/feature-page.js).

   Everything the kit shares with the live homepage comes from there rather
   than being redrawn: main.css (tokens, tab + folder, drawer, footer,
   .cta-btn, .article-card), sec-identify.css (the 1440 .hp-wrap, .hp-head,
   the .hp-row of tabbed step cards with a phone peeking above each, .hp-link)
   and sec-native.css (.hp-keypoint, which is callout/key point). This file
   adds only the layout the homepage doesn't have.

   The illustrations (the camera phone, the § 020 windows and the § 030
   collage) are drawn at the design's pixel sizes inside a "stage": the stage
   is a size container, and --u is one design pixel of it, so each one scales
   as a single piece when the column narrows.
   ========================================================================== */

/* ── Page frame ───────────────────────────────────────────────────────────
   page/chrome puts the logo 48 below the drawer; the content column then
   starts 96 below it and stacks every block 96 apart, 128 clear of the
   footer. */
.fp-logo { padding-top: var(--s7); }
.fp-logo img { width: 165px; height: auto; }
.fp-main {
  display: flex; flex-direction: column; gap: var(--fp-gap, var(--s9));
  padding-block: var(--s9) 128px;
}
/* /plant-identifier/ (1156:2349) moved to 128 between blocks on 2026-09-24;
   the other kit pages still draw 96. Desktop only: the narrow breakpoints
   below set their own gap. */
.fp-main--gap-128 { --fp-gap: 128px; }

/* Kit section heads sit 48 above their content (the homepage's are 64). */
.fp .hp-head { margin-bottom: var(--s7); }
.fp .hp-head.fp-head--tight { margin-bottom: var(--s4); }
.fp .hp-head.fp-head--flush { margin-bottom: 0; }
/* page/card bodies space the title 16 above the copy, at Serif 16. */
.fp .hp-card .folder { gap: var(--s4); }
.fp .hp-card .card__body { font-size: 16px; }
/* The § 010 step bodies are a fixed 203 in 1163:3136, so the three read level
   whatever their copy; min-height lets a narrow column still grow. */
.fp .hp-row .hp-card .folder { min-height: 203px; }
/* /watering/'s scene cards (1409:11992) hug their copy; the row levels them. */
.fp .hp-row[data-fp-scenes] .hp-card .folder { min-height: 0; }

/* page/button: the kit's 12/24 padding, local Button style (800, 16/21). */
.cta-btn.fp-btn { padding: var(--s3) var(--s5); line-height: 21px; letter-spacing: 0; }
/* style=brown, for the mustard callout band: no rule, eggshell label. */
.cta-btn.fp-btn--brown { background: var(--brown-band); border: 0; color: var(--paper); }
.cta-btn.fp-btn--brown:hover { background: var(--ink); color: var(--mustard); }

/* ── Hero (page/hero 1163:3102) ───────────────────────────────────────────
   952 of copy, 24, then the 464 aside card. */
.fp-hero { display: flex; align-items: flex-start; gap: var(--s5); }
.fp-hero__text {
  flex: 0 1 952px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5);
}
.fp-eyebrow {
  font-family: var(--f-serif); font-weight: 500; font-size: 12px; line-height: normal;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hp-muted);
}
/* Local style H1: Source Serif 4 SemiBold 88 / 110.3%. */
.fp-hero__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.75rem, 4.4vw + 1rem, 5.5rem); line-height: 1.103; color: var(--ink);
}
/* Local style subhead: Cabinet Grotesk Medium 28 / 140%, 760 measure. */
.fp-hero__standfirst {
  max-width: 760px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.75rem); line-height: 1.4; color: var(--hp-muted);
}
/* page/cta-inline, row: one status line over the button and a link. */
.fp-cta { display: flex; flex-direction: column; gap: var(--s3); max-width: 880px; }
.fp-cta__line { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted); }
.fp-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }

/* page/card's tab-clip keeps 12 of shadow room above the tab. */
.fp-hero__aside { flex: 0 0 464px; padding-top: var(--s3); }
/* page/card-row, layout=value: tracked label left, value right, hairline above. */
.fp-facts { display: flex; flex-direction: column; gap: var(--s3); width: 100%; margin: 0; }
.fp-facts__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--hairline);
}
.fp-facts__row dt {
  font-family: var(--f-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.fp-facts__row dd {
  margin: 0; text-align: right;
  font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--ink);
}

/* ── page/phone, built from its own layers (010.1) ────────────────────────
   The homepage's phone exports are 851 x 1078 at 2x: the 412 x 524 device at
   (2, 0) with the baked shadow stripped, so .hp-phone draws the shadow. This
   one keeps that frame so it lines up with its two exported neighbours, and
   lays the device out from 1163:3143: body and screen vectors, the screen,
   then the glass (multiply) and highlights (screen) rasters, all clipped by
   the device mask. The rasters are cropped to what the mask shows. */
.fp-cam {
  aspect-ratio: 851 / 1078; container-type: inline-size;
  --u: calc(100cqw / 425.5);
  filter: drop-shadow(10px 12px 18px rgba(41, 18, 8, 0.22));
}
.fp-device {
  position: absolute; left: 0.47%; top: 0; width: 96.827%; aspect-ratio: 412 / 524;
  overflow: hidden; isolation: isolate;
  -webkit-mask: url('/assets/Images/plant-identifier/phone-mask.svg') 0 0 / 99.8561% 99.8429% no-repeat;
  mask: url('/assets/Images/plant-identifier/phone-mask.svg') 0 0 / 99.8561% 99.8429% no-repeat;
}
.fp-device > * { position: absolute; max-width: none; }
.fp-device__body {
  left: calc(-0.27 * var(--u)); top: calc(-0.89 * var(--u));
  width: calc(412.493 * var(--u)); height: calc(842.755 * var(--u));
}
.fp-device__underlay {
  left: calc(12.26 * var(--u)); top: calc(10.42 * var(--u));
  width: calc(386.768 * var(--u)); height: calc(820.132 * var(--u));
}
.fp-device__glass {
  left: calc(-0.13 * var(--u)); top: calc(-0.36 * var(--u));
  width: calc(412.086 * var(--u)); height: calc(525 * var(--u));
  mix-blend-mode: multiply;
}
.fp-device__highlights {
  left: 0; top: 0; width: calc(412 * var(--u)); height: calc(524 * var(--u));
  mix-blend-mode: screen;
}

/* The camera screen, mode=plant (390 x 844). */
.fp-screen {
  left: calc(10.91 * var(--u)); top: calc(9.88 * var(--u));
  width: calc(390 * var(--u)); height: calc(844 * var(--u));
  overflow: hidden; background: var(--ink);
}
.fp-screen > * { position: absolute; }
.fp-screen__photo {
  left: 0; top: 0; width: calc(390 * var(--u)); height: calc(514 * var(--u)); max-width: none;
}
/* Status bar/iPhone 16/Main, dark. The phone's own face, not the site's. */
.fp-status {
  left: 0; top: 0; width: calc(390 * var(--u)); height: calc(60 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, 'SF Pro Text', 'SF Pro', system-ui, sans-serif;
}
.fp-status__side {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.fp-status__side--l { gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(42 * var(--u)); }
.fp-status__side--r { gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(28 * var(--u)); }
.fp-status__time {
  flex: none; width: calc(35 * var(--u)); height: calc(14 * var(--u));
  font-weight: 590; font-size: calc(17 * var(--u)); line-height: calc(14 * var(--u));
  letter-spacing: calc(-0.5 * var(--u)); text-align: center; color: #fff; white-space: nowrap;
}
.fp-status__icon { flex: none; display: block; max-width: none; }
.fp-status__loc { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.fp-status__island {
  flex: none; position: relative;
  width: calc(122 * var(--u)); height: calc(36 * var(--u));
  border-radius: calc(32 * var(--u)); background: #000;
}
.fp-status__lens {
  position: absolute; left: calc(98 * var(--u)); top: calc(12 * var(--u));
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); max-width: none;
}
.fp-status__signal { flex: none; position: relative; width: calc(18 * var(--u)); height: calc(14 * var(--u)); }
.fp-status__signal img {
  position: absolute; left: 0; top: calc(1 * var(--u));
  width: calc(18.5 * var(--u)); height: calc(12.5 * var(--u)); max-width: none;
}
.fp-status__wifi { width: calc(18 * var(--u)); height: calc(14 * var(--u)); }
.fp-status__battery { flex: none; position: relative; width: calc(27 * var(--u)); height: calc(14 * var(--u)); }
.fp-status__battery img { position: absolute; top: 0; left: 0; height: 100%; max-width: none; }
.fp-status__battery img:first-child { width: 100%; }
.fp-status__battery img + img { width: 36.59%; }
.fp-status__battery span {
  position: absolute; left: calc(13 * var(--u)); top: calc(7 * var(--u)); transform: translate(-50%, -50%);
  font-weight: 700; font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u));
  letter-spacing: calc(-0.5 * var(--u)); color: #000;
}

/* Focus brackets: 40 square, 5 thick, 8 round, camera/bracket #f5ebde. */
.fp-bracket {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border: 0 solid #f5ebde;
}
.fp-bracket--tl { left: calc(62 * var(--u)); top: calc(194 * var(--u)); border-width: calc(5 * var(--u)) 0 0 calc(5 * var(--u)); border-top-left-radius: calc(8 * var(--u)); }
.fp-bracket--tr { left: calc(288 * var(--u)); top: calc(194 * var(--u)); border-width: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; border-top-right-radius: calc(8 * var(--u)); }
.fp-bracket--bl { left: calc(62 * var(--u)); top: calc(368 * var(--u)); border-width: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); border-bottom-left-radius: calc(8 * var(--u)); }
.fp-bracket--br { left: calc(288 * var(--u)); top: calc(368 * var(--u)); border-width: 0 calc(5 * var(--u)) calc(5 * var(--u)) 0; border-bottom-right-radius: calc(8 * var(--u)); }

/* Top overlay: back + mode toggle, then the credits pill. */
.fp-camtop {
  left: 0; top: calc(60 * var(--u)); width: calc(390 * var(--u));
  padding: 0 calc(16 * var(--u));
  display: flex; flex-direction: column; gap: calc(16 * var(--u));
  font-family: var(--f-sans); font-weight: 500;
}
.fp-camtop__row { display: flex; align-items: center; gap: calc(20 * var(--u)); padding-top: calc(8 * var(--u)); }
.fp-camtop__back {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u));
  letter-spacing: calc(0.4 * var(--u)); color: var(--paper); white-space: nowrap;
}
.fp-camtop__back img { width: calc(10 * var(--u)); height: calc(10 * var(--u)); max-width: none; }
.fp-camtop__modes {
  display: flex; gap: calc(32 * var(--u));
  font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u));
  color: #f6bc02; white-space: nowrap;
}
.fp-camtop__modes .is-on { color: var(--paper); }
.fp-camtop__credits { display: flex; justify-content: center; }
.fp-camtop__credits span {
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border: 1px solid #c8abea; border-radius: calc(12 * var(--u)); background: #7f59a1;
  font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); color: var(--paper); white-space: nowrap;
}
.fp-camhint {
  left: calc(16 * var(--u)); top: calc(428 * var(--u)); width: calc(358 * var(--u));
  display: flex; justify-content: center;
}
.fp-camhint__box {
  display: block; width: calc(340 * var(--u)); padding: calc(10 * var(--u));
  border-radius: calc(4 * var(--u)); background: rgba(38, 41, 51, 0.85);
  font-family: var(--f-serif); font-size: calc(13 * var(--u)); line-height: normal;
  color: #fff; text-align: center;
}
.fp-camhint__hide { color: #e9a5df; text-transform: uppercase; }

/* ── § 020 · the match: three 464 columns, each a 360-tall window over a step ── */
/* The "app windows" frame (1396:10596) keeps 32 under its tallest column. */
.fp-match {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
  padding-bottom: var(--s6);
}
.fp-match__col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.fp-window {
  position: relative; width: 100%; aspect-ratio: 464 / 360;
  container-type: inline-size; --u: calc(100cqw / 464);
}
.fp-window > * { position: absolute; max-width: none; }
/* Both logos and the plus are one exported group (Frame 507, 1413:12028). */
.fp-window__logos { left: calc(37 * var(--u)); top: calc(58.47 * var(--u)); width: calc(357.575 * var(--u)); height: calc(241.392 * var(--u)); }

/* match_confidence_chip at 2.4x: buckets are High above 65%, Medium 25 to 65%, Low below 25%. */
.fp-chip {
  height: calc(50.979 * var(--u));
  display: flex; align-items: center; justify-content: center;
  padding: calc(7.227 * var(--u)) calc(19.272 * var(--u)) calc(4.818 * var(--u));
  border-radius: calc(9.636 * var(--u));
  box-shadow: 0 calc(4.818 * var(--u)) calc(14.454 * var(--u)) rgba(0, 0, 0, 0.1);
  font-family: var(--f-sans); font-weight: 700; font-size: calc(31.32 * var(--u));
  letter-spacing: calc(2.5056 * var(--u)); text-transform: uppercase; white-space: nowrap;
  color: #fff5dc;
}
.fp-chip--high { left: calc(35 * var(--u)); top: calc(65.34 * var(--u)); width: calc(316.951 * var(--u)); background: var(--green); }
.fp-chip--medium { left: calc(66.7 * var(--u)); top: calc(162.94 * var(--u)); width: calc(373.724 * var(--u)); background: var(--mustard); }
.fp-chip--low { left: calc(23.58 * var(--u)); top: calc(260.53 * var(--u)); width: calc(290.748 * var(--u)); background: #ae472c; }

/* The library window: six tiles, alternate ones at half strength, the count over them. */
/* Its own radius can't use --u: container units on the container itself
   resolve against its parent. 12 of 464 x 360 as percentages instead. */
.fp-window--library {
  overflow: hidden; border-radius: 2.586% / 3.333%;
  filter: drop-shadow(8px -3px 6.5px rgba(41, 18, 8, 0.14));
}
.fp-tile {
  width: calc(138 * var(--u)); height: calc(160 * var(--u));
  border-radius: calc(8 * var(--u)); object-fit: cover;
}
.fp-tile:nth-child(1) { left: calc(16 * var(--u)); top: calc(32 * var(--u)); }
.fp-tile:nth-child(2) { left: calc(162 * var(--u)); top: calc(32 * var(--u)); opacity: 0.5; }
.fp-tile:nth-child(3) { left: calc(308 * var(--u)); top: calc(32 * var(--u)); }
.fp-tile:nth-child(4) { left: calc(16 * var(--u)); top: calc(200 * var(--u)); opacity: 0.5; }
.fp-tile:nth-child(5) { left: calc(162 * var(--u)); top: calc(200 * var(--u)); }
.fp-tile:nth-child(6) { left: calc(308 * var(--u)); top: calc(200 * var(--u)); opacity: 0.5; }
.fp-count {
  left: calc(38.34 * var(--u)); top: calc(152.47 * var(--u));
  padding: calc(9.167 * var(--u)) calc(22.918 * var(--u));
  border-radius: calc(18.335 * var(--u)); background: #fdc4f6;
  font-family: var(--f-sans); font-weight: 700; font-size: calc(50.42 * var(--u)); line-height: 1.2;
  color: #47152b; white-space: nowrap;
}

/* page/step: the number and heading at Cabinet Extrabold 28, Serif 16 under it. */
.fp-steps { display: flex; flex-direction: column; gap: var(--s6); margin: 0; padding: 0; list-style: none; }
.fp-step { display: flex; flex-direction: column; gap: var(--s2); }
.fp-step__head {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--f-sans); font-weight: 800; font-size: 28px; line-height: normal; color: var(--ink);
}
.fp-step__body { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted); }
/* A step title that names a page links to it ("Is it native here?" is the
   checker's own name), underlined like .hp-link so it reads as a link. */
.fp-step__head a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.fp-step__head a:hover { text-decoration-thickness: 3px; }
.fp-faq__a a { text-decoration: underline; text-underline-offset: 2px; }

/* ── § 030 · after the name: steps beside a 708 x 640 specimen collage ──── */
.fp-next { display: flex; align-items: center; gap: var(--s5); }
.fp-next > .fp-steps { flex: 1 1 0; min-width: 0; }
.fp-collage {
  position: relative; flex: 0 0 708px; aspect-ratio: 708 / 640;
  container-type: inline-size; --u: calc(100cqw / 708);
}
/* Each tilted piece sits centred in its rotated bounding box, as in Figma. */
.fp-collage__slot { position: absolute; display: flex; align-items: center; justify-content: center; }
.fp-collage__slot--a { left: calc(-3.21 * var(--u)); top: calc(40 * var(--u)); width: calc(351.989 * var(--u)); height: calc(407.44 * var(--u)); }
.fp-collage__slot--b { left: calc(57.07 * var(--u)); top: calc(280 * var(--u)); width: calc(126.093 * var(--u)); height: calc(44.643 * var(--u)); }
.fp-collage__slot--c { left: calc(350 * var(--u)); top: calc(127.68 * var(--u)); width: calc(345.798 * var(--u)); height: calc(402.394 * var(--u)); }
.fp-collage__slot--d { left: calc(400 * var(--u)); top: calc(374.26 * var(--u)); width: calc(227.422 * var(--u)); height: calc(49.654 * var(--u)); }
.fp-collage__slot--a > *, .fp-collage__slot--b > * { transform: rotate(5deg); }
.fp-collage__slot--c > *, .fp-collage__slot--d > * { transform: rotate(-4deg); }

/* explore/specimen: a card-light print with its photo, name and binomial. */
.fp-specimen {
  flex: none; width: calc(320 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(12 * var(--u));
  background: var(--card-light); border: 1px solid var(--hairline); border-radius: calc(12 * var(--u));
  filter: drop-shadow(calc(8 * var(--u)) calc(-3 * var(--u)) calc(6.5 * var(--u)) rgba(41, 18, 8, 0.14));
}
.fp-specimen img {
  display: block; width: calc(296 * var(--u)); height: calc(280 * var(--u)); max-width: none;
  border-radius: calc(8 * var(--u)); object-fit: cover;
}
.fp-specimen__name {
  font-family: var(--f-sans); font-weight: 800; font-size: calc(28 * var(--u)); line-height: normal; color: var(--ink);
}
/* Local style "citation italic": Source Serif 4 Medium Italic 12. */
.fp-specimen__latin {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: calc(12 * var(--u)); line-height: normal; color: var(--hp-muted);
}
/* native_status and ConfidenceChip, drawn at 1.6x. */
.fp-tag {
  flex: none; display: flex; align-items: center; justify-content: center;
  padding: calc(4.8 * var(--u)) calc(12.8 * var(--u)) calc(3.2 * var(--u));
  border-radius: calc(6.4 * var(--u));
  font-family: var(--f-sans); font-weight: 700; font-size: calc(20.8 * var(--u));
  letter-spacing: calc(1.664 * var(--u)); text-transform: uppercase; line-height: normal; white-space: nowrap;
}
.fp-tag--invasive { background: #ffe4dc; color: #ae472c; }
.fp-tag--match { background: var(--green); color: #fff5dc; }

/* ── § 040 · accuracy: a left-set head and pull quote, then the research card ── */
.fp-accuracy { display: flex; align-items: flex-start; gap: var(--s7); }
.fp-accuracy__text { flex: 0 1 635px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fp-accuracy__head { display: flex; flex-direction: column; gap: var(--s3); }
.fp-accuracy__head .eyebrow { margin: 0; opacity: 1; color: var(--hp-muted); text-align: center; }
.fp-accuracy__head .sec-title { text-align: left; }
/* Local style "pull quote": Source Serif 4 Medium 32. */
.fp-accuracy__quote { font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); line-height: normal; color: var(--ink); }
.fp-accuracy .article-card { flex: 0 0 500px; max-width: 100%; }

/* ── /watering/ § 010 · a photo scene over each page/card (1164:3546) ────────
   Each column is a 464 x 405.69 stage: one photo and one app fragment on it.
   The card's tab starts 339.69 down it, so the stage tucks 66 (14.224% of the
   column) behind the card, the way .hp-phone tucks behind the § 010 cards. */
.fp-scene {
  display: block; position: relative; z-index: 0; width: 100%; aspect-ratio: 464 / 405.69;
  margin-bottom: -14.224%;
  container-type: inline-size; --u: calc(100cqw / 464);
  pointer-events: none; user-select: none;
}
.fp-scene > * { position: absolute; max-width: none; }
.fp-scene__photo { display: block; object-fit: cover; }
.fp-scene--rain .fp-scene__photo {
  left: calc(18 * var(--u)); top: calc(5.59 * var(--u));
  width: calc(359 * var(--u)); height: calc(400.102 * var(--u)); border-radius: calc(20 * var(--u));
}
.fp-scene--pot .fp-scene__photo {
  left: calc(47.52 * var(--u)); top: calc(5.59 * var(--u));
  width: calc(360 * var(--u)); height: calc(400 * var(--u)); border-radius: calc(20 * var(--u));
}
.fp-scene--room .fp-scene__photo {
  left: calc(12.52 * var(--u)); top: calc(5.59 * var(--u));
  width: calc(359.301 * var(--u)); height: calc(400 * var(--u)); border-radius: calc(24.355 * var(--u));
}
/* status (severity), watering variant "RAIN EXPECTED", at 2.33x. */
.fp-rainchip {
  left: calc(179.64 * var(--u)); top: calc(238.73 * var(--u)); height: calc(53.709 * var(--u));
  display: flex; align-items: center;
  padding: calc(7.005 * var(--u)) calc(18.681 * var(--u)) calc(4.67 * var(--u));
  border-radius: calc(18.681 * var(--u)); background: #4c69ac;
  box-shadow: 0 calc(9.341 * var(--u)) calc(28.022 * var(--u)) rgba(0, 0, 0, 0.12);
  font-family: var(--f-sans); font-weight: 700; font-size: calc(30.36 * var(--u)); line-height: normal;
  letter-spacing: calc(2.4288 * var(--u)); text-transform: uppercase; white-space: nowrap; color: #fff5dc;
}
/* The double ring over the pot (Ellipse 1 and 2 in 1405:11734). */
.fp-ring--inner { left: calc(228.71 * var(--u)); top: calc(252.98 * var(--u)); width: calc(82.999 * var(--u)); height: calc(82.999 * var(--u)); }
.fp-ring--outer { left: calc(210.11 * var(--u)); top: calc(234.39 * var(--u)); width: calc(120.188 * var(--u)); height: calc(120.188 * var(--u)); }
/* "section — Temperature" (1407:11796): settings_section_tab pair over a card of
   Multi-selection pills, the app's room-climate control at 0.88x. Drawn 10
   wider than Figma's 316 (and 10 further left, so its right edge holds) so the
   app's real humidity labels also fit two rows and the swap keeps its height. */
.fp-climate {
  left: calc(138 * var(--u)); top: calc(215.83 * var(--u)); width: calc(326 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start;
}
.fp-climate__tabs { display: flex; margin-bottom: calc(-0.881 * var(--u)); }
.fp-climate__tab {
  display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u));
  border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; background: #e2dbcc;
  font-family: var(--f-sans); font-weight: 700; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u));
  color: var(--hp-muted); white-space: nowrap;
}
.fp-climate__tab.is-on { background: var(--card-light); }
.fp-climate__tab img { display: block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.fp-climate__card {
  display: block; width: 100%; padding: calc(14.093 * var(--u)) calc(7.047 * var(--u));
  border-radius: 0 calc(7.047 * var(--u)) calc(7.047 * var(--u)) calc(7.047 * var(--u)); background: var(--card-light);
}
.fp-climate__pills { display: flex; flex-wrap: wrap; gap: calc(10.57 * var(--u)); }
.fp-climate__pills[hidden] { display: none; }
.fp-pill {
  padding: calc(7.047 * var(--u)) calc(10.57 * var(--u)); border: calc(0.881 * var(--u)) solid #8a8475; border-radius: calc(8 * var(--u));
  font-family: var(--f-sans); font-weight: 700; font-size: calc(14.09 * var(--u)); line-height: calc(17.616 * var(--u));
  color: #000; white-space: nowrap;
}
.fp-pill.is-on { background: var(--brown-band); border-color: var(--brown-band); color: var(--paper); }
/* Motion, armed by feature-page.js only when motion is allowed, so no-JS and
   reduced-motion readers get the finished scene. Each plays once, in view. */
@media (prefers-reduced-motion: no-preference) {
  .fp-anim .fp-rainchip,
  .fp-anim .fp-ring { opacity: 0; transform-origin: 50% 50%; }
  .fp-anim .fp-rainchip { transform: scale(0.4); }
  .fp-anim .fp-ring--inner { transform: scale(0.3); }
  .fp-anim .fp-ring--outer { transform: scale(0.69); }   /* starts at the inner ring's size */
  .fp-anim .is-in .fp-rainchip {
    opacity: 1; transform: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, opacity 0.2s ease 0.2s;
  }
  .fp-anim .is-in .fp-ring {
    opacity: 1; transform: none;
    transition: transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) 0.2s, opacity 0.25s ease 0.2s;
  }
  .fp-anim .is-in .fp-ring--outer { transition-delay: 0.35s; }
}

/* ── /watering/ § 020 · the scroll story (keyframes 1224:5588) ──────────────
   Static first (no JS, reduced motion, narrow screens): 1164:3586's row, the
   calendar phone in a 600 column beside the three steps, all open. */
.fp-story__body { display: flex; align-items: center; gap: var(--s5); }
.fp-story__phone { position: relative; flex: 0 0 41.667%; min-width: 0; }   /* 600 of 1440 */
/* The 851 x 1078 exports hold the 412 x 524 device at (2, 0); it sits 94 into the column. */
.fp-story__screen {
  display: block; width: 70.917%; height: auto; margin: 0 0 -2.5% 15.333%; max-width: none;   /* the export's 15 of shadow room under the 524 device */
  filter: drop-shadow(10px 12px 18px rgba(41, 18, 8, 0.22));
}
.fp-story__screen:not(:first-child) { display: none; }
.fp-story__steps { flex: 1 1 0; min-width: 0; gap: var(--s6); }

/* Pinned (feature-page.js, wide screens with motion allowed): a 300vh track
   holds Figma's 1440 x 900 frame in view, scaled to fit. The track is pulled
   up and the next block pulled in by the frame's empty margins (set in JS),
   so the section still reads 96 from its neighbours. */
.fp-story--pinned .fp-story__track {
  position: relative; height: 300vh;
  margin-top: calc(-1 * var(--fp-story-top, 0px)); margin-bottom: calc(-1 * var(--fp-story-bottom, 0px));
}
.fp-story--pinned .fp-story__pin { position: sticky; top: 0; height: 100vh; pointer-events: none; }
.fp-story--pinned .fp-story__stage {
  position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: 50% 50%;
}
.fp-story--pinned .hp-head { position: absolute; left: 0; top: 72px; width: 1440px; max-width: none; margin: 0; }
.fp-story--pinned .fp-story__body { display: block; }
.fp-story--pinned .fp-story__phone { position: absolute; left: 58px; top: 300px; width: 425.5px; }
.fp-story--pinned .fp-story__screen { position: relative; width: 100%; margin: 0; }
.fp-story--pinned .fp-story__screen:not(:first-child) { display: block; position: absolute; left: 0; top: 0; }
.fp-story--pinned .fp-story__screen { opacity: 0; transition: opacity 0.2s ease; }
.fp-story--pinned .fp-story__screen.is-prev { opacity: 1; z-index: 1; transition: none; }
.fp-story--pinned .fp-story__screen.is-on { opacity: 1; z-index: 2; }
.fp-story--pinned .fp-story__steps { position: absolute; left: 560px; top: 340px; width: 820px; }
/* Keyframe steps: no numbers; a rail beside each, 4px mustard on the active one. */
.fp-story--pinned .fp-step { padding-left: var(--s5); border-left: 1px solid var(--hairline); }
.fp-story--pinned .fp-step.is-active { border-left: 4px solid var(--mustard); }
.fp-story--pinned .fp-step__no { display: none; }
.fp-story--pinned .fp-step__head { color: var(--hp-muted); transition: color 0.2s ease; }
.fp-story--pinned .fp-step.is-active .fp-step__head { color: var(--ink); }
/* Closed steps keep their copy for screen readers (the .visually-hidden rules). */
.fp-story--pinned .fp-step:not(.is-active) .fp-step__body {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── /watering/ § 030 · the photo on a white mat, page/card over it (1164:3817) ── */
.fp-share { position: relative; }
.fp-mat { padding: var(--s2); background: #fff; }
.fp-mat__photo { display: block; width: 100%; height: auto; aspect-ratio: 1424 / 767.736; object-fit: cover; }
/* 930 in and vertically centred in 1413:12023 (46 clear of its right edge). */
.fp-share__card { position: absolute; right: 46px; top: 50%; width: 464px; transform: translateY(-50%); }

/* ── Callouts (callout/key point + page/callout) ──────────────────────────── */
/* The homepage places its key point 60 below a card row; here the page gap does it.
   The kit's copy column is a fixed 680 (the homepage's fills the row). */
.fp .hp-keypoint { margin-top: 0; }
/* Row layout only: sec-native.css stacks the callout below 981, where a
   680 basis would become a height. */
@media (min-width: 981px) {
  .fp .hp-keypoint__body { flex: 0 1 680px; }
}
.fp-keypoint__stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }

/* ── § 050 · questions: page/faq-item in two 708 columns ─────────────────── */
.fp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.fp-faq__item {
  display: flex; flex-direction: column; gap: var(--s2);
  padding-top: var(--s4); border-top: 1px solid var(--hairline);
}
.fp-faq__q { font-family: var(--f-sans); font-weight: 800; font-size: 20px; line-height: 1.1; color: var(--ink); }
.fp-faq__a { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted); }

/* ── Changes + sources: page/meta-block, rule=top ─────────────────────────── */
.fp-meta { display: flex; align-items: flex-start; gap: var(--s5); }
.fp-meta__block {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  padding-top: var(--s4); border-top: 2px solid var(--hairline);
}
.fp-meta__label { font-family: var(--f-sans); font-weight: 800; font-size: 28px; line-height: normal; color: var(--ink); }
.fp-meta__text { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted); }
.fp-meta__text a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .fp-hero { flex-direction: column; }
  .fp-hero__text { flex: none; width: 100%; }
  .fp-hero__aside { flex: none; width: 100%; max-width: 464px; }
  .fp-next { flex-direction: column; align-items: stretch; }
  /* Flush only works beside the collage, which centres the steps in its 640. */
  .fp .hp-head.fp-head--flush { margin-bottom: var(--s7); }
  .fp-collage { flex: none; width: 100%; max-width: 708px; margin-inline: auto; }
  .fp-accuracy { flex-direction: column; }
  .fp-accuracy__text { flex: none; width: 100%; }
}
@media (max-width: 980px) {
  .fp-main { gap: var(--s8); padding-block: var(--s8) var(--s9); }
  .fp-match { grid-template-columns: minmax(0, 1fr); gap: var(--s7); max-width: 520px; margin-inline: auto; }
  /* The story stacks: the phone above, the steps under it on a rail down the left edge. */
  .fp-story__body { flex-direction: column; align-items: stretch; gap: var(--s6); }
  .fp-story__phone { flex: none; width: 100%; max-width: 426px; margin-inline: auto; }
  .fp-story__screen { width: 100%; margin-left: 0; }
  .fp-story__steps { padding-left: var(--s5); border-left: 1px solid var(--hairline); }
  .fp-share__card { position: relative; right: auto; top: auto; width: auto; max-width: 520px; margin: var(--s6) auto 0; transform: none; }
}
@media (max-width: 720px) {
  .fp-main { gap: var(--s7); padding-block: var(--s7) var(--s8); }
  .fp .hp-head, .fp .hp-head.fp-head--flush { margin-bottom: 28px; }
  .fp-step__head { font-size: 24px; }
  .fp-faq { grid-template-columns: minmax(0, 1fr); }
  .fp-meta { flex-direction: column; }
  .fp-meta__block { width: 100%; }
  .fp-meta__label { font-size: 24px; }
}