/* The laurel "Downloaded 3,200+ times" (owner: train agent), in the hero under Download and in
   the pricing. Two open pixel branches (build/site/tools/gen-laurel.mjs, one texel per cell,
   a small hero size and a pricing size, never scaled between them) flank real text; the
   branches are aria-hidden spans. The number has one source, #downloadCount in the pricing
   (laurel.js copies it into the hero). Lit from the upper right, like both scenes. */
.lr{display:inline-flex;align-items:center;gap:calc(var(--cell) * 2)}
.lr-l,.lr-r{flex:none;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}

/* Hero: one caption line between the branches. */
.lr-hero .lr-l,.lr-hero .lr-r{width:calc(9 * var(--cell));height:calc(15 * var(--cell))}
.lr-hero .lr-l{background-image:url(assets/laurel/hero-l-2d8cbf5668.webp)}
.lr-hero .lr-r{background-image:url(assets/laurel/hero-r-0e0097d926.webp)}
.lr-hero .lr-t{font-size:14.5px;line-height:1.3;color:var(--tx2);white-space:nowrap}
.lr-hero .lr-t b{font-weight:650;color:var(--tx)}

/* Pricing: two lines, the number large. The art loads with the section (.is-near). */
.lr-price{gap:calc(var(--cell) * 3)}
.lr-price .lr-l,.lr-price .lr-r{width:calc(14 * var(--cell));height:calc(26 * var(--cell))}
.is-near .lr-price .lr-l{background-image:url(assets/laurel/price-l-aa42245abc.webp)}
.is-near .lr-price .lr-r{background-image:url(assets/laurel/price-r-a645d6c17a.webp)}
@media (scripting:none){
  .lr-price .lr-l{background-image:url(assets/laurel/price-l-aa42245abc.webp)}
  .lr-price .lr-r{background-image:url(assets/laurel/price-r-a645d6c17a.webp)}
}
.lr-price .lr-t{display:block;line-height:1.15;color:var(--tx2);font-size:15px;white-space:nowrap}
.lr-price .lr-k:first-child{display:block;font-size:14px;margin-bottom:2px}
.lr-price data{font-size:26px;font-weight:700;letter-spacing:-.035em;color:var(--tx)}

@media (max-width:759px),(max-aspect-ratio:4/5){
  /* The hero's call to action on the desk front gets the laurel's row: two more cells of
     room (SECTIONS.md allows --cta-row up to 86) and tighter gaps around the laurel. */
  .hero{--cta-row:86}
  .hero .laurel-slot{margin-top:8px}
  .hero .laurel-slot+.hr-slot{margin-top:6px}
  .lr-hero .lr-t{font-size:13.5px}
  .lr-price data{font-size:23px}
  .lr-price .lr-t{font-size:14px}
  .lr-price .lr-k:first-child{font-size:13px}
}
@media (min-width:1680px) and (min-height:960px) and (min-aspect-ratio:4/5){
  .lr-hero .lr-t{font-size:16px}
}