/* ============================================================================
   PropertyDesk — site styles. Consumes tokens.css only; no raw hex here.
   RTL is handled entirely with logical properties. There is no [dir=rtl] block.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: var(--weight-head);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--ground); color: var(--ink);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line);
}
.skip:focus { inset-inline-start: var(--s-4); top: var(--s-4); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- layout */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.shell--narrow { max-width: var(--container-narrow); }

.sec { padding-block: var(--s-section); }
.sec--alt { background: var(--ground-soft); }
.sec__h { font-size: var(--t-2xl); margin-block-end: var(--s-3); }
.sec__dek {
  color: var(--ink-muted); max-width: var(--measure);
  margin-block-end: var(--s-6); font-size: var(--t-md);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-deep);
  border: 1px solid #DBE9E1;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin-block-end: var(--s-4);
}
.eyebrow::before {
  content: ""; inline-size: 6px; block-size: 6px;
  border-radius: 50%; background: var(--gold); flex: none;
}
:root[lang="ar"] .eyebrow { text-transform: none; font-family: var(--font-ar); letter-spacing: 0; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-block-end: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.nav__logo { display: block; flex: none; }
.nav__logo img { height: 34px; width: auto; }

.nav__cb, .nav__burger { display: none; }

.nav__links {
  display: flex; align-items: center; gap: var(--s-5);
  margin-inline-start: auto;
}
.nav__links a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.nav__links a:hover { color: var(--accent-deep); }
.nav__links a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }

/* The CTA is an <a> inside .nav__links, so ".nav__links a" (0,2,0) was
   overriding ".btn--primary" (0,1,0) and painting the label dark ink on a
   dark green fill. Match the specificity so the button keeps its own colour. */
.nav__links a.btn--primary,
.nav__links a.btn--primary:hover { color: var(--ground); }

.nav__lang {
  padding-inline: var(--s-3);
  border-inline-start: 1px solid var(--line);
}

/* ---------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 15px 30px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: all var(--dur) cubic-bezier(.2,.7,.3,1);
}
.btn--primary {
  background: var(--accent-dark); color: var(--ground);
  box-shadow: var(--sh-btn);
}
.btn--primary:hover {
  background: #0E281F; color: var(--ground);
  transform: translateY(-1px); box-shadow: var(--sh-btn-lift);
}
@media (prefers-reduced-motion: reduce) { .btn--primary:hover { transform: none; } }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.nav__cta { padding: var(--s-2) var(--s-4); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: var(--s-8) var(--s-7); border-block-end: 1px solid var(--line); }
.hero__in { max-width: var(--container-narrow); margin-inline: auto; }
.hero h1 { font-size: var(--t-hero); }
.hero .dek {
  margin-block-start: var(--s-4);
  font-size: var(--t-md);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ----------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-2xl); margin-block-end: var(--s-4); }
.prose p + p { margin-block-start: var(--s-4); }
.prose p { color: var(--ink-2); }

/* --------------------------------------------------------------- callout */
.callout {
  padding: var(--s-5) var(--s-6);
  background: var(--ground);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r);
  max-width: var(--measure);
}
.callout--warn { border-inline-start-color: var(--warn); }
.callout--risk { border-inline-start-color: var(--risk); }
.callout h3 { font-size: var(--t-md); margin-block-end: var(--s-2); }
.callout p { color: var(--ink-muted); }
.callout p + p { margin-block-start: var(--s-3); }

/* ================= the ledger — this page's whole argument ============== */
.jset { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }

.jcard {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
}
.jcard__head { display: flex; align-items: baseline; gap: var(--s-3); }
.jcard__n {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.jcard__head h3 { font-size: var(--t-md); }
.jcard__note {
  color: var(--ink-muted); font-size: var(--t-sm);
  margin-block-start: var(--s-2);
}
.jcard__why {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-muted);
}
.jcard__why b { color: var(--ink-2); }

.scroll { overflow-x: auto; margin-block-start: var(--s-4); }

.journal {
  width: 100%; min-width: 460px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.journal caption { text-align: start; }
.journal th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  text-align: start;
  padding: var(--s-2) var(--s-3);
  background: var(--ground-sunk);
  border-block-end: 1px solid var(--line-strong);
}
:root[lang="ar"] .journal th { text-transform: none; font-family: var(--font-ar); }

.journal td {
  padding: var(--s-3);
  border-block-end: 1px solid var(--line);
  vertical-align: baseline;
}
.journal tbody tr:last-child td { border-block-end: none; }

