/* Shared homepage component. Artwork is separate from selectable live text. */
.feature-tiles {
  width: min(1752px, calc(100% - 40px));
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.feature-tile {
  position: relative;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 236px;
  min-width: 0;
  padding: 24px 18px 36px;
  overflow: hidden;
  border: 1px solid #e7e3e5;
  border-inline-start: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: #073e35;
  box-shadow: 0 3px 6px #19352a12, 0 8px 18px #19352a0d;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.feature-tile h2 {font: 700 26px/1.18 "Segoe UI", Tahoma, Arial, sans-serif; margin: 0; overflow-wrap: normal;}
.feature-tile p {font-size: 18px; line-height: 1.4; margin: 10px 0 0;}
.feature-picture {width: 100%; height: 156px; object-fit: contain; min-width: 0;}
.feature-arrow {position: absolute; inset-inline-end: 14px; bottom: 12px; width: 28px; height: 28px; color: var(--accent);}
[dir=rtl] .feature-arrow {transform: scaleX(-1);}
.feature-pair {--surface: #fff8f1; --accent: #c41d3b;}
.feature-pair h2 {font: italic 32px/1.2 Georgia, "Times New Roman", serif;}
.feature-messages {--surface: #f0eafa; --accent: #8051b3;}
.feature-messages .feature-picture {
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent), linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-composite: intersect;
}
.feature-messages p {color: #60388d;}
.feature-lottery {--surface: #fffaef; --accent: #b12a47; grid-template-columns: minmax(0, 1fr) 40%;}
.feature-lottery h2 {font-family: Georgia, "Times New Roman", serif; font-size: 27px;}
.feature-eyebrow {display: block; font-size: 12px; font-weight: 700; color: #8b5b15; margin-bottom: 8px;}
.feature-car {--surface: #d3131d; --accent: #76518e; display: block; padding: 20px 18px; color: #fff;}
.feature-car-heading {display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; position: relative; align-items: start; z-index: 1; background: #d3131d; padding-bottom: 8px;}
.feature-car h2 {font-size: 25px;}
.feature-car p {font-size: 17px; line-height: 1.3; margin-top: 7px;}
.feature-car .feature-arrow {color: white; z-index: 1;}
/* Reuse only the icon and landscape of the original screenshot, without its text. */
.feature-car-scene {position: absolute; bottom: -1px; left: -8%; width: 116%; aspect-ratio: 838/228; overflow: hidden; mask-image: linear-gradient(transparent, black 15%);}
.feature-car-scene img {position: absolute; max-width: none; width: 112.7685%; left: -6.4439%; top: -276.3158%; height: auto;}
.feature-car-icon {position: relative; width: 52px; aspect-ratio: 150/180; overflow: hidden; border-radius: 12px;}
.feature-car-icon img {position: absolute; max-width: none; width: 630%; left: -64%; top: -238.8889%; height: auto;}
[dir=rtl] .feature-tile h2 {font-family: Tahoma, Arial, sans-serif; line-height: 1.5;}
[dir=rtl] .feature-pair h2 {font-size: 29px; font-style: normal;}
@media (hover: hover) {
  .feature-tile:hover {transform:none; }
}
.feature-tile:active {transform:none;}
.feature-tile:focus-visible {outline: 3px solid #075746; outline-offset: 4px;}
@media (max-width: 1399px) {
  .feature-tiles {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 700px) {
  .feature-tiles {grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); gap: 16px; margin-top: 20px;}
  .feature-tile {height: 220px;}
}
@media (max-width: 374px) {
  .feature-tile {padding-inline: 12px; gap: 8px;}
  .feature-tile h2 {font-size: 23px;}
  .feature-pair h2 {font-size: 27px;}
  .feature-tile p {font-size: 16px;}
  .feature-car-heading {gap: 8px; grid-template-columns: 44px minmax(0, 1fr);}
  .feature-car-icon {width: 44px;}
}
@media (prefers-reduced-motion: reduce) {
  .feature-tile {transition: none;}
}