/* tend.net.au: Homes and Land only (the story heroes and the chapter accordion). Linked from their "styles". */

/* Moved from site.css (2026-11-07): rules only this page uses, so other pages don't carry them. */
.feature-n { position: relative; font-size: var(--step-small); color: var(--muted); margin: 0 0 10px; }
@media (min-width: 1100px) {
  .feature-n::before { content: ''; position: absolute; left: -20px; top: 0.6em; width: 14px; border-top: 1px solid var(--stone-400); }
}
.hero-figure { margin-top: clamp(28px, 4vw, var(--space-12)); }
.hero-story { display: grid; gap: clamp(28px, 5vw, var(--space-10)); align-items: center; }
.hero-story > div:first-child { container-type: inline-size; }
.hero-story .hero-figure { margin-top: 0; min-width: 0; }
@media (min-width: 960px) {
  .hero-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); }
}
.steps-js > .step + .step { margin-top: 2px; }
.steps-js .step h2 { margin: 0; font: 600 1.125rem/1.35 var(--font-body); letter-spacing: 0; }

/* The step rail (design 07, after Stripe's numbered steps): Homes' close, from a home to a signed report. Numbered
   circles joined by a leaf line; the last is filled, because a signed report is done (rule 6). */
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: rail; }
.rail li { position: relative; padding-left: var(--space-12); counter-increment: rail; }
.rail li::before { content: counter(rail); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--leaf-500); border-radius: 50%; background: var(--paper); color: var(--leaf-700); font-weight: 600; font-size: var(--step-small); font-variant-numeric: lining-nums; }
.rail li:last-child::before { background: var(--leaf-700); border-color: var(--leaf-700); color: #fff; }
.rail li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 30px; bottom: calc(-1 * var(--space-5) - 3px); border-left: 1.5px solid var(--leaf-300); }
.rail strong { display: block; color: var(--ink); font-weight: 600; }

/* Phones (owner, 2026-11-07): an open step fits one screen under the section bar, and opens at its top
   (steps.js). The panel takes the full width, and each card drops what it repeats (.ui-lean, as in the home
   row; the portfolio's count tiles, its small print, which the chapter's note says, and what's beyond ten years): the calendar's weeks
   are shorter, the report's pages fan smaller, and the stage is tighter. */
@media (max-width: 959.98px) {
  .steps-js .step-panel { padding: 0 var(--space-4) var(--space-4); }
  .steps-js .ui-lean { display: none; }
  .steps-js .ui-cal > div:not(.dow) { min-height: 36px; }
  .steps-js .ui-report { gap: var(--space-2); }
  .steps-js .ui-pages { height: 100px; }
  .steps-js .ui-page { width: 70px; height: 92px; }
  .steps-js .stage { padding-block: var(--space-4) 0; }
  .steps-js .stage .ui { border-bottom: 0; border-radius: 14px 14px 0 0; }
  /* The next step's row sits right under the open card, so "Next" would say it twice. */
  .steps-js .step-next { display: none; }
  /* A real screen is unreadable at phone width, so the captions (just "See the real screen") go. */
  .steps-js .figure-ui figcaption { display: none; }
  .steps-js .chips li { padding: var(--space-1) var(--space-2); }
  .steps-js .gap { padding: var(--space-2) var(--space-3); font-size: var(--step-small); }
  .steps-js .step-panel > p { margin-block: 0 var(--space-3); }
  .steps-js .step-panel > .figure-ui { margin-top: var(--space-4); }
  .steps-js .feature .chips, .steps-js .feature .ticks { margin-block: var(--space-3); }
  .steps-js .ticks { gap: var(--space-1); font-size: var(--step-small); }
  .steps-js .ui-bars { height: 104px; padding-top: var(--space-2); }
  .steps-js .ui-bars .b.tall { height: 52px; }
}