/* A credit is indented, the way it is written in a real journal. */
.journal .is-cr .journal__acct { padding-inline-start: var(--s-6); }

.journal__code {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin-inline-end: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.journal__name { color: var(--ink-2); }

.journal th.journal__amt, .journal td.journal__amt {
  text-align: end;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;              /* figures read LTR even on Arabic pages */
  unicode-bidi: embed;
  width: 7.5rem;
}
.journal td.journal__amt { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------- faq */
.faq { border-block-end: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--s-4);
  font-weight: 600; font-size: var(--t-md);
  display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-weight: 400;
  font-size: var(--t-lg); line-height: 1; flex: none;
}
.faq[open] summary::after { content: "\2212"; }
.faq__a { padding-block-end: var(--s-4); color: var(--ink-muted); max-width: var(--measure); }

/* ------------------------------------------------------------------- cta */
/* Dark brand band with a gold radial wash — the original treatment. The gold
   glow is what stops a flat dark rectangle reading as a slab. */
.cta {
  background: var(--accent-dark);
  color: var(--on-dark-80);
  padding-block: var(--s-section);
  position: relative; overflow: hidden; text-align: center;
}
.cta::before {
  content: ""; position: absolute; top: -50%; left: 50%;
  transform: translateX(-50%);
  inline-size: 900px; block-size: 600px;
  background: radial-gradient(ellipse, var(--glow-gold) 0%, transparent 65%);
  pointer-events: none;
}
.cta__in { position: relative; max-width: 620px; margin-inline: auto; }
.cta h2 { font-size: var(--t-3xl); color: var(--ground); }
.cta p {
  margin-block: var(--s-4) var(--s-6);
  color: var(--on-dark-80); font-size: var(--t-md);
}
.cta .btn--primary {
  background: var(--ground); color: var(--accent-dark);
  box-shadow: var(--sh);
}
.cta .btn--primary:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* ---------------------------------------------------------------- footer
   The original treatment: deep brand green, a gold radial wash in the corner,
   generous top padding, gold on hover.                                     */
.foot {
  background: var(--accent-dark);
  color: var(--on-dark-62);
  padding-block: 88px var(--s-5);
  position: relative; overflow: hidden;
}
.foot::before {
  content: ""; position: absolute; bottom: -40%; inset-inline-end: -10%;
  inline-size: 600px; block-size: 500px;
  background: radial-gradient(ellipse, var(--glow-gold-sm), transparent 65%);
  pointer-events: none;
}
.foot__in, .foot__base { position: relative; }
.foot__in {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1.7fr .9fr .9fr 1.3fr;
  margin-block-end: var(--s-7);
  align-items: start;
}
.foot__in > div:not(:first-child) { padding-block-start: var(--s-4); }
.foot__brand img { height: 52px; width: auto; }
.foot__tag {
  margin-block-start: var(--s-4); font-size: .9rem; line-height: 1.75;
  max-width: 340px; color: rgba(255,255,255,.55);
}
.foot__where {
  margin-block-start: var(--s-4); font-size: .85rem; line-height: 1.8;
  color: rgba(255,255,255,.45);
}
.foot__col { display: flex; flex-direction: column; align-items: start; }
.foot__h {
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .7rem; color: var(--on-dark-40);
  margin-block-end: var(--s-4);
}
:root[lang="ar"] .foot__h { text-transform: none; font-family: var(--font-ar); letter-spacing: 0; }
.foot__col a {
  color: var(--on-dark-62); text-decoration: none;
  font-size: .88rem; padding-block: 5px;
  transition: color var(--dur) var(--ease);
}
.foot__col a:hover { color: var(--gold); }
.foot__base {
  border-block-start: 1px solid var(--on-dark-line);
  padding-block-start: var(--s-5);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.38);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .foot__in { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .foot__brand { grid-column: 1 / -1; }
  .sec { padding-block: var(--s-section-sm); }
  .cta { padding-block: var(--s-section-sm); }
  .foot { padding-block: var(--s-8) var(--s-5); }
}
@media (max-width: 1000px) {
  .nav__burger {
    display: flex; flex-direction: column; gap: 4px; cursor: pointer;
    margin-inline-start: auto; padding: var(--s-2);
  }
  .nav__burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
  .nav__links {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-block-end: 1px solid var(--line);
    padding: var(--s-3) var(--s-5) var(--s-5);
  }
  .nav__cb:checked ~ .nav__links { display: flex; }
  .nav__links a { padding-block: var(--s-3); }
  .nav__lang { border-inline-start: none; border-block-start: 1px solid var(--line); padding-inline: 0; }
  .nav__cta { margin-block-start: var(--s-3); }
}
@media (max-width: 620px) {
  .sec { padding-block: var(--s-7); }
  .foot__in { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Block types added for the wider page set. Same rules apply: tokens only,
   logical properties only.
   ========================================================================== */

/* ------------------------------------------------------------ hero extras */
.hero--lead { padding-block: var(--s-9) var(--s-8); }
.hero--lead .hero__in { max-width: var(--container); }
.hero--lead h1 { max-width: 18ch; }
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.btn--ghost {
  background: var(--ground); color: var(--ink);
  border-color: var(--line); box-shadow: var(--sh-sm);
}
.btn--ghost:hover { border-color: #C9D4CE; transform: translateY(-1px); color: var(--ink); }

.trust {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-sm); color: var(--ink-muted);
}
.trust li { display: flex; align-items: center; gap: var(--s-2); }
.trust li::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ----------------------------------------------------------------- cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.card {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card__kicker {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-deep); margin-block-end: var(--s-2);
}
:root[lang="ar"] .card__kicker { text-transform: none; font-family: var(--font-ar); }
.card h3 { font-size: var(--t-md); margin-block-end: var(--s-2); }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { color: var(--accent-deep); }
.card p { color: var(--ink-muted); font-size: var(--t-sm); }

/* -------------------------------------------------------------- features */
.feats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.feats li {
  position: relative; padding-inline-start: var(--s-6);
  color: var(--ink-2); font-size: var(--t-sm);
}
.feats li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  inline-size: 9px; block-size: 5px;
  border-inline-start: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* honest limitations read as minus signs, never as ticks */
.feats--minus li::before {
  inline-size: 10px; block-size: 0; transform: none; top: .8em;
  border-inline-start: none; border-block-end: 2px solid var(--ink-faint);
}

/* ----------------------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.steps__n {
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
  padding-block-start: 2px;
}
.steps h3 { font-size: var(--t-md); }
.steps p { color: var(--ink-muted); font-size: var(--t-sm); margin-block-start: var(--s-2); }

/* --------------------------------------------------------------- pricing */
.plans {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  align-items: start;
}
.plan {
  position: relative;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.plan--pop { border-color: var(--accent); box-shadow: var(--sh); }
.plan__flag {
  position: absolute; inset-block-start: 0; inset-inline-start: var(--s-5);
  transform: translateY(-50%);
  background: var(--accent-deep); color: var(--ink-on-accent);
  font-size: var(--t-xs); font-weight: 600;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
}
.plan h3 { font-size: var(--t-lg); }
.plan__for { color: var(--ink-muted); font-size: var(--t-sm); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan__price s { color: var(--ink-faint); font-size: var(--t-sm); }
.plan__price b {
  font-family: var(--font-head); font-size: var(--t-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-head);
}
.plan__price span { color: var(--ink-muted); font-size: var(--t-sm); }
.plan__note { font-size: var(--t-xs); color: var(--accent-deep); }
.plan__specs {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4);
  margin: 0; padding-block: var(--s-3);
  border-block: 1px solid var(--line);
  font-size: var(--t-sm);
}
.plan__specs dt { color: var(--ink-muted); }
.plan__specs dd { margin: 0; color: var(--ink); font-weight: 500; }
.plan .btn { margin-block-start: auto; }
.plans__foot {
  margin-block-start: var(--s-5);
  color: var(--ink-muted); font-size: var(--t-sm);
  max-width: var(--measure);
}

/* --------------------------------------------------------------- contact */
.contact {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.contact li {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-5);
}
.contact__k {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-muted); margin-block-end: var(--s-2);
}
:root[lang="ar"] .contact__k { text-transform: none; font-family: var(--font-ar); }
.contact__v {
  display: block; font-size: var(--t-md); font-weight: 600;
  color: var(--accent-deep); text-decoration: none;
}
a.contact__v:hover { color: var(--accent); text-decoration: underline; }
.contact__n { margin-block-start: var(--s-2); color: var(--ink-muted); font-size: var(--t-sm); }

/* ------------------------------------------------------------- icon system */
.ico { display: block; }

.card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 46px; block-size: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-block-end: var(--s-4);
}
/* The mark is directional in a couple of icons; mirror the set in RTL so an
   arrow or a page fold points the way the language reads. */
:root[lang="ar"] .card__ico .ico { transform: scaleX(-1); }

/* ==========================================================================
   Split hero + the product interface illustration
   ========================================================================== */

.hero--split .hero__in {
  max-width: var(--container);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.hero--split .hero__copy { min-inline-size: 0; }
.hero--split h1 { max-width: 15ch; }
.hero__visual { min-inline-size: 0; }

@media (max-width: 940px) {
  .hero--split .hero__in { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero--split h1 { max-width: 18ch; }
}

/* ---------------------------------------------------- interface illustration */
.pui {
  margin: 0;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.pui__chrome {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 20px; min-block-size: 42px;
  background: var(--ground-soft);
  border-block-end: 1px solid var(--line);
}
.pui__dot {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: #E3E9E5; flex: none;
}
.pui__addr {
  margin-inline-start: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint);
}

.pui__body { padding: var(--s-5); }

.pui__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-block-end: var(--s-4);
}
.pui__head strong { font-family: var(--font-head); font-size: var(--t-md); }
.pui__live {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--ok); font-weight: 600;
}
.pui__live i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft);
}

