/* ============================================================
   Global Sheds — "what moves a shed price up or down?" options.
   Three layouts for the same five factors. Tokens only, nothing new.

   The block runs 454px today with the five cells at 237px each, a
   heading alone on the left half and a third centred CTA under it.
   ============================================================ */

.fx-name{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.3}
.fx-body{font-size:.9375rem;line-height:1.55;color:var(--steel)}
.fx-ico{display:block;flex:0 0 auto;color:var(--icon)}         /* 5.66:1 on white */
.fx-ico svg{width:100%;height:100%;stroke-width:.75}

/* ---------- A. the heading holds the left, the factors list down the right ---------- */
.fx-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;
  align-items:start}
.fx-hold .h-sec{margin-bottom:18px}
.fx-hold .btn-row{margin-top:32px}
.fx-list{border-top:1px solid rgba(14,29,56,.13)}
.fx-list>div{display:grid;grid-template-columns:72px minmax(0,.85fr) minmax(0,1.15fr);
  gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(14,29,56,.13)}
.fx-list .fx-ico{width:72px;height:72px}
@media (max-width:991px){
  .fx-split{grid-template-columns:1fr;gap:40px}
  .fx-list>div{grid-template-columns:62px minmax(0,1fr);gap:8px 20px;padding:26px 0;
    align-items:start}
  .fx-list .fx-ico{width:56px;height:56px;grid-row:1/3;align-self:center}
  .fx-list .fx-body{grid-column:2}
}

/* ---------- B. three across, with room to breathe ---------- */
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 44px}
.fx-grid .fx-ico{width:72px;height:72px;margin-bottom:20px}
.fx-grid .fx-name{margin-bottom:10px;font-size:1.25rem}
.fx-grid .fx-body{max-width:42ch}
@media (max-width:991px){.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (max-width:600px){.fx-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- C. ranked, with the one the copy singles out marked ---------- */
.fx-ranked{border-top:1px solid var(--ink)}
.fx-ranked>div{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr);
  gap:30px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(14,29,56,.13)}
.fx-n{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  color:rgba(14,29,56,.55);font-variant-numeric:tabular-nums;min-width:1.4ch}  /* 3.84:1 */
.fx-ranked .fx-name{font-size:1.25rem}
.fx-tag{display:inline-block;margin-left:12px;padding:4px 11px;border-radius:100px;
  background:var(--red);color:#fff;font-family:var(--body);font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;vertical-align:.18em;white-space:nowrap}
.fx-close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 40px;margin-top:40px}
.fx-close p{font-size:1.0625rem;color:var(--steel);max-width:52ch}
@media (max-width:991px){
  .fx-ranked>div{grid-template-columns:auto minmax(0,1fr);gap:6px 22px;padding:20px 0}
  .fx-ranked .fx-body{grid-column:2}
  .fx-tag{margin-left:0;margin-top:8px}
}

/* ---------- comparison chrome only, none of this ships ---------- */
.fx-band{padding:60px 5% 0;max-width:calc(1760px + 10%);margin-inline:auto}
.fx-rule{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;
  border-bottom:1px solid var(--hairline)}
.fx-tagline{font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}
.fx-title{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2}
.fx-desc{margin-top:16px;max-width:780px;font-size:.9375rem;line-height:1.6;color:var(--steel)}
.fx-desc b{color:var(--ink)}
@media (max-width:767px){
  .fx-band{padding-left:20px;padding-right:20px}
  .fx-rule{flex-wrap:wrap;gap:6px 14px}
}