/* ═══ BENAA FOCUS PAGES — spokes, landlord guides, property management ═══
   Page-specific only; tokens, chrome, .sec, .grid/.item, .cta, .rv come from v2.css.
   Everything is prefixed fx- because the legacy v1 style.css still loads and owns generic names.
   Frameless: gold hairlines and tint, never cards, borders or shadows. Logical properties so
   Arabic mirrors. Spec: _build/FOCUS-SEO-SPEC.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hero add-ons: jump links + updated line ── */
.p-fx .phero .lede{ max-width:46rem }
.fx-toc{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; margin-top:clamp(1.6rem,3.5vh,2.4rem);
  padding-top:1.1rem; border-top:1px solid rgba(244,182,81,.35) }
.fx-toc span{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62) }
.fx-toc a{ color:#fff; text-decoration:none; font-size:.92rem; padding:.25rem 0;
  border-bottom:1px solid transparent; transition:border-color 200ms ease, color 200ms ease }
.fx-toc a:hover,.fx-toc a:focus-visible{ color:var(--gold); border-bottom-color:var(--gold) }
[dir="rtl"] .fx-toc span{ letter-spacing:0; font-size:.82rem }
.fx-meta{ margin:1rem 0 0; font-size:.82rem; color:rgba(255,255,255,.66) }

/* ── long-form text ── */
.fx-prose{ max-width:46rem }
.fx-prose p{ font-size:clamp(1.02rem,1.2vw,1.16rem); line-height:1.72; color:var(--text-mid); margin:0 0 1.15rem }
.fx-prose h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.35rem,2vw,1.75rem); color:var(--plum);
  margin:2rem 0 .6rem }
