/* Fonts settings */
body, p, .navbar, .brand, a, .td-name, td, button, input, select, textarea {
    font-family: "Roboto", "Helvetica", Arial, sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.title, .card-title, .info-title, .footer-brand, .footer-big h5, .footer-big h4, .media .media-heading {
    font-family: "Dosis", "Helvetica", Arial, sans-serif;
    font-weight: 600;
}

/* Common Styles */
.title {
    color: #111111;
}

.bg-gradient {
    background: linear-gradient(270deg, #4db6ac 0%, #00796b 100%);
}


.bg-gradient-light {
    /*background: linear-gradient(207deg, #f9f9f9 0%, #dadada 100%);*/
    background-color: #F5FAFD;
}

/* Header Section */
.aa-header {
    /*background-image: url("../images/home-image.jpg");*/
    background: linear-gradient(0deg, #4db6ac 0%, #009688 50%, #00796b 100%);

    position: relative;
    background-size: cover;
    min-height: 500px;
}

.aa-header .navbar .navbar-brand {
    font-size: 24px;
    font-family: "Dosis", "Helvetica", Arial, sans-serif;
    font-weight: 600;
    box-shadow: none;
    letter-spacing: 1px;
    opacity: 1;
}

.aa-header .aa-header-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.aa-header .aa-header-content h1 {
    letter-spacing: 1px;
}

.aa-header .aa-logo-img {
    padding-left: 10px;
    width: 8% !important;
}

@media (max-width: 992px) {

    .aa-header h1 {
        font-size: 38px;
    }

    .aa-header .aa-header-content img {
        padding-top: 40px;
    }

    .aa-header .aa-header-content li {
        font-size: 12px;
    }

    .aa-header .aa-logo-img {
        padding-left: 10px;
        width: 12% !important;
    }
}

@media (max-width: 768px) {
    .aa-header .aa-header-content img {
        margin-top: 2px !important;
        padding-top: none !important;
        padding-bottom: 20px;
    }
    .aa-header .aa-logo-img {
        padding-left: 10px;
        width: 10% !important;
    }

}



@media (max-width: 576px) {
    .aa-header {
        text-align: center;
    }
    .aa-header .aa-logo-img {
        display: block;
        padding-left: 10px;
        width: 56px !important;
    }
    #_name1 {
        margin-top: -25px;
    }

    .aa-header .navbar-brand {
        padding-right: 20px !important;
    }

    .aa-header .aa-header-content li {
        font-size: 10px;
    }
}

/* Body Section */
.aa-product-details .description {
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.aa-product-details .description .h4 {
    color: #111111;
    padding-bottom: 1.5rem;
}

.aa-product-details .icon {
    float: left;
    margin-top: 35px;
    margin-right: 60px;
    font-size: 3rem;
}

.aa-screenshots {
    background-color: #F5FAFD;
}

@media (max-width: 992px) {
    .aa-screenshots .carousel-inner .carousel-item img {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .aa-screenshots .carousel-inner .carousel-item img {
        height: 200px;
    }
}

@media (max-width: 400px) {
    .aa-screenshots .carousel-inner .carousel-item img {
        height: 150px;
    }
}

.aa-price-package .card {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px -1px;
}

.aa-price-package .aa-price {
    padding-bottom: 1.5rem;
    background-color: #F5FAFD;
}

.aa-price-package .aa-price .btn {
    width: 8rem;
}

.aa-price-package .aa-price .aa-price-section {
    padding: 25px 5px;
    background-color: white;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    font-size: 28px;
    font-family: "Dosis", "Helvetica", Arial, sans-serif;
    font-weight: 600;
}

.aa-price-package .aa-price .aa-price-section span {
    font-family: "Dosis", "Helvetica", Arial, sans-serif;
    font-weight: 600;
    font-size: 38px;
}

.aa-price-package .aa-price ul li {
    line-height: 3;
    border-bottom: 1px dashed #eee;
}

.aa-price-package .aa-price-active {
    background-color: white;
}

.aa-price-package .aa-price-active .btn {
    border: none;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.aa-price-package .text-small {
    font-size: 90%;
    line-height: 3;
    opacity: 0.75;
}

.aa-price-package .text-small:hover {
    opacity: 1;
}

.aa-testimonials-section .aa-testimonials {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.aa-testimonials-section .aa-testimonials img {
    border-radius: 100%;
    width: 96px;
    height: auto;
}

.aa-testimonials-section .aa-testimonials .aa-testimonials-body {
    background-color: #F5FAFD;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 10px -4px;
}

.aa-testimonials-section .aa-testimonials .h5 {
    color: #111111;
}

@media (max-width: 992px) {
    .aa-testimonials-section .aa-testimonials .aa-testimonials-body {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .aa-testimonials-section .aa-testimonials .aa-testimonials-body p {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .aa-testimonials-section .aa-testimonials .aa-testimonials-body {
        text-align: center;
    }

    .aa-testimonials-section .aa-testimonials .aa-testimonials-body {
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.aa-download-section i {
    color: #888;
}

.aa-download-section .aa-apple:hover i {
    color: #B4B0B0;
}

.aa-download-section .aa-android:hover i {
    color: #a4c639;
}

.aa-download-section .aa-windows:hover i {
    color: #0078d7;
}

.aa-download-section .aa-download-icon {
    padding-left: 40px;
}

@media (max-width: 992px) {
    .aa-download-section p {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    .aa-download-section p {
        font-size: 12px;
    }

    .aa-download-section .aa-download-icon {
        padding-left: 0px;
        text-align: center;
    }

    .aa-download-section .aa-download-icon-detail {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .aa-download-section p {
        font-size: 14px;
    }
}

/* Footer sectiom */
.footer-black {
    background-color: #252422;
    color: #DDDDDD;
}

.aa-footer a.credit {
    color: inherit;
    border-bottom: 1px dashed;
}


.download-button {
    text-transform: none !important;
    font-size: 1.2rem;
    margin-left: 20px;
}

.video-elegant {
    border: 2px solid #ccc; /* Adjust the border thickness and color as desired */
    border-radius: 10px; /* Adjust the corner radius for a rounded effect */
    overflow: hidden; /* Ensure the rounded corners apply to any video content */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for an elevated look */
}


.team-card {
    border: 1px solid #e0e0e0; /* Light border for separation */
    border-radius: 10px; /* Rounded corners for a modern look */
    overflow: hidden; /* Ensures that the card content fits within the rounded corners */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding-left: 30px;
}

.team-card:hover {
    transform: translateY(-5px); /* Slight lift on hover for interactivity */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Elevated shadow on hover */
}

.card-title a {
    color: inherit;
    text-decoration: none;
}

.card-title a:hover {
    text-decoration: underline;
}


.theme-color-text {
    color: #009688;
}

.nav-text-large {
    font-size: larger !important;
    font-weight: bolder;
}
.list-font-size{
    font-size: 16px;
}

#youtube-player {
    border: none!important;
    width: 440px;
    height: 782px;
}


@media (max-width: 768px) {
    #youtube-player {
        width: 400px; /* Approximately 9% smaller than 440px */
        height: 710px; /* Adjusted height to maintain aspect ratio */
    }
}

.aa-product-details {
    padding: 30px;
}

/*---------------------------------------------------------------------------*/
/* 1) Reduce spacing under the “Discover” heading (#features is your ID)      */
/*---------------------------------------------------------------------------*/
#features .text-center {
    margin-bottom: 1rem !important;    /* shrink the gap under the H2 wrapper */
}
#features .title {
    margin-bottom: 0.5rem !important;  /* shrink the gap under the H2 itself */
}

/*---------------------------------------------------------------------------*/
/* 2) Tighter feature cards: icons, titles & body copy                        */
/*---------------------------------------------------------------------------*/
.aa-product-details .description {
    margin-bottom: 0rem !important;    /* reduce space under each card */
}
.aa-product-details .icon {
    float: left;
    /*margin-top: 0.1rem !important;     !* less top‑padding on icon *!*/
    margin-right: 2rem !important;     /* less gap to text */
    font-size: 2rem !important;        /* scale icons down from 3rem */
    line-height: 1;                    /* tighten vertical rhythm */
}
.aa-product-details .description .h4 {
    padding-bottom: 0.5rem !important; /* shrink gap under each feature title */
    font-size: 1.4rem;                 /* slightly smaller */
}
.aa-product-details .description p {
    margin-bottom: 0.5rem !important;  /* shrink gap under body text */
}

/*---------------------------------------------------------------------------*/
/* 3) Even tighter on phones (<576px)                                         */
/*---------------------------------------------------------------------------*/
@media (max-width: 576px) {
    /* Heading */
    #features .text-center {
        margin-bottom: 0.75rem !important;
    }

    /* Icons */
    .aa-product-details .icon {
        font-size: 1.5rem !important;
        margin-top: 2rem !important;
        margin-right: 1rem !important;
    }

    /* Feature titles & text */
    .aa-product-details .description .h4 {
        /*padding-bottom: 0.25rem !important;*/
        font-size: 1.4rem;
    }
    .aa-product-details .description p {
        margin-bottom: 0rem !important;
        font-size: 0.9rem;
    }

    /* Optional: collapse column gutters even more */
    #features {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }


    /* Match the 16px text these icons label, and give them a fixed box so
       the labels start on one column. Previously 0.8rem - smaller than the
       text, which made them read as specks. */
    .aa-header .aa-header-content ul.list-unstyled li i.fa {
        font-size: 1rem;
        line-height: 1.5;
        width: 1.5em;
        text-align: center;
        opacity: .9;
    }

    /* Was padding-left:50px here and 25px on .download_buttons, which put the
       headline, the bullets and the store buttons on three different left
       edges. The list is now centred as a block with its text left-aligned,
       so everything shares one axis. */
    .aa-header .aa-header-content ul.list-unstyled:not(.hero-proof) {
        display: table;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }

    /* No navbar on the home page any more, so this is the only thing
       keeping the headline off the browser chrome. */
    .aa-header .aa-header-content {
        padding-top: 52px;
    }

    .download_buttons {
        padding-left: 0;
        justify-content: center;
    }
}

/* Increase header text, list text & icon sizes on large devices only */
@media (min-width: 992px) {
    /* “Your best mobile…” paragraph */
    .aa-header .aa-header-content p.lead {
        /* fs-5 is about 1.25rem by default; feel free to tweak */
        font-size: 1.75rem;
        line-height: 1.3;
    }

    /* List item text */
    .aa-header .aa-header-content ul.list-unstyled li .list-font-size {
        /* default was 16px; bump up to 18–20px as you like */
        font-size: 1.25rem;
    }

    /* Font‑Awesome icons in the list */
    .aa-header .aa-header-content ul.list-unstyled li i.fa {
        /* default around 1em (~16px), so scale up */
        font-size: 1.75rem;
        /* adjust vertical alignment if needed */
        line-height: 1;
    }
}


html, body {
    overflow-x: hidden;
}

/* Video Optimization Styles */
.lazy-video {
    background-color: #f0f0f0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-video[data-src] {
    opacity: 0.7;
}

.lazy-video:not([data-src]) {
    opacity: 1;
}

/* Video loading state */
.lazy-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(240, 240, 240, 0.2) 25%,
        rgba(240, 240, 240, 0.4) 50%,
        rgba(240, 240, 240, 0.2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    pointer-events: none;
}

.lazy-video:not([data-src])::before {
    display: none;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Video performance optimizations */
video {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /* Enable hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Smooth rendering */
    image-rendering: optimizeQuality;
    -webkit-image-rendering: optimizeQuality;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .lazy-video {
        animation: none;
    }
    
    @keyframes shimmer {
        0%, 100% {
            background-position: 0 0;
        }
    }
}

/* Video container optimization */
.ratio {
    position: relative;
    overflow: hidden;
}

/* Connection-based optimizations */
@media (max-width: 768px) {
    /* On mobile, further reduce video quality if needed */
    video {
        filter: contrast(0.95) brightness(1.05);
    }
}

/* For users on slow connections */
@media (max-width: 576px), (max-height: 667px) {
    .lazy-video {
        /* Could add additional optimizations for very small screens */
        filter: contrast(0.9) brightness(1.1);
    }
}

/* Hamburger toggler on dark header */
.aa-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
}
.aa-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile nav expanded dropdown */
@media (max-width: 768px) {
    .aa-header .navbar-collapse {
        background: rgba(0, 105, 95, 0.97);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        margin-top: 0.5rem;
    }
}

/* FAQ accordion */
.aa-faq-header {
    background: #fff;
    cursor: pointer;
    border-radius: 8px !important;
    padding: 1rem 1.25rem;
    user-select: none;
}
.aa-faq-header:hover {
    background: #f8f9fa;
}
.aa-faq-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aa-faq-icon {
    color: #009688;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 0.75rem;
}
.aa-faq-header[aria-expanded="true"] .aa-faq-icon {
    transform: rotate(180deg);
}

/* Back to top button */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #009688;
    color: #fff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background 0.2s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}
#back-to-top:hover {
    background: #00796b;
}

/* Footer links */
.aa-footer .aa-footer-link {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 0.875rem;
    margin: 0 0.6rem;
}
.aa-footer .aa-footer-link:hover {
    color: #dddddd;
}

/* ============================================================
   iPhone 17 Pro Max device frame (header banner)

   To update the banner, replace ONE file:
       images/app-screenshot.png

   Screenshot spec: a plain iPhone 17 Pro Max screenshot,
   1320 x 2868 px, with NO frame, shadow or rounded corners
   baked in. iOS already draws the Dynamic Island into the
   screenshot, so only the body, bezel, corners and side
   buttons are drawn in CSS below.
   ============================================================ */
.ios-device {
    --w: clamp(230px, 58vw, 300px);          /* device outer width  */
    --h: calc(var(--w) * 2.17273);           /* 2868 / 1320         */
    --bezel: calc(var(--w) * 0.026);
    --radius: calc(var(--w) * 0.165);
    --btn-w: calc(var(--w) * 0.011);

    box-sizing: border-box;
    position: relative;
    width: var(--w);
    height: var(--h);
    margin: 0 auto;
    padding: var(--bezel);
    border-radius: var(--radius);
    /* deep graphite aluminium rail */
    background: linear-gradient(145deg,
    #4a4d52 0%, #1c1e21 18%, #313438 50%, #17181a 82%, #45484d 100%);
    box-shadow: 0 0 0 calc(var(--w) * 0.004) #0c0d0e,
    inset 0 0 0 calc(var(--w) * 0.006) #55585e,
    0 calc(var(--w) * 0.09) calc(var(--w) * 0.16) rgba(0, 0, 0, .35);
}

.ios-device-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius) - var(--bezel));
    background: #fff;
}

/* The reset here is deliberate. `.aa-header .aa-header-content img` sets
   padding-top:40px and margin-top:2px !important; both outrank this rule on
   specificity and would be baked into the object-fit box, pushing the
   screenshot down inside the screen. Hence !important. */
.ios-device-screen > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    max-width: none;
    object-fit: cover;
    object-position: top center;
}

/* --- Slideshow -------------------------------------------------------
   Slides are stacked and crossfaded. Only .is-active is visible.
   With a single screenshot main.js does nothing, so the lone <img>
   just sits there as a static banner. */
.ios-device-screen > img.ios-shot {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .7s ease-in-out;
}

.ios-device-screen > img.ios-shot.is-active {
    opacity: 1;
}

.ios-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.ios-dots button {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.ios-dots button:hover {
    background: rgba(255, 255, 255, .85);
}

.ios-dots button[aria-current="true"] {
    background: #fff;
    transform: scale(1.32);
}

.ios-dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Honour reduced-motion: no crossfade, and main.js skips auto-advance. */
@media (prefers-reduced-motion: reduce) {
    .ios-device-screen > img.ios-shot {
        transition: none;
    }
}

/* Action button (left) + Camera Control (right, via box-shadow) */
.ios-device::before {
    content: "";
    position: absolute;
    left: calc(var(--btn-w) * -1);
    top: calc(var(--h) * 0.152);
    width: var(--btn-w);
    height: calc(var(--h) * 0.043);
    border-radius: calc(var(--btn-w) * 0.6);
    background: linear-gradient(90deg, #202225, #46494e);
    box-shadow: calc(var(--w) + var(--btn-w)) calc(var(--h) * 0.225) 0 0 #3a3d42;
}

/* Volume up (left) + Volume down + Side button (right), via box-shadow */
.ios-device::after {
    content: "";
    position: absolute;
    left: calc(var(--btn-w) * -1);
    top: calc(var(--h) * 0.212);
    width: var(--btn-w);
    height: calc(var(--h) * 0.065);
    border-radius: calc(var(--btn-w) * 0.6);
    background: linear-gradient(90deg, #202225, #46494e);
    box-shadow: 0 calc(var(--h) * 0.082) 0 0 #3a3d42,
    calc(var(--w) + var(--btn-w)) calc(var(--h) * 0.032) 0 0 #3a3d42;
}


/* ============================================================
   Feature showcase (#demo-video): tab strip + shared iPhone frame.
   Tabs and frame are built by scripts/main.js from .feature-group
   elements, so this only styles what JS produces.
   ============================================================ */
.feature-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 34px;
}

.feature-tab {
    padding: 9px 20px;
    border: 1px solid rgba(0, 95, 153, .22);
    border-radius: 999px;
    background: transparent;
    color: #17594d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.feature-tab:hover {
    background: rgba(23, 89, 77, .08);
}

.feature-tab[aria-selected="true"] {
    border-color: transparent;
    background: #17594d;
    color: #fff;
}

.feature-tab:focus-visible {
    outline: 2px solid #17594d;
    outline-offset: 2px;
}

.feature-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* On the light section background the banner's white dots would vanish. */
.feature-stage .ios-dots button {
    background: rgba(23, 89, 77, .45);
}

.feature-stage .ios-dots button:hover {
    background: rgba(23, 89, 77, .75);
}

.feature-stage .ios-dots button[aria-current="true"] {
    background: #17594d;
}

.feature-stage .ios-dots button:focus-visible {
    outline-color: #17594d;
}


/* ============================================================
   Carousel arrows (feature showcase only - the header banner is
   ambient and would compete with the App Store buttons).
   Arrows flank the phone rather than overlaying it, so they never
   read as part of the app's own UI.
   ============================================================ */
.ios-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ios-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(23, 89, 77, .2);
    border-radius: 50%;
    background: #fff;
    color: #17594d;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ios-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ios-arrow:hover {
    border-color: transparent;
    background: #17594d;
    color: #fff;
}

.ios-arrow:active {
    transform: scale(.94);
}

.ios-arrow:focus-visible {
    outline: 2px solid #17594d;
    outline-offset: 3px;
}

.ios-arrow[hidden] {
    display: none;
}

/* Tighter beside a 230px phone on small screens. */
@media (max-width: 480px) {
    .ios-carousel {
        gap: 6px;
    }

    .ios-arrow {
        width: 38px;
        height: 38px;
    }

    .ios-arrow svg {
        width: 19px;
        height: 19px;
    }
}


/* ============================================================
   Store ratings + real review cards (#reviews)

   Figures are hardcoded from App Store Connect / Play Console on
   purpose. The public iTunes lookup API returns PER-STOREFRONT
   numbers (US alone reports ~180 of the 1,900 total), so a live
   fetch would badly understate the real rating count.
   To refresh: edit the numbers in index.html - the bar widths are
   inline percentages next to their counts.
   ============================================================ */
.store-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: 26px 30px;
    border: 1px solid rgba(23, 89, 77, .14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}

.store-rating-score {
    flex: 0 0 auto;
    text-align: center;
    min-width: 130px;
}

.store-rating-score .score {
    display: block;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: #17594d;
}

.store-rating-score .out-of {
    display: block;
    margin-top: 2px;
    font-size: .85rem;
    color: #6c757d;
}

.store-rating-stars {
    margin-top: 8px;
    color: #f4b942;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.store-rating-bars {
    flex: 1 1 260px;
    min-width: 240px;
}

.store-rating-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: .82rem;
    color: #6c757d;
}

.store-rating-bar .label {
    flex: 0 0 auto;
    width: 46px;
    color: #f4b942;
    letter-spacing: 1px;
    text-align: right;
}

.store-rating-bar .track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: rgba(23, 89, 77, .1);
    overflow: hidden;
}

.store-rating-bar .fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #17594d;
}

.store-rating-bar .count {
    flex: 0 0 auto;
    width: 52px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.store-rating-meta {
    flex: 1 1 100%;
    margin: 0;
    padding-top: 4px;
    font-size: .88rem;
    color: #6c757d;
}

.store-rating-meta a {
    color: #17594d;
    font-weight: 600;
}

.review-card {
    height: 100%;
    padding: 22px;
    border: 1px solid rgba(23, 89, 77, .12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.review-card .stars {
    margin-bottom: 8px;
    color: #f4b942;
    font-size: 1.05rem;
    letter-spacing: 1px;
}

.review-card h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #17594d;
}

.review-card blockquote {
    margin: 0 0 14px;
    font-size: .94rem;
    line-height: 1.55;
    color: #555;
}

.review-card footer {
    font-size: .82rem;
    color: #6c757d;
}

.review-card footer .who {
    font-weight: 600;
    color: #333;
}

@media (max-width: 575px) {
    .store-rating {
        gap: 20px;
        padding: 22px 18px;
    }

    .store-rating-score .score {
        font-size: 2.8rem;
    }
}


/* On phones the header mockup and the feature showcase are two phone
   frames within two screens of each other, and the showcase one is far
   more useful. Hide the header mockup below md: the hero drops from
   ~999px to ~500px and the showcase tabs land inside the first screen.
   scripts/main.js also skips building the banner slideshow at this width,
   so the screenshots are never downloaded on mobile. */
@media (max-width: 767.98px) {
    .aa-header .ios-device,
    .aa-header .ios-dots {
        display: none;
    }
}


/* ============================================================
   Hero proof strip - the real store figures, above the fold.
   Keep these in sync with #reviews and the schema.org
   aggregateRating in index.html.
   ============================================================ */
.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    margin: 22px 0 0;
    padding: 0;
}

.hero-proof li {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hero-proof strong {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hero-proof .star {
    margin-left: 2px;
    font-size: 1rem;
    color: #ffd35c;
}

.hero-proof span {
    font-size: .72rem;
    opacity: .82;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (min-width: 768px) {
    .hero-proof {
        justify-content: flex-start;
        gap: 10px 34px;
    }
}


/* ============================================================
   Mobile hero: breathing room at the edges, and tighter vertical
   rhythm so more of the page fits the first screen.
   ============================================================ */
@media (max-width: 767.98px) {
    /* The navbar container had padding:0, so the brand mark sat at x=0 and
       the toggler's edge at x=100vw, while every element below starts at
       16px. Put all three on the same gutter. */
    .aa-header .navbar > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .aa-header .aa-logo-img {
        padding-left: 0 !important;
    }

    /* Tighten the stack: was 16/24/24/22 between blocks. */
    .aa-header .aa-header-content h1 {
        margin-bottom: .5rem !important;
    }

    .aa-header .aa-header-content p.lead {
        margin-bottom: 1rem !important;
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .aa-header .aa-header-content ul.list-unstyled:not(.hero-proof) {
        margin-bottom: 1rem !important;
    }

    .aa-header .aa-header-content ul.list-unstyled:not(.hero-proof) li {
        margin-bottom: .25rem !important;
    }

    /* me-3 on the first badge is a Bootstrap 5 class on a Bootstrap 4 build,
       so it never applied - the gap here is deliberate. */
    .download_buttons {
        gap: 12px;
    }

    .download_buttons a:first-child img {
        max-width: 148px !important;
    }

    .download_buttons a:last-child img {
        max-width: 197px !important;
    }

    .hero-proof {
        margin-top: 16px;
    }
}


/* ============================================================
   Team cards on mobile.
   The columns are col-md-5 / col-md-7, so below md they stack and the
   photo goes full-width - two people cost 1810px, over two screens.
   Below md they become a compact row: circular avatar left, details
   right. Desktop is untouched.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Paper Kit's .section adds 70px top and bottom, and the container's
       own padding stacked on top of it - 204px of this section was padding
       alone. Collapse the outer one and keep a single modest inner gutter. */
    #team.section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #team .container {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    #team h2.title {
        font-size: 1.6rem;
        margin-bottom: .4rem !important;
    }

    #team > .container > .text-center p {
        font-size: .88rem;
        margin-bottom: 0;
    }

    /* Last card's own margin doubles up with the container padding. */
    #team .row > .col-md-6:last-child {
        margin-bottom: 0 !important;
    }

    #team > .container > .text-center {
        margin-bottom: 1.5rem !important;
    }

    #team .col-md-6 {
        margin-bottom: .75rem !important;
    }

    #team .team-card {
        padding: .85rem !important;
    }

    /* Top-align so the avatar sits beside the name, not floating
       mid-card below it (.align-items-center in the markup wins otherwise). */
    #team .team-card > .row {
        flex-wrap: nowrap;
        align-items: flex-start !important;
    }

    /* The image column - no col-* class applies below md, so pin it. */
    #team .team-card > .row > div:first-child {
        flex: 0 0 76px;
        max-width: 76px;
    }

    /* !important: the markup carries Bootstrap's .rounded-left, which
       otherwise wins and yields "4px 50% 50% 4px" instead of a circle. */
    #team .team-card img {
        width: 76px;
        height: 76px;
        object-fit: cover;
        object-position: top center;
        border-radius: 50% !important;
    }

    #team .team-card > .row > div:last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    #team .team-card .card-body {
        padding: 0 0 0 .9rem;
    }

    #team .team-card .card-title {
        margin-bottom: .15rem;
        font-size: 1rem;
    }

    #team .team-card .card-text {
        font-size: .82rem;
        line-height: 1.35;
        margin-bottom: .1rem !important;
    }

    /* The rule between role and app credit is noise at this size. */
    #team .team-card hr {
        display: none;
    }

    #team .team-card .mt-3 {
        margin-top: .5rem !important;
    }

    #team .team-card .btn-sm {
        padding: .15rem .55rem;
        font-size: .74rem;
    }

    /* fa-linkedin carries me-1, a Bootstrap 5 class that does nothing here. */
    #team .team-card .btn-sm .fa {
        margin-right: 5px;
    }
}


