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

    /* ===== Brand var ===== */
:root { --brand:#fea64d; }

/* ===== Steps (left column) ===== */
.hiw-steps .hiw-step{
  display:flex; align-items:flex-start; gap:12px;
  border-left:3px solid transparent; padding-left:10px; border-radius:8px;
  transition:background .2s ease, border-color .2s ease;
}
.hiw-steps .hiw-step + .hiw-step{ margin-top:18px; }
.hiw-steps .hiw-step.active{ background:rgba(254,166,77,.10); border-left-color:var(--brand); }
.hiw-steps .hiw-step.active .hiw-icon{ background:var(--brand); color:#fff; box-shadow:none; }

.hiw-icon{
  width:42px; height:42px; border-radius:50%;
  background:rgba(254,166,77,.15); color:var(--brand);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(254,166,77,.25);
  flex:0 0 auto; transition:background .2s ease,color .2s ease;
}
.hiw-icon svg{ width:22px; height:22px; }

/* =========================================================
   DEVICE MOCKS — tighter integration + realistic layering
   ========================================================= */

/* Shared bezel container */
.hiw-device .bezel{
  position:relative; background:#000;
  /* softer outer shadow + subtle inner rim */
  box-shadow:
    0 12px 32px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.06);
  overflow:hidden;           /* keep everything clipped to rounded shape */
  isolation:isolate;         /* independent stacking context for overlays */
}

/* The "screen" area (carousel sits inside) */
.hiw-device .screen{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:inherit;      /* exact match to bezel’s inner radius */
  display:block;
  /* subtle inner vignette so edges blend into bezel */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),
              inset 0 0 20px rgba(0,0,0,.25);
}

/* Make the carousel content conform perfectly to the screen */
.hiw-device .carousel,
.hiw-device .carousel-inner,
.hiw-device .carousel-item{
  width:100%; height:100%;
  border-radius:inherit;
  overflow:hidden;
}
.hiw-device .carousel-item > img{ width:100%; height:100%; object-fit:cover; }

/* Minimal, embedded carousel chrome */
.hiw-device .carousel-control-prev,
.hiw-device .carousel-control-next{
  width:12%; opacity:.85;
}
.hiw-device .carousel-control-prev-icon,
.hiw-device .carousel-control-next-icon{
  filter:invert(1) grayscale(100%); opacity:.75;
}
.hiw-device .carousel-indicators{
  margin-bottom:8px;         /* bring dots inside the screen */
}
.hiw-device .carousel-indicators [data-bs-target]{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6);
}
.hiw-device .carousel-indicators .active{
  background:#fff;
}

/* ---------------- PHONE ---------------- */
.hiw-device.phone .bezel{
  width:300px; max-width:88vw;
  aspect-ratio:9 / 19.5;
  /* outer radius; inner screen radius will be computed below */
  border-radius:36px;
  /* ultra-tight inner padding to maximize screen */
  padding:3px;
  background:linear-gradient(#0b0d10,#000);
}

/* compute a slightly smaller screen radius than bezel (padding-aware) */
.hiw-device.phone .carousel-inner,
.hiw-device.phone .screen{
  border-radius: calc(36px - 6px);
}

/* notch that *cuts into* the screen area for realism */
.hiw-device.phone .notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:96px; height:16px; background:#000; z-index:3;
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* subtle glass glare on phone */
.hiw-device.phone .bezel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 40% 60%, rgba(255,255,255,.03));
  pointer-events:none; z-index:2;
}

/* ---------------- LAPTOP ---------------- */
.hiw-device.laptop .lid{
  width:600px; max-width:95vw;
  aspect-ratio:16 / 10;
  border-radius:14px; padding:6px;     /* tight bezel for more screen */
  background:linear-gradient(180deg,#1b2028,#0d0f13);
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  margin:0 auto; overflow:hidden; position:relative;
}

/* inner screen radius (bezel radius minus padding) */
.hiw-device.laptop .carousel-inner,
.hiw-device.laptop .screen{
  border-radius: calc(14px - 4px);
}

/* tiny webcam bump (optional) */
.hiw-device.laptop .lid::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background:#0c0f14; box-shadow:0 0 0 2px rgba(255,255,255,.06);
  z-index:3;
}

/* base/keyboard slab */
.hiw-device.laptop .base{
  width:640px; height:10px; margin:8px auto 0;
  background:linear-gradient(180deg,#9aa3ad,#6f7985);
  border-radius:0 0 12px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* ===== Layout helpers ===== */
.hiw-visual{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* Mobile: only phone, keep padding compact */
@media (max-width: 991.98px){
  .hiw-device.laptop{ display:none; }
  .howitworks{ padding-inline:16px; }
  .hiw-device.phone .bezel{ width:min(300px, 86vw); }
}