.pui__kpis {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
@media (min-width: 520px) { .pui__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pui__kpi { background: var(--ground); padding: var(--s-3) var(--s-4); }
.pui__k {
  display: block; font-size: var(--t-xs); color: var(--ink-muted);
  margin-block-end: var(--s-2);
}
.pui__v {
  display: block; font-family: var(--font-head); font-size: var(--t-lg);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-head);
  direction: ltr; unicode-bidi: embed;
}
.pui__v--risk { color: var(--risk); }
.pui__sub {
  display: block; margin-block-start: var(--s-1);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint);
  direction: ltr; unicode-bidi: embed;
}
.pui__bar {
  block-size: 4px; border-radius: 2px; background: var(--ground-sunk);
  margin-block-start: var(--s-2); overflow: hidden;
}
.pui__bar i { display: block; block-size: 100%; background: var(--accent); }

.pui__lbl {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-muted); margin-block: var(--s-5) var(--s-3);
}
:root[lang="ar"] .pui__lbl { text-transform: none; font-family: var(--font-ar); }

.pui__acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pui__acts li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--ink-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

.pui__pill {
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: var(--ground-sunk); color: var(--ink-muted);
  flex: none;
}
/* semantic state, never colour alone — each pill also carries its own word */
.pui__pill--ok   { background: var(--ok-soft);   color: var(--accent-deep); }
.pui__pill--warn { background: var(--warn-soft); color: var(--warn); }
.pui__pill--risk { background: var(--risk-soft); color: var(--risk); }