/* ============================================================
   Feature subpage navbar.
   The shared .navbar-transparent is transparent with white links, which
   is fine over a hero and unreadable everywhere else - past the hero the
   background behind it is white, so it was white-on-white for the whole
   length of the page. This one is solid.
   ============================================================ */
.page-nav {
    background: #17594d;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .12);
}

.page-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-weight: 700;
}

.page-nav .navbar-brand img {
    width: 34px;
    height: auto;
}

.page-nav .nav-link {
    color: rgba(255, 255, 255, .82) !important;
    font-size: .95rem;
}

.page-nav .nav-link:hover,
.page-nav .nav-link:focus {
    color: #fff !important;
}

.page-nav .nav-link[aria-current="page"] {
    color: #fff !important;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .75);
}

.page-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, .4);
}

@media (max-width: 767.98px) {
    .page-nav .navbar-collapse {
        padding-bottom: .5rem;
    }
}


/* With the home page navbar removed, nothing above the hero content is
   holding it off the top of the window on tablet and desktop; the mobile
   rule only covers phones. */
@media (min-width: 768px) {
    .aa-header .aa-header-content {
        padding-top: 46px;
    }
}


/* ============================================================
   Blog cards on mobile.
   Eight full-width image cards cost 1975px - over two screens - to list
   eight links. Below md they become compact rows: square thumbnail left,
   title and a two-line summary right, the same shape as the team cards.
   Desktop keeps the full image cards.
   ============================================================ */
