/* Copyright (c) 2026 Macleod Labs FZ-LLC. Proprietary and confidential. */
/* The landing page as a course page (index.html, js/landing.mjs, config/pages.yaml landing): the background behind the
   teaser, per layout, and the course sections under the run. The background is decoration: it is absolutely placed,
   so it never takes or changes layout space, and the page reads the same without it. */
.lbg{position:absolute;z-index:-1;overflow:hidden;pointer-events:none;background:var(--ground)}
.lbg picture,.lbg img,.lbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lbg::after{content:"";position:absolute;inset:0}
/* Both themes' pictures are on the page; the theme shows one (no flash on a switch). */
:root:not([data-theme="dark"]) .lbg picture[data-theme="dark"],:root[data-theme="dark"] .lbg picture[data-theme="light"]{display:none}

/* ---------- wash (a, b): the header and the top of the page, under a wash of the theme ground ---------- */
/* The picture's detail (the engine) is on the left and its right side is clear: the hero text sits on the right. The
   wash is light over the engine, strong on the right and under the header, and fades to the ground at the bottom, so
   the caption and the diagram sit on the plain page. Text over it is held to WCAG AA by landing-check. */
body[data-layout="wash"] .lbg{top:0;left:0;right:0;height:min(100svh,960px);
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
body[data-layout="wash"] .lbg::after{background:
  linear-gradient(180deg,color-mix(in srgb,var(--ground) 70%,transparent) 0,color-mix(in srgb,var(--ground) 70%,transparent) 100px,transparent 180px),
  linear-gradient(90deg,color-mix(in srgb,var(--ground) 30%,transparent) 0,color-mix(in srgb,var(--ground) 45%,transparent) 40%,color-mix(in srgb,var(--ground) 82%,transparent) 58%,color-mix(in srgb,var(--ground) 86%,transparent) 100%)}
body[data-layout="wash"] .lbg img{object-position:0% 35%}
/* Phone: the header and title span the whole width, so the wash is even across it. */
@media (max-width:820px){ body[data-layout="wash"] .lbg::after{background:color-mix(in srgb,var(--ground) 90%,transparent)} }
body[data-layout] .hero{background:none;border-bottom-color:transparent}
/* the diagram's housing and the prompt line keep a solid ground over the picture */
body[data-layout] .home-run .housing{background-color:var(--ground)}

/* ---------- panel (c): the hero is a dark panel carrying the picture, the run below it on the plain page ---------- */
/* The panel always uses the dark tokens, whatever the theme, so its text reads on the scrim. It hangs past the page's
   left edge by its padding, so its text lines up with the brand and the other variants' text. */
body[data-layout="panel"] .home-run .hcol{
  --ground:#0A0B0D; --paper:#131519; --ink:#ECEEF2; --muted:#B4BAC6; --rule:#3A3F48;
  --amber:#F2B23A; --live:#F2B23A; --live-soft:#2A2210;
  position:relative;isolation:isolate;color:var(--ink);background:var(--ground);border-radius:14px;overflow:hidden;padding:12px 24px;margin:0 -24px 6px}
body[data-layout="panel"] .home-run .hcol .lbg{inset:0}
body[data-layout="panel"] .home-run .hcol .lbg img{object-position:0% 45%}
body[data-layout="panel"] .home-run .hcol .lbg::after{background:linear-gradient(90deg,rgba(10,11,13,.1),rgba(10,11,13,.5) 22%,rgba(10,11,13,.9) 36%,rgba(10,11,13,.92))}
/* Phone: the panel runs edge to edge. */
@media (max-width:820px){
  body[data-layout="panel"] .home-run .hcol{border-radius:0;margin:-2px calc(-1 * var(--gut)) 0;padding:8px var(--gut) 4px}
  body[data-layout="panel"] .home-run .eh1{font-size:22px}
  body[data-layout="panel"] .home-run .hcol .lbg::after{background:rgba(10,11,13,.8)}
  body[data-layout="panel"] .home-run .cut{margin-top:4px}
}

/* ---------- the course, under the run ---------- */
.course{padding:40px 0 40px}
.course .wrap{display:grid;gap:64px}
.course h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.04;letter-spacing:-.025em;margin:0 0 10px}
.c-lede{margin:0 0 24px;max-width:60ch;color:var(--muted);font-size:17px}
/* what it covers: the pages, two to four across, each its name (a link) and the line that says why it exists */
.c-pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 32px}
.c-pages h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 4px}
.c-pages h3 a{color:var(--ink);text-decoration-thickness:2px;text-decoration-color:var(--amber);text-underline-offset:4px}
.c-pages h3 a:hover{color:var(--live)}
.c-pages p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.c-pages .soon h3{color:var(--muted)}
.c-pages .tab-chip{font:500 10px/1.3 var(--mono);font-style:normal;color:var(--live);background:var(--live-soft);border-radius:3px;padding:1px 4px;margin-left:8px;vertical-align:4px}
/* how it is taught: the steps in order, drawn like the engine's own diagram (a housing of boxes on one line) */
.c-steps{list-style:none;counter-reset:step;margin:8px 0 0;padding:22px 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;
  border:2px solid var(--ink);border-radius:16px;background:var(--ground) repeating-linear-gradient(135deg,var(--rule) 0 1.5px,transparent 1.5px 7px)}
.c-steps::before{content:"";position:absolute;left:18px;right:18px;top:50%;border-top:2px solid var(--ink);z-index:0}
.c-steps li{counter-increment:step;position:relative;z-index:1;background:var(--paper);border:1px solid var(--ink);border-radius:8px;padding:14px 14px 16px;font-size:15px;line-height:1.45}
.c-steps li::before{content:counter(step);display:block;font:700 34px/1 var(--display);color:var(--live);margin-bottom:8px}
/* who it is for */
.c-audbody{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px 40px;align-items:start}
.c-audbody .c-lede{font-size:20px;line-height:1.4;color:var(--ink);margin:0}
.c-audbody ul{margin:0;padding-left:1.1em;font-size:16px;color:var(--muted)}
.c-audbody li{margin:0 0 6px}
.c-start{margin-top:28px;font-size:17px;min-height:48px;padding:0 26px}
@media (max-width:1000px){ .c-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .c-steps::before{display:none} }
@media (max-width:820px){
  .course{padding:44px 0 28px}
  .course .wrap{gap:44px}
  .c-steps{grid-template-columns:minmax(0,1fr);padding:14px}
  .c-audbody{grid-template-columns:minmax(0,1fr)}
  .c-audbody .c-lede{font-size:18px}
}
.embed .lbg,.embed .course{display:none}