/* Styles of list/templates/list/welcome_carousel.html, moved out of its inline <style>. */

    :root {
      --brand: #fea64d;
      --ink: #f8f9fa;
    }

    body {
      background: #f4f5f7;
      margin: 0;
    }

    /* ===== Full-bleed section that hugs the left window edge ===== */
    .hero-wrap {
      width: 100%;
      margin: 0;
      padding: 48px 32px; /* small margin left & right */
    }

    /* ===== Hero Box (kept orange gradient, now full bleed on the left) ===== */
    .hero-box {
      background: linear-gradient(135deg, #fea64d 0%, #ffb977 40%, #ffddb5 100%);
      /*background: linear-gradient(to right, #FF6B6B 0%, #FF8A8A 40%, #FFDDb5 100%);*/
      color: #fff;
      border-radius: 24px;   /* rounded on all four corners */
      box-shadow: 0 10px 40px rgba(0,0,0,.10);
      padding: clamp(1.5rem, 2.5vw, 3rem) clamp(1rem, 2.5vw, 2rem);
    }

    /* Constrain max width but keep left flush */
    .hero-inner {
      max-width: 1280px;
      margin-left: 0;   /* stick to the left */
      margin-right: auto;
    }

    .hero-title { font-weight: 700; color: #fff; }
    .hero-sub   { color: rgba(255,255,255,.92); }

    /* ==========================================================
       PURE CSS DEVICE MOCKUPS (no Bootstrap interference)
       ========================================================== */
    /* Reset common element styles inside devices to avoid Bootstrap effects */
    .devices-scope figure { margin: 0; }
    .devices-scope img { display: block; max-width: none; } /* prevent BS img-fluid rules */

    .device {
      perspective: 1200px;
      /* Create a stacking context so shadows render consistently */
      isolation: isolate;
    }
    .device .bezel {
      position: relative;
      background: #000;
      box-shadow:
        0 10px 30px rgba(0,0,0,.5),
        inset 0 0 0 2px rgba(255,255,255,.06);
      transform: rotateX(0deg);
      transition: transform .4s ease, box-shadow .4s ease;
      will-change: transform, box-shadow;
    }
    .device:hover .bezel {
      transform: rotateX(6deg) rotateY(-6deg);
      box-shadow: 0 20px 50px rgba(0,0,0,.6);
    }
    .screen {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }

    /* ----- Phone (matches your preferred template look) ----- */
    .phone .bezel {
      width: clamp(240px, 22vw, 320px);
      aspect-ratio: 9 / 19.5;
      border-radius: 42px;
      padding: 12px;
      background: linear-gradient(#0b0d10, #000);
    }
    .phone .screen { border-radius: 30px; }
    .phone .notch {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 22px;
      background: #000;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
    }
    .phone .btn {
      position: absolute;
      top: 120px;
      width: 3px;
      height: 34px;
      background: #1b1f27;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
    }

    .phone .btn--left  { left: -6px; height: 62px; }
    .phone .btn--right { right: -6px; }
    /* prevent any Bootstrap styles from leaking in */
    .devices-scope .side-button {
    all: unset;               /* wipe inherited styles (safe in modern browsers) */
    position: absolute;
    display: block;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #333, #555);
    box-shadow: inset -1px 0 1px rgba(255,255,255,.15),
                inset  1px 0 1px rgba(0,0,0,.30);
    pointer-events: none;     /* purely decorative */
    }

    /* positions & sizes (feel free to tweak) */
    .phone .side-button--left  { left: -6px;  top: 100px; height: 60px; }
    .phone .side-button--right { right: -6px; top: 150px; height: 40px; }

    /* ----- Laptop (matches your template look) ----- */
    .laptop .lid {
      position: relative;
      width: clamp(380px, 34vw, 520px);
      aspect-ratio: 16 / 10;
      border-radius: 16px;
      background: linear-gradient(180deg,#1b2028,#0d0f13);
      box-shadow: 0 10px 30px rgba(0,0,0,.5),
                  inset 0 0 0 1px rgba(255,255,255,.06);
      padding: 14px;
    }
    .laptop .bezel {
      width: 100%; height: 100%;
      border-radius: 12px; background: #000;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .laptop .screen { border-radius: 10px; }
    .laptop .camera {
      position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
      width: 8px; height: 8px; background: #0c0f14; border-radius: 50%;
      box-shadow: 0 0 0 2px rgba(255,255,255,.06);
    }
    .laptop .base {
      width: calc(clamp(380px, 34vw, 520px) + 40px);
      height: 12px; margin: 10px auto 0;
      background: linear-gradient(180deg,#9aa3ad,#6f7985);
      border-radius: 0 0 14px 14px;
      box-shadow: 0 6px 20px rgba(0,0,0,.55);
    }

    /* ===== Right column device composition ===== */
    .devices-inline {
      display: flex;
      align-items: flex-end; /* bottom-align so laptop naturally sits lower */
      justify-content: flex-start;
      gap: clamp(16px, 2vw, 32px);
    }

    /* On large screens, show both. On small, show phone only */
    @media (max-width: 991.98px) {
      .devices-inline { justify-content: center; }
      .laptop-wrap { display: none; } /* hide laptop on mobile/tablet */
    }

    /* ===== Device alignment: phone left, laptop right ===== */
.devices-inline {
  position: relative;
  min-height: clamp(320px, 38vw, 520px);
  align-items: flex-end; /* align bases visually */
}

/* XL and up (≥1200px): show both devices */
@media (min-width: 1200px) {
  .devices-inline .device {
    position: absolute;
    transform-origin: bottom left;
    transition: transform 0.4s ease, left 0.4s ease, bottom 0.4s ease;
  }

  /* Phone — on the LEFT side */
  .devices-inline .device.phone {
    left: -60px;       /* from your tuned values */
    bottom: 16px;
    transform: scale(0.66);
    z-index: 2;        /* in front */
  }

  /* Laptop — on the RIGHT side */
  .devices-inline .device.laptop {
    left: 140px;       /* spacing from your tuned setup */
    bottom: 0;
    transform: scale(0.9);
    z-index: 1;        /* behind phone */
    display: block;
  }
}

/* XXL (≥1400px): slightly more spread */
@media (min-width: 1400px) {
  .devices-inline .device.phone {
    left: -70px;
    bottom: 20px;
    transform: scale(0.7);
  }
  .devices-inline .device.laptop {
    left: 180px;
    transform: scale(0.94);
  }
}

/* Hide laptop below XL (<1200px), phone centered */
@media (max-width: 1199.98px) {
  .devices-inline .device.laptop {
    display: none !important;
  }

  .devices-inline {
    min-height: auto;
    justify-content: center;
  }

  .devices-inline .device.phone {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}