.fx-prose a,.fx-tnote a,.fx-sources a,.fx-faq .a a,.fx-note a{ color:var(--plum); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:3px }
.fx-prose a:hover,.fx-tnote a:hover,.fx-sources a:hover,.fx-faq .a a:hover,.fx-note a:hover{ color:var(--gold-ink) }
.on-dark .fx-prose p{ color:rgba(255,255,255,.9) }
.on-dark .fx-prose h3{ color:#fff }
.on-dark .fx-prose a{ color:#fff }
.fx-list{ margin:0 0 1.3rem; padding:0; list-style:none; display:grid; gap:.55rem }
.fx-list li{ position:relative; padding-inline-start:1.3rem; line-height:1.6; color:var(--text-mid) }
.fx-list li::before{ content:''; position:absolute; inset-inline-start:0; top:.78em; width:.6rem; height:1px; background:var(--gold-dark) }
ol.fx-list{ counter-reset:n }
ol.fx-list li{ counter-increment:n }
ol.fx-list li::before{ content:counter(n); top:0; width:auto; height:auto; background:none; color:var(--gold-ink);
  font-family:var(--display); font-size:1.15rem }
.on-dark .fx-list li{ color:rgba(255,255,255,.9) }
.fx-note{ margin:1.6rem 0; padding:1rem 1.2rem; background:rgba(244,182,81,.12); border-inline-start:3px solid var(--gold);
  color:var(--text); line-height:1.6; font-size:1rem }
.fx-note strong{ color:var(--plum) }
.fx-legal .fx-note{ margin:0; max-width:62rem }

/* ── tables: hairlines, the recommended column in gold tint ── */
.fx-table{ margin-top:2.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch }
.fx-table:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
.fx-table table{ width:100%; min-width:34rem; border-collapse:collapse; font-size:.98rem }
.fx-table caption{ text-align:start; font-family:var(--display); font-size:clamp(1.25rem,1.9vw,1.55rem); color:var(--plum); padding-bottom:.9rem }
.fx-table th,.fx-table td{ padding:.8rem .9rem; text-align:start; border-bottom:1px solid rgba(63,9,61,.14); color:var(--text); vertical-align:top }
.fx-table thead th,.fx-table thead td{ font-family:var(--display); font-weight:400; font-size:1.08rem; color:var(--plum);
  border-bottom:1px solid rgba(244,182,81,.7) }
.fx-table tbody th{ font-weight:500; color:var(--text-mid) }
.fx-table th.rec{ color:var(--gold-ink) }
.fx-pk tbody td:nth-child(4),.fx-pk thead th:nth-child(4){ background:rgba(244,182,81,.09) }
.on-dark .fx-table th,.on-dark .fx-table td{ color:rgba(255,255,255,.92); border-bottom-color:rgba(255,255,255,.16) }
.on-dark .fx-table caption,.on-dark .fx-table thead th{ color:#fff }
.on-dark .fx-table th.rec{ color:var(--gold) }
.on-dark .fx-table tbody th{ color:rgba(255,255,255,.72) }
.on-dark .fx-pk tbody td:nth-child(4),.on-dark .fx-pk thead th:nth-child(4){ background:rgba(244,182,81,.14) }
.fx-tnote{ margin:1rem 0 0; font-size:.95rem; color:var(--text-mid) }
.on-dark .fx-tnote{ color:rgba(255,255,255,.86) }
.on-dark .fx-tnote a{ color:#fff }
@media (max-width:620px){
  .fx-table th:first-child{ position:sticky; inset-inline-start:0; background:var(--cream); z-index:1 }
  .sec--mid .fx-table th:first-child{ background:var(--cream-mid) }
  .on-dark .fx-table th:first-child{ background:var(--plum-deep) }
  .sec--ink .fx-table th:first-child{ background:var(--ink) }
}

/* ── numbered steps on a rail ── */
.fx-steps{ list-style:none; margin:2.6rem 0 0; padding:0; display:grid; gap:0; max-width:52rem; counter-reset:s }
.fx-steps li{ display:grid; grid-template-columns:3.4rem 1fr; gap:0 1.3rem; padding-bottom:1.9rem; position:relative }
.fx-steps li:not(:last-child)::before{ content:''; position:absolute; inset-inline-start:1.7rem; top:3.4rem; bottom:.3rem; width:1px;
  background:linear-gradient(180deg, rgba(244,182,81,.75), rgba(244,182,81,.15)) }
.fx-steps .no{ display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--plum-deep); color:var(--gold);
  font-family:var(--display); font-size:1.5rem; box-shadow:0 0 0 1px rgba(244,182,81,.7) inset }
.fx-steps h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.65rem); color:#fff; margin:.4rem 0 .3rem }
.fx-steps p{ margin:0; color:rgba(255,255,255,.88); line-height:1.6 }
.sec--cream .fx-steps h3,.sec--mid .fx-steps h3{ color:var(--plum) }
.sec--cream .fx-steps p,.sec--mid .fx-steps p{ color:var(--text-mid) }

/* ── text + photo ── */
.fx-split{ display:grid; gap:clamp(2rem,5vw,5rem); align-items:center; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
.fx-split.flip .fx-prose{ order:2 }
.fx-photo{ margin:0; position:relative }
.fx-photo img{ display:block; width:100%; height:auto; aspect-ratio:var(--ar,4/5); object-fit:cover }
.fx-photo::after{ content:''; position:absolute; inset-inline-start:0; bottom:-14px; width:72px; height:2px; background:var(--gold) }
@media (max-width:880px){ .fx-split{ grid-template-columns:1fr } .fx-split.flip .fx-prose{ order:0 } .fx-photo img{ max-height:64vh } }

/* ── FAQ ── */
.fx-faq{ margin-top:2.2rem; max-width:58rem }
.fx-faq details{ border-bottom:1px solid rgba(63,9,61,.16) }
.fx-faq details:first-child{ border-top:1px solid rgba(244,182,81,.55) }
.fx-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1.5rem;
  padding:1.2rem 0; font-family:var(--display); font-size:clamp(1.12rem,1.65vw,1.4rem); color:var(--plum) }
.fx-faq summary::-webkit-details-marker{ display:none }
.fx-faq summary::after{ content:'+'; font-family:var(--sans); color:var(--gold-dark); font-size:1.5rem; line-height:1; transition:transform 260ms var(--ease) }
.fx-faq details[open] summary::after{ transform:rotate(45deg) }
.fx-faq summary:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
.fx-faq summary h3{ font:inherit; color:inherit; margin:0 }
.fx-faq .a{ padding:0 0 1.4rem; color:var(--text-mid); max-width:48rem; line-height:1.65 }
.fx-faq .a p{ margin:0 }

/* ── sources ── */
.fx-sources{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.55rem; max-width:52rem }
.fx-sources li{ position:relative; padding-inline-start:1.3rem; font-size:.98rem; line-height:1.5 }
.fx-sources li::before{ content:''; position:absolute; inset-inline-start:0; top:.78em; width:.6rem; height:1px; background:var(--gold-dark) }

/* ── closing CTA row ── */
.p-fx .acts{ display:flex; flex-wrap:wrap; gap:.9rem 1.1rem }
.p-fx .fx-sec .grid .item h3{ font-size:clamp(1.3rem,1.9vw,1.7rem) }
@media print{ .fx-toc,.p-fx .acts{ display:none } }

/* ── infographics (snagging guide): frameless, hairlines and tint only ── */
.ig{ --crit:#B3261E; --maj:#E8833A; --min:#F4B651; --cos:#8D93A8; --ok:#3E9B6B; margin-top:2rem }
.ig-tag{ display:inline-block; margin:0 0 1.5rem; padding-bottom:.25rem; border-bottom:1px solid var(--gold);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink) }
[dir="rtl"] .ig-tag{ letter-spacing:0; font-size:.84rem }
.ig-h{ margin:0 0 .8rem; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.7vw,1.4rem); color:var(--plum) }
.ig-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(1.8rem,4.5vw,4rem); align-items:center }
.ig-gauge{ direction:ltr; text-align:center }
.ig-gauge svg{ display:block; width:100%; max-width:20rem; margin:0 auto; height:auto }
.ig-score{ display:flex; flex-direction:column; align-items:center; margin-top:-.4rem; line-height:1.1 }
.ig-score .n{ font-family:var(--display); font-size:clamp(2.8rem,5vw,3.8rem); color:var(--plum) }
.ig-score .o{ font-size:.85rem; color:var(--text-mid) }
.ig-score em{ margin-top:.3rem; font-style:normal; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--gold-ink) }
[dir="rtl"] .ig-score em{ letter-spacing:0; font-size:.95rem }
.ig-sev{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,2vw,1.6rem) }
.ig-s{ border-top:5px solid var(--c); padding-top:.7rem }
.ig-s b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; color:var(--plum) }
.ig-s span{ display:block; margin-top:.35rem; font-size:.88rem; font-weight:600; color:var(--text) }
.ig-s small{ display:block; margin-top:.25rem; font-size:.8rem; line-height:1.4; color:var(--text-mid) }
.ig-rings{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid rgba(63,9,61,.14) }
.ig-ring{ text-align:center }
.ig-ring svg{ display:block; width:5.6rem; height:5.6rem; margin:0 auto }
.ig-ring span{ display:block; margin-top:.5rem; font-size:.9rem; color:var(--text) }
.ig-ring small{ display:block; font-size:.78rem; color:var(--text-mid) }
.ig-bars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,4vw,3.5rem); margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid rgba(63,9,61,.14) }
.ig-bar{ display:grid; grid-template-columns:minmax(6.5rem,9.5rem) minmax(0,1fr) 1.8rem; align-items:center; gap:.7rem; margin:.6rem 0; font-size:.92rem; color:var(--text) }
.ig-bar i{ display:block; height:.7rem; background:rgba(63,9,61,.08) }
.ig-bar i u{ display:block; height:100%; inline-size:var(--w); background:var(--c,var(--plum)); text-decoration:none }
.ig-bar b{ font-weight:600; text-align:end; font-variant-numeric:tabular-nums }
.ig-key{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:1rem 0 0; padding:0; list-style:none; font-size:.8rem; color:var(--text-mid) }
.ig-key li{ display:flex; align-items:center; gap:.4rem }
.ig-key li::before{ content:''; width:.7rem; height:.7rem; background:var(--c) }
.ig-note{ margin:1.8rem 0 0; font-size:.84rem; line-height:1.55; color:var(--text-mid) }
.ig-scale{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem); margin-top:2rem }
.ig-lv{ border-top:5px solid var(--c); padding-top:.9rem }
.ig-lv h3{ margin:0 0 .45rem; font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.6rem); color:var(--plum) }
.ig-lv p{ margin:0 0 .6rem; line-height:1.55; font-size:.96rem; color:var(--text) }
.ig-lv .ex{ font-size:.86rem; color:var(--text-mid) }
@media (max-width:860px){ .ig-top,.ig-bars{ grid-template-columns:1fr } .ig-scale{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ig-rings{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .ig-sev{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ig-scale{ grid-template-columns:1fr } .ig-bar{ grid-template-columns:minmax(5.5rem,7.5rem) minmax(0,1fr) 1.6rem; font-size:.86rem } }

/* ── sample findings (snagging guide): photo with the red outline, severity chip, observation and action ── */
.ig-ex{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:2rem }
.ig-exi{ margin:0; border-top:5px solid var(--c); padding-top:.9rem }
.ig-exi img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:rgba(63,9,61,.08) }
.ig-exi figcaption{ margin-top:.8rem }
.ig-exi .chip{ display:inline-block; padding:.12rem .6rem; background:var(--c); color:#1A0C1E; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
[dir="rtl"] .ig-exi .chip{ letter-spacing:0; font-size:.82rem }
.ig-exi .area{ margin-inline-start:.7rem; font-size:.85rem; color:var(--text-mid) }
.ig-exi b{ display:block; margin-top:.8rem; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink) }
[dir="rtl"] .ig-exi b{ letter-spacing:0; font-size:.82rem }
.ig-exi p{ margin:.25rem 0 0; font-size:.95rem; line-height:1.55; color:var(--text) }
@media (max-width:860px){ .ig-ex{ grid-template-columns:1fr; max-width:34rem } }