/* d2-lammah.css (audit 2026-11-12 T12 + P6, lane landing-design): page placement for /lammah on top of /d2-pages.css.
   Tokens only. To add to the design system: «Hero» (copy column with one primary Button on the first screen, centred
   from 900px, start-aligned on phones) and «ExampleSplit» (deep band: heading column + Quiz column from 1100px). */
.lm-hero-sec{padding-block:var(--space-6) var(--space-7)}
/* the graph-paper ::before of .nb-paper paints over unpositioned children (the button showed the grid): lift the content */
.lm-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.lm-hero .nb-lm-mark{width:56px;height:56px}
.lm-hero .nb-sh{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--reading-max)}
.lm-hero .nb-sh{gap:var(--space-3)}
.lm-hero .nb-sh p{margin:0;font-size:16px;line-height:26px;color:var(--ink-secondary)}
.lm-hero .nb-lm-hl{white-space:nowrap}
.lm-hero-cta{align-self:flex-start}
@media (max-width:374.98px){.lm-hero h1.display{font-size:32px;line-height:44px}}
@media (min-width:900px){
  .lm-hero-sec{padding-block:var(--space-9)}
  .lm-hero .nb-lm-mark{width:72px;height:72px}
  .lm-hero .nb-sh p{font-size:18px;line-height:30px}
  .lm-hero{flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
  .lm-hero .nb-sh{align-items:center;max-width:760px}
  .lm-hero-cta{align-self:center}
}
@media (min-width:1600px){.lm-hero .nb-sh{max-width:880px}}
@media (min-width:1100px){
  .lm-ex{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);align-items:start}
  .lm-ex>.nb-sh{padding-top:var(--space-5)}
  .lm-ex>.lm-quiz{max-width:none}
}
html.pg-lammah #nb-footer{margin-top:0}
/* landscape phones (844x390): the action stays on the first screen */
@media (max-height:500px) and (orientation:landscape){.lm-hero .nb-lm-mark{display:none}.lm-hero-sec{padding-block:var(--space-5) var(--space-7)}}
/* Bulk 4 (design audit close-out, audit-4 lane): «ExampleSplit» heading column carries its one line, the existing لمّاح
   reading note (moved here from «كيف يشتغل لمّاح»), so the column under the h2 is not empty from 1100 to 2560. On the deep
   band it takes the band's secondary text (.sec-deep .nb-sh p) at body size, reading width. */
.lm-ex .lm-ex-note{margin:0;max-width:var(--reading-max);font-size:16px;line-height:26px}
@media (min-width:1100px){.lm-ex .lm-ex-note{font-size:18px;line-height:30px}}