/* Tallybin (clean-stockroom). Generated by factory/build.mjs from factory/configs/clean-stockroom.json: edit the config or
   factory/factory.css and rebuild. To rebrand by hand, change only this first block: --accent / --accent-strong for light,
   --accent-dk / --accent-strong-dk for dark. Keep text on the accent at 4.5:1 or more. */
:root { --accent: #1F6F4A; --accent-strong: #185A3C; --accent-dk: #4FBF8B; --accent-strong-dk: #7DD3AA; }

/* Inazda template factory: section styles layered on ../clean-base.css. Tokens only (--iz-*); no hex, no new radius,
   no new easing. The build prepends the brand's accent block and writes the result to templates/<id>/site.css.
   Edit this file, not the copies, then rebuild: node factory/build.mjs --all */

/* ---------- Hero ---------- */
.fx-hero h1 { max-width: 17ch; }
@media (max-width: 400px) { .fx-hero h1 { font-size: 32px; } }
@media (max-width: 359px) { .fx-hero h1 { font-size: 28px; } }
.fx-hero .frame img { width: 100%; }
.fx-hero .frame-shell { margin-inline: calc(var(--iz-gutter) * -0.5); }
@media (min-width: 1280px) { .fx-hero:not(.is-split) .frame-shell { margin-inline: -24px; } }
/* On phones a full desktop screen is too small to read: show a square crop at the config's focus point instead. */
@media (max-width: 639px) {
  .fx-hero-media:not(.has-phone) .frame img { aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--fx-focus, 0 0); }
  .fx-hero-media.has-phone .frame img { aspect-ratio: auto; height: auto; }
  .fx-hero.is-split .has-phone .frame img { aspect-ratio: auto; }
}
.fx-hero.is-split .hero-grid { grid-template-columns: minmax(0, 1fr); }
.fx-hero.is-split .hero-shot { margin-top: 0; }
.fx-hero.is-split .frame-shell { margin-inline: 0; }
.fx-hero.is-split .frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
/* Split: the words get half the width, and the H1 steps down to 48 px (on the Clean scale) so it stays at two lines. */
@media (min-width: 1024px) {
  .fx-hero.is-split .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .fx-hero.is-split h1 { max-width: none; font-size: 40px; }
}
@media (min-width: 1200px) { .fx-hero.is-split h1 { font-size: 48px; } }

/* ---------- Problem: heading left, numbered statements right ---------- */
@media (min-width: 1024px) {
  .fx-problem { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .fx-problem .sec-head { margin-bottom: 0; }
}
.fx-reasons { display: grid; }
.fx-reasons li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 24px 0; border-top: 1px solid var(--iz-border); }
.fx-reasons li:last-child { border-bottom: 1px solid var(--iz-border); }
.fx-reasons .index { padding-top: 5px; }
.fx-reasons p { color: var(--iz-muted-fg); margin-top: 6px; max-width: 58ch; }

/* ---------- Steps: a crop of the real screen above each step ---------- */
.fx-crop { background: var(--iz-ui-canvas); }
.fx-crop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
@media (min-width: 900px) { .steps.fx-steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; } }
.step-head p { max-width: 52ch; }

/* ---------- Features as a table ---------- */
.fx-ftable { min-width: 640px; }
.fx-ftable tbody th { width: 26%; }
.fx-ftable td:last-child { width: 18%; color: var(--iz-muted-fg); white-space: nowrap; }
.fx-ftable td { color: var(--iz-muted-fg); }

/* ---------- Tables: the scroller is the containing block, so screen-reader-only text in cells can't widen the page ---------- */
.table-scroll { position: relative; }

/* ---------- Compare ---------- */
.fx-compare { min-width: 760px; }
.fx-compare tbody th { width: 22%; }
.fx-compare td, .fx-compare thead th:not(:first-child) { width: 26%; }

/* ---------- Pricing ---------- */
@media (min-width: 1024px) {
  .plans.fx-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
}
.fx-fine { margin-top: 20px; }

/* ---------- FAQ ---------- */
@media (min-width: 1024px) {
  .fx-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .fx-faq .sec-head { margin-bottom: 0; }
}

/* ---------- Closing call: one quiet bordered band ---------- */
.fx-cta { display: grid; gap: 28px; padding: 32px 24px; border: 1px solid var(--iz-border); border-radius: var(--iz-r-lg); background: var(--iz-bg-subtle); }
.fx-cta .h2 { max-width: 20ch; }
.fx-cta .lede { margin-top: 12px; }
@media (min-width: 1024px) {
  .fx-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding: 48px; }
}