@media (max-width: 767.98px) {
    #blogs .card {
        flex-direction: row;
        align-items: center;
        padding: .6rem;
    }

    #blogs .card picture {
        flex: 0 0 84px;
        max-width: 84px;
    }

    #blogs .card .card-img-top {
        width: 84px;
        height: 84px;
        object-fit: cover;
        border-radius: 10px;
    }

    #blogs .card .card-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 0 0 .85rem;
    }

    #blogs .card .card-title {
        margin-bottom: .2rem;
        font-size: .96rem;
        line-height: 1.25;
    }

    /* Two lines is enough to say what the post is; the title carries it. */
    #blogs .card .card-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
        font-size: .8rem;
        line-height: 1.35;
    }

    #blogs .row > [class*="col-"] {
        margin-bottom: .6rem !important;
    }
}


/* ============================================================
   Team section on tablet and desktop.
   Two developer bios cost 750px against 442px for the six-card feature
   grid, 260px of it padding: Paper Kit's .section adds 70px top and
   bottom and the container's 48px stacked on top. Same fix as mobile,
   plus the compact avatar-left card so two people do not outweigh the
   feature grid.
   ============================================================ */
@media (min-width: 768px) {
    #team.section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #team .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    #team > .container > .text-center {
        margin-bottom: 2rem !important;
    }

    #team .team-card {
        padding: 1.1rem !important;
    }

    #team .team-card > .row {
        flex-wrap: nowrap;
        align-items: flex-start !important;
    }

    #team .team-card > .row > div:first-child {
        flex: 0 0 104px;
        max-width: 104px;
    }

    /* .rounded-left in the markup would otherwise win and give an
       asymmetric radius instead of a circle. */
    #team .team-card img {
        width: 104px;
        height: 104px;
        object-fit: cover;
        object-position: top center;
        border-radius: 50% !important;
    }

    #team .team-card > .row > div:last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    #team .team-card .card-body {
        padding: 0 0 0 1.1rem;
    }

    #team .team-card .card-title {
        margin-bottom: .2rem;
    }

    #team .team-card .card-text {
        margin-bottom: .15rem !important;
        font-size: .9rem;
    }

    #team .team-card hr {
        display: none;
    }

    #team .team-card .mt-3 {
        margin-top: .6rem !important;
    }

    #team .col-md-6 {
        margin-bottom: 0 !important;
    }
}