/* ============================================================
   ICONIA ZAMALEK RESIDENCES — Guides layer
   Additive to cinematic.css. Adds the long-form prose elements
   the guide pages need (lists, h3, answer block, comparison
   tables, guide index) plus a fifth footer column.
   Uses cinematic.css tokens only. Loads after cinematic.css.
   ============================================================ */

/* --- Answer block: the first-screen direct answer models quote --- */
.answer{
  border:1px solid var(--line-2);
  border-left:3px solid var(--brand-lt);
  border-radius:var(--r-sm);
  padding:32px 34px;
  background:rgba(233,223,209,.03);
  margin-bottom:20px;
}
.answer p{
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.75;
  color:rgba(233,223,209,.88);
  margin:0;
}
.answer strong{color:var(--sand);font-weight:500}

/* --- Updated stamp --- */
.stamp{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* --- Prose additions: headings and lists --- */
.prose h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.2vw,29px);
  line-height:1.25;
  color:var(--sand);
  margin:0 0 16px;
}
.prose h4{
  font-family:var(--sans);
  font-weight:500;
  font-size:17px;
  letter-spacing:.02em;
  color:var(--sand);
  margin:0 0 10px;
}
.prose h2+p,.prose h3+p,.prose h4+p{margin-top:0}
.prose ul,.prose ol{
  margin:0 0 24px;
  padding-left:22px;
  color:rgba(233,223,209,.78);
}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.75em;
  width:6px;
  height:1px;
  background:var(--brand-lt);
}
.prose li{
  font-size:16.5px;
  line-height:1.8;
  margin-bottom:11px;
}
.prose li:last-child{margin-bottom:0}
.prose li strong{color:var(--sand);font-weight:500}
.prose p strong{color:var(--sand);font-weight:500}
.prose__block>*:last-child{margin-bottom:0}

/* --- Comparison table --- */
.cmp{margin:0 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:15.5px;
}
.cmp th,.cmp td{
  text-align:left;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.65;
  color:rgba(233,223,209,.78);
}
.cmp thead th{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-lt);
  border-bottom-color:var(--line-2);
  white-space:nowrap;
}
.cmp tbody th{
  font-family:var(--sans);
  font-weight:500;
  color:var(--sand);
  white-space:nowrap;
}
.cmp caption{
  caption-side:bottom;
  text-align:left;
  padding-top:14px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* --- Guide index cards (cross-links between the six guides) --- */
.gx{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.gx a{
  display:block;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:26px 26px 30px;
  background:rgba(233,223,209,.02);
  transition:.4s var(--e);
}
.gx a:hover{
  background:rgba(233,223,209,.07);
  border-color:rgba(192,161,122,.4);
  transform:translateY(-4px);
}
.gx span{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-lt);
  margin-bottom:12px;
}
.gx b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:21px;
  line-height:1.3;
  color:var(--sand);
}

/* --- Footer: fifth column for the Guides group --- */
.foot__g--5{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}

@media (max-width:1080px){
  .gx{grid-template-columns:repeat(2,1fr)}
  .foot__g--5{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:720px){
  .answer{padding:26px 24px}
  .gx{grid-template-columns:1fr}
  .foot__g--5{grid-template-columns:1fr 1fr}
  .cmp table{min-width:480px}
}