/* Shared screenshot carousel (homepage + /tideline/), built by
   /assets/carousel.js into any element with data-shots-dir. */

.hero-phone {
    width: 270px;
    max-width: 76vw;
    aspect-ratio: 9 / 18;
    border-radius: 36px;
    border: 9px solid #000;
    background: #0d1117;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.hero-phone .carousel-inner,
.hero-phone .carousel-item {
    height: 100%;
}

.hero-phone .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Navigation arrows: big, bold, pure white on a dark disc, Bootstrap's
   default icons are thin and disappear against dark screenshots. */
.hero-phone .carousel-control-prev,
.hero-phone .carousel-control-next {
    width: 24%;
    opacity: 0.95;
}

.hero-phone .carousel-control-prev:hover,
.hero-phone .carousel-control-next:hover {
    opacity: 1;
}

.hero-phone .carousel-control-prev-icon,
.hero-phone .carousel-control-next-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(13, 17, 23, 0.10);
    background-size: 55% 55%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-phone .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2 4.5 8l6 6'/%3E%3C/svg%3E");
}

.hero-phone .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2l6 6-6 6'/%3E%3C/svg%3E");
}

.hero-phone .carousel-indicators {
    margin-bottom: 0.6rem;
}

.hero-phone .carousel-indicators button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
}