.pui__tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pui__tbl th {
  text-align: start; font-weight: 500; font-size: var(--t-xs);
  color: var(--ink-muted); padding: var(--s-2) var(--s-3);
  border-block-end: 1px solid var(--line-strong);
}
.pui__tbl td {
  padding: var(--s-3); border-block-end: 1px solid var(--line);
  color: var(--ink-2);
}
.pui__tbl tr:last-child td { border-block-end: none; }
.pui__tbl .pui__num {
  text-align: end; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  direction: ltr; unicode-bidi: embed;
}
.pui__tbl th.pui__num { text-align: end; }

.pui__cap {
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--line);
  background: var(--ground-soft);
  font-size: var(--t-xs); color: var(--ink-faint);
}

/* ==========================================================================
   Print. Pricing and the accounting scenarios do get printed and taken into
   meetings, so make that produce something usable rather than a broken screen
   layout. Backgrounds are dropped, chrome is removed, and blocks are kept
   from breaking across pages.
   ========================================================================== */
@media print {
  .nav, .foot, .cta, .skip, .hero__cta, .pui__chrome { display: none !important; }

  html, body { background: #fff !important; color: #000; font-size: 11pt; }
  .sec, .hero { padding-block: 12pt !important; }
  .sec--alt { background: none !important; }
  .shell { max-width: none; padding-inline: 0; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }

  /* never split a journal, a card or a plan across a page break */
  .jcard, .card, .plan, .callout, .pui, .steps li, .faq {
    break-inside: avoid; page-break-inside: avoid;
    box-shadow: none !important;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* the recurring bottom-margin overflow: never let a block run past the page */
  .scroll { overflow: visible !important; }
  .journal, .pui__tbl { min-width: 0 !important; }

  /* answers and FAQs must print open, not collapsed */
  details.faq { display: block; }
  details.faq > summary { list-style: none; }
  details.faq .faq__a { display: block !important; }

  /* a printed link is useless without its target */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="/"]::after { content: " (propertydesk.cloud" attr(href) ")"; font-size: 9pt; color: #555; }
  .nav__links a::after, .foot a::after { content: ""; }
}

/* ==========================================================================
   Free tools. Real inputs, real results, no email wall.
   ========================================================================== */
.tool {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.tool__form {
  display: grid; gap: var(--s-4); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.tool__form--4 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

.field { display: flex; flex-direction: column; gap: var(--s-2); min-inline-size: 0; }
.field label { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.field input {
  font: inherit; font-size: var(--t-base);
  min-block-size: 44px;                 /* touch target */
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--ground); color: var(--ink);
  inline-size: 100%;
}
.field input:focus-visible { border-color: var(--accent); }
.tool__form .btn { min-block-size: 44px; }

.tool__err {
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--risk-soft); color: var(--risk);
  border-radius: var(--r); font-size: var(--t-sm);
}

.tool__tbl { width: 100%; min-width: 340px; border-collapse: collapse; font-size: var(--t-sm); }
.tool__tbl th {
  text-align: start; font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
  padding: var(--s-2) var(--s-3); background: var(--ground-sunk);
  border-block-end: 1px solid var(--line-strong);
}
:root[lang="ar"] .tool__tbl th { text-transform: none; font-family: var(--font-ar); }
.tool__tbl td { padding: var(--s-3); border-block-end: 1px solid var(--line); color: var(--ink-2); }
.tool__tbl tfoot td {
  border-block-end: none; border-block-start: 2px solid var(--line-strong);
  font-weight: 600; color: var(--ink);
}
.tool__tbl .num {
  text-align: end; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  direction: ltr; unicode-bidi: embed;
}
.tool__tbl th.num { text-align: end; }
.tool__note {
  margin-block-start: var(--s-4); font-size: var(--t-sm);
  color: var(--ink-muted); max-width: var(--measure);
}

/* ==========================================================================
   Contact form — the original styling: soft-filled inputs, 11px radius,
   green focus ring.
   ========================================================================== */
.pform { max-width: 640px; }
.pform__row {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-block-end: var(--s-4);
}
.pform .field { margin-block-end: var(--s-4); }
.pform__row .field { margin-block-end: 0; }

.pform label {
  display: block; font-weight: 500; font-size: .82rem;
  color: var(--ink); margin-block-end: 6px;
}
.field__req {
  font-weight: 400; font-size: .72rem; color: var(--ink-faint);
  text-transform: lowercase;
}
.pform input, .pform textarea, .pform select {
  inline-size: 100%;
  padding: 12px 15px;
  min-block-size: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: .93rem;
  color: var(--ink);
  background: var(--ground-soft);
  transition: all var(--dur) var(--ease);
}
:root[lang="ar"] .pform input,
:root[lang="ar"] .pform textarea,
:root[lang="ar"] .pform select { font-family: var(--font-ar); }
.pform textarea { resize: vertical; min-block-size: 100px; }
.pform input:focus, .pform textarea:focus, .pform select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ground);
  box-shadow: 0 0 0 3px rgba(30,107,71,.10);
}
.pform input[type=tel] { direction: ltr; text-align: start; }
.pform__submit { inline-size: 100%; justify-content: center; margin-block-start: var(--s-2); }
.pform__note {
  margin-block-start: var(--s-3);
  font-size: var(--t-xs); color: var(--ink-muted);
}

/* ==========================================================================
   Offer banner + WhatsApp button — both from the original site.
   ========================================================================== */
.banner {
  background: var(--accent-dark); color: rgba(255,255,255,.85);
  text-align: center; padding: 9px 24px;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  display: flex; justify-content: center; align-items: center;
  gap: var(--s-2) var(--s-3); flex-wrap: wrap;
}
.banner b {
  background: var(--gold); color: var(--accent-dark);
  padding: 2px 10px; border-radius: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
}
:root[lang="ar"] .banner b { letter-spacing: 0; }
.banner a { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.banner a:hover { color: var(--gold); text-decoration: underline; }

.wa {
  position: fixed; bottom: 28px; inset-inline-end: 28px;
  inline-size: 58px; block-size: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,.40);
  z-index: 999; transition: transform .25s var(--ease);
}
.wa:hover { transform: scale(1.07); color: #fff; }
.wa svg { inline-size: 28px; block-size: 28px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .wa:hover { transform: none; } }
@media print { .banner, .wa { display: none !important; } }

/* nav logo at the original scale */
.nav__logo img { height: 52px; }
@media (max-width: 620px) { .nav__logo img { height: 40px; } }