/* Condolences. Its own quiet register: the darker Sidr ground, no accents
   that read as celebration, nothing that hurries the reader. No price table
   and no package ladder belong on this page. */
.cond-hero{
  background: #566250;                     /* darker Sidr, chosen for contrast */
  color: var(--rimal);
  padding-block: clamp(46px,7vw,110px);
}
.cond-hero h1{ color: var(--rimal); }
.cond-lede{
  margin-top: 14px;
  color: var(--rimal); opacity: .92; line-height: 1.75;
}
/* The hero sits on the same centred column as everything below it. It used
   to run the full width of the wrapper, which in RTL put the title hard
   against the right edge while the body copy was centred - two axes on one
   page. */
.cond-hero h1,
.cond-lede{ max-width: var(--measure); margin-inline: auto; }
.cond{ --measure: 40rem; }   /* one column width for the whole page */
.cond .band{ padding-block: clamp(26px,4vw,56px); }
.cond .wd > p{ max-width: var(--measure); line-height: 1.8; }
.cond-points{ margin: 18px 0 0; padding-inline-start: 20px; max-width: var(--measure); }
.cond-points li{ margin-bottom: 10px; line-height: 1.7; }
.cond-closing{ margin-top: 22px; max-width: var(--measure); }
.cond-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 22px;
  max-width: var(--measure); margin-inline: auto; }
.cond .faq-q{ border-block-end:1px solid var(--t12); padding: 14px 0; max-width: var(--measure); }
.cond .faq-q summary{ cursor:pointer; font-weight:500; }
.cond .faq-q p{ margin: 10px 0 0; color: var(--t80); line-height:1.75; }
.cond-read{ margin:14px 0 0; padding-inline-start:20px; }
.cond-read li{ margin-bottom:8px; }
.cond-read a{ color: var(--ghaf); text-underline-offset:3px; }

/* The CTA sits on the Sidr ground, not on paper: b-rest and b-restline are
   the condolence register's pair and both are drawn for a dark field. On a
   light band b-restline would be cream on cream, which is what b-inv was
   doing here before. */
.cond-act{ background:#566250; color:var(--rimal); }
.cond-act .cond-cta{ margin:0; }

/* ── The setup guide, moved here from the blog on 2026-10-08 ──────────
   It sits below the call buttons, so a bereaved caller never scrolls to
   reach the number. Logical properties throughout: the Arabic page is the
   primary render and the English one mirrors from the same rules. */
.cond-guide h3{ margin-block: clamp(26px,3vw,40px) 10px; max-width: var(--measure);
  font-size: clamp(20px,1.7vw,23px); }
.cond-guide-lede{ max-width: var(--measure); line-height: 1.85; }
.cond-list{ margin: 14px 0 0; padding-inline-start: 20px; max-width: var(--measure); }
.cond-list li{ margin-bottom: 11px; line-height: 1.8; }

/* Set a measure and centre it, rather than letting every column hug the
   start edge of a wide wrapper. Long-form prose, so the text itself stays
   aligned to the reading edge: centred Arabic body copy is unreadable. */
.cond .band .wd > p,
.cond-points,
.cond-guide h3,
.cond-guide-lede,
.cond-list,
.cond-tablewrap,
.cond .faq-q{ margin-inline: auto; }

/* A size up from the 16px body default. This page is read slowly, often by
   someone who is not in a state to squint at it. */
.cond .band .wd > p,
.cond-points li,
.cond-guide-lede,
.cond-list li,
.cond .faq-q summary,
.cond .faq-q p{ font-size: clamp(17px,1.3vw,18.5px); }
/* Both need to outrank the rule above, which is more specific than a bare
   class and was shrinking the closing line below the body text. */
.cond .band .wd > p.cond-closing{ font-size: clamp(18px,2vw,21px); }
.cond-hero .wd > p.cond-lede{ font-size: clamp(17px,1.3vw,18.5px); }

/* Scrolls rather than squeezing: three columns of Arabic will not fit a
   360px screen, and a squeezed table is unreadable in either script. */
.cond-tablewrap{ margin-block: 16px; max-width: var(--measure); overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
.cond-table{ border-collapse: collapse; inline-size: 100%; font-size: 16px; }
.cond-table th,.cond-table td{ padding: 10px 14px; text-align: start;
  border-block-end: 1px solid var(--t12); }
.cond-table thead th{ font-weight: 500; white-space: nowrap; }
.cond-table tbody th{ font-weight: 400; }
.cond-table td{ font-variant-numeric: lining-nums tabular-nums; }
@media (max-width:600px){ .cond-table{ font-size: 15px; }
  .cond-table th,.cond-table td{ padding: 8px 10px; } }