/* ============================================================
   BrokerageLoop — long-form content pages (guides, comparisons)
   ============================================================ */

.content-hero{
  padding-block-start: clamp(6.5rem, 10vw, 8.5rem);
  padding-block-end: var(--space-12);
  background: var(--color-bone);
  border-bottom: 1px solid var(--color-bone-border);
}

.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
  color: var(--color-fg-subtle);
  margin-block-end: var(--space-6);
}
html[lang="ar"] .breadcrumb,
body.lang-ar .breadcrumb{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-xs); }
.breadcrumb a{ color: var(--color-primary); font-weight: 600; display: inline-block; padding-block: 4px; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb .sep{ opacity: 0.5; }
.breadcrumb [aria-current]{ color: var(--color-fg); font-weight: 600; }

/* Document pages sit a step below the home-page hero in the type hierarchy. */
.content-hero h1{ font-size: var(--fs-4xl); max-width: 24ch; margin-block-end: var(--space-5); }
.content-hero .lede{
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  max-width: 50ch;
  line-height: var(--lh-relaxed);
}

/* ---- TODO flag: visible marker for facts that need owner sign-off ---- */
.todo-flag{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  padding: 0.05em 0.5em;
  font-weight: 700;
  /* em, floored: at 0.86em the flag dropped under 12px inside small-text
     contexts like the proof band's badge slot. */
  font-size: max(0.75rem, 0.86em);
  font-style: normal;
  line-height: 1.5;
}
.todo-banner{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #92400E;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-10);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.todo-banner svg{ width: 20px; height: 20px; flex: none; margin-block-start: 2px; }
.todo-banner strong{ display: block; margin-block-end: 2px; }

/* ---- Prose ---- */
/* `ch` is the width of the "0" glyph, which in Plus Jakarta Sans is much
   wider than the average lowercase letter: the old 74ch measured 817px on
   screen, about 98 characters per line against a 65-75 target. The cap now
   lives on the grid column instead (see .content-layout) so the measure is
   right without leaving a dead gutter between the prose and the sidebar. */
.prose{ max-width: none; }
.prose > * + *{ margin-block-start: var(--space-5); }
.prose h2{
  font-size: var(--fs-2xl);
  margin-block-start: var(--space-12);
  margin-block-end: var(--space-2);
}
.prose h3{
  font-size: var(--fs-lg);
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-1);
}
.prose p{ color: var(--color-fg-muted); line-height: var(--lh-relaxed); font-size: var(--fs-md); }
.prose ul, .prose ol{
  padding-inline-start: 1.4rem;
  color: var(--color-fg-muted);
}
.prose ul{ list-style: disc; }
.prose ol{ list-style: decimal; }
.prose li{ line-height: var(--lh-relaxed); margin-block-end: var(--space-2); font-size: var(--fs-md); }
.prose li::marker{ color: var(--color-primary); }
.prose strong{ color: var(--color-fg); }
.prose a{ color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* The reading column is sized for measure, not for whatever is left over
   after the sidebar. space-between then pushes the sidebar to the far edge
   rather than parking it next to the text with a hole in between. */
.content-layout{
  display: grid;
  grid-template-columns: minmax(0, 38rem) 300px;
  gap: var(--space-16);
  justify-content: space-between;
  align-items: start;
}
.content-layout > *{ min-width: 0; }
@media (max-width: 980px){ .content-layout{ grid-template-columns: 1fr; } }

/* ---- Sidebar ---- */
.content-sidebar{
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sidebar-card{
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.sidebar-card h2{
  margin-block-end: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
html[lang="ar"] .sidebar-card h2,
body.lang-ar .sidebar-card h2{ font-family: var(--font-arabic); letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700; }
.sidebar-card ul{ display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-card a{
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding-block: 3px;
  color: var(--color-fg-muted);
}
.sidebar-card a:hover{ color: var(--color-primary); }

/* ---- Comparison table ---- */
.table-scroll{ overflow-x: auto; margin-block: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.compare-table{ width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--fs-sm); }
.compare-table th, .compare-table td{
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}
.compare-table thead th{
  background: var(--color-bg-subtle);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-fg);
}
.compare-table tbody th{
  font-weight: 600;
  color: var(--color-fg);
}
.compare-table th:first-child{ width: 34%; }
.compare-table td{ color: var(--color-fg-muted); }
.compare-table tr:last-child td, .compare-table tr:last-child th{ border-bottom: none; }

/* ---- Stat / callout row ---- */
.callout{
  display: flex;
  gap: var(--space-4);
  background: var(--brand-cerulean-50);
  border: 1px solid var(--brand-cerulean-100);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-8);
}
.callout svg{ width: 22px; height: 22px; color: var(--color-primary); flex: none; margin-block-start: 2px; }
.callout p{ margin: 0; font-size: var(--fs-sm); color: var(--brand-cerulean-900); line-height: var(--lh-relaxed); }

/* ---- FAQ ---- */
.faq{ display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-6); }
.faq details{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.faq summary{
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  font-size: 1.4rem;
  color: var(--color-primary);
  flex: none;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq p{ margin-block-start: var(--space-3); color: var(--color-fg-muted); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }

/* ---- Related guides grid (homepage hub + footer of each guide) ---- */
.guides-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px){ .guides-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .guides-grid{ grid-template-columns: 1fr; } }
.guide-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  height: 100%;
}
.guide-card .kicker-sm{
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.guide-card h3{ font-size: var(--fs-md); }
.guide-card p{ font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--lh-relaxed); flex: 1; }
.guide-card .read-link{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
}
.guide-card .read-link svg{ width: 16px; height: 16px; transition: transform var(--dur-fast); }
.guide-card:hover .read-link svg{ transform: translateX(3px); }
html[dir="rtl"] .guide-card:hover .read-link svg{ transform: translateX(-3px) scaleX(-1); }
html[dir="rtl"] .guide-card .read-link svg{ transform: scaleX(-1); }

/* ---- Demo request form (/demo.html) ---- */
.demo-form{ display: grid; gap: var(--space-5); max-width: 640px; }
.demo-form .field{ display: grid; gap: var(--space-2); }
.demo-form .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px){ .demo-form .field-row{ grid-template-columns: 1fr; } }
.demo-form label{ font-weight: 600; font-size: var(--fs-sm); color: var(--color-fg); }
.demo-form .req{ color: var(--color-danger); }
.demo-form input,
.demo-form select,
.demo-form textarea{
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-md);
}
.demo-form textarea{ resize: vertical; min-height: 128px; }
.demo-form input:focus-visible,
.demo-form select:focus-visible,
.demo-form textarea:focus-visible{ outline: 2px solid var(--color-ring); outline-offset: 2px; border-color: var(--color-primary); }
.demo-form button[disabled]{ opacity: .6; cursor: progress; }
.demo-form .hp{ position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-privacy{ font-size: var(--fs-sm); color: var(--color-fg-muted); }
.demo-privacy a, .demo-status a{ color: var(--color-primary); text-decoration: underline; }

/* Outcome messages: hidden until targeted (#demo-sent / #demo-failed), which
   works without JavaScript after the API's 303 redirect. */
.demo-status{ display: none; border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin-block-end: var(--space-6); max-width: 640px; }
.demo-status:target{ display: block; }
.demo-status p{ margin-block-start: var(--space-2); font-size: var(--fs-sm); }
.demo-status-ok{ background: var(--color-success-bg); border: 1px solid var(--color-success); }
.demo-status-err{ background: var(--color-danger-bg); border: 1px solid var(--color-danger); }
.demo-status:focus{ outline: none; }
.demo-status{ scroll-margin-block-start: 7rem; }