@media only screen and (max-width: 991px) {
    :root {
        --margin-inline: 0.7rem;
        --navbar-height: 68px;
    }

    .section_area {
        padding: 5rem 0;
    }

    .section_title {
        margin-bottom: 2.5rem;
    }

    /* Navbar */
    .menu_toggle {
        display: inline-block;
    }

    .lg-none {
        display: inline-flex !important;
    }

    .app_navbar_links {
        position: fixed;
        top: var(--navbar-height);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: 1rem 1rem 1.5rem;
        background: rgba(41, 41, 41, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border-color);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .3s ease, transform .3s var(--ease-out), visibility .3s;
    }

    .menu_open .app_navbar_links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .menu_open .app_navbar {
        background: rgba(41, 41, 41, 0.97);
        border-bottom-color: var(--border-color);
    }

    .app_navbar_links a:not(.btn_main) {
        padding: .9rem 1rem;
        border-radius: var(--radius-sm);
        font-size: 1.05rem;
    }

    .app_navbar_links .btn_main {
        margin-top: .8rem;
        padding: .9rem;
    }

    .mobile_languages {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        width: 100%;
        margin-top: .6rem;
        padding: 1rem 1rem .2rem;
        border-top: 1px solid var(--border-color);
    }

    .mobile_languages > span {
        color: var(--text-muted);
        font-size: .85rem;
    }

    .mobile_languages_list {
        display: flex;
        gap: .4rem;
    }

    .app_navbar_links .mobile_languages_list a {
        flex: 1;
        padding: .6rem;
        border-radius: 100px;
        border: 1px solid var(--border-color-strong) !important;
        color: var(--text-paragraph);
        font-size: .92rem;
        text-align: center;
    }

    .app_navbar_links .mobile_languages_list a.active {
        background: var(--main-color);
        border-color: var(--main-color) !important;
        color: #1c1c1c;
    }

    /* Hero */
    .hero_area {
        padding: calc(var(--navbar-height) + 3rem) 0 4rem;
    }

    .hero_inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    /* Pinned stories (A day + How it works): same as desktop, stacked in one screen */
    .day_area,
    .setup_area {
        padding-top: 5rem;
    }

    .story_sticky {
        align-items: flex-start;
        padding: calc(var(--navbar-height) + .9rem) 0 1rem;
    }

    .story_inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.2rem;
    }

    .story_reverse .story_phone {
        order: 0;
    }

    .story_text {
        display: flex;
        flex-direction: column;
    }

    .story_counter,
    .day_arc,
    .story_scroll_hint,
    .moment_request,
    .moment_card_mobile,
    .story_phone_status,
    .story_phone_app,
    .story_phone_input,
    .setup_progress {
        display: none;
    }

    /* progress as story segments that fill with the scroll */
    .story_rail {
        order: -1;
        gap: 4px;
        max-width: none;
        margin: 0 0 1.2rem;
        padding: 0;
    }

    .story_rail::before,
    .story_rail_fill {
        display: none;
    }

    .story_rail_tick {
        flex: 1;
        height: 3px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.12);
    }

    .story_rail_tick span {
        display: none;
    }

    .story_rail_tick::before,
    .story_rail_tick.active::before {
        top: 0;
        left: 0;
        width: calc(clamp(0, var(--aw-progress, 0) * var(--moments, 1) - var(--i, 0), 1) * 100%);
        height: 100%;
        margin: 0;
        border-radius: 0;
        background: var(--main-color);
        transform: none;
    }

    html[dir="rtl"] .story_rail_tick::before {
        left: auto;
        right: 0;
    }

    .moment_head {
        gap: .9rem;
    }

    .icon_tile {
        width: 56px;
        height: 56px;
        border-radius: 18px;
    }

    .icon_tile .icon {
        width: 28px;
        height: 28px;
    }

    .moment_time {
        font-size: 2.7rem;
    }

    .moment_label {
        margin-top: .9rem;
        font-size: .85rem;
    }

    .story_moment h3 {
        margin-top: .4rem;
        font-size: 1.6rem;
    }

    .story_moment > p {
        margin-top: .5rem;
        font-size: .93rem;
        line-height: 1.5;
    }

    /* the phone becomes a plain stage under the text */
    .story_phone {
        display: block;
    }

    .story_phone_frame {
        width: 100%;
        height: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .story_screen {
        gap: .6rem;
        padding-top: 0;
    }

    .screen_request {
        font-size: .84rem;
    }

    .story_phone .stage_card,
    .story_phone .setup_card {
        padding: 1rem;
        border-radius: 18px;
        background: #2d2d2d;
        border: 1px solid var(--border-color);
    }

    /* Business: index becomes story segments, the window fills the rest of the screen */
    .biz_area {
        padding-top: 5rem;
    }

    .biz_inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
        height: 100%;
    }

    .biz_index {
        flex-direction: row;
        gap: 4px;
        margin: 0 0 1rem;
    }

    .biz_index li {
        flex: 1;
    }

    .biz_index_item {
        height: 3px;
        padding: 0;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.12);
        font-size: 0;
    }

    .biz_index_item .soon_pill,
    .biz_index_item::before {
        display: none;
    }

    .biz_index_item::after {
        width: calc(clamp(0, var(--aw-progress, 0) * var(--moments, 1) - var(--i, 0), 1) * 100%);
        height: 100%;
    }

    .biz_caption h3 {
        font-size: 1.5rem;
    }

    .biz_caption > p {
        margin-top: .5rem;
        font-size: .92rem;
    }

    .biz_caption .moment_request {
        display: none;
    }

    .biz_deck {
        flex: 0 1 480px;
        min-height: 0;
        height: auto;
    }

    .biz_card {
        height: calc(100% - 52px);
        padding: 1.1rem;
        border-radius: 22px;
    }

    .biz_card[data-pos="1"] {
        transform: translate3d(0, 22px, 0) scale(.95);
    }

    .biz_card[data-pos="2"] {
        transform: translate3d(0, 42px, 0) scale(.9);
    }

    .biz_card_head {
        margin-bottom: .9rem;
        padding-bottom: .8rem;
    }

    /* Professions: same pinned horizontal scroll as desktop */
    .professions_sticky {
        justify-content: flex-start;
        gap: 1.3rem;
        padding: calc(var(--navbar-height) + 1rem) 0 1rem;
    }

    .professions_head {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    .professions_head h2 {
        margin-top: .6rem;
        font-size: 1.75rem;
    }

    .professions_head p {
        display: none;
    }

    .professions_track {
        gap: .8rem;
        padding-inline: 1rem;
    }

    .profession_card {
        width: 84vw;
        min-height: 0;
        padding: 1.4rem;
        border-radius: 26px;
    }

    .profession_card h3 {
        margin-top: 1.2rem;
        font-size: 1.8rem;
    }

    .profession_requests {
        margin-top: 1.1rem;
    }

    .profession_requests li {
        padding: .7rem 0;
        font-size: .9rem;
    }

    /* Control */
    .control_layout {
        grid-template-columns: 1fr;
    }

    .control_layout {
        gap: 3rem;
    }

    /* Footer */
    .app_footer_top {
        flex-direction: column;
    }

    .app_footer_links {
        flex-wrap: wrap;
        gap: 2.5rem 3.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .sm-none {
        display: none !important;
    }

    .control_points {
        grid-template-columns: 1fr;
    }

    /* Integrations orbit on small screens */
    .integrations_sticky {
        --R: min(150px, 37vw);
    }

    .orbit {
        width: calc(var(--R) * 2 + 60px);
        height: calc(var(--R) * 2 + 60px);
    }

    .orbit_core {
        width: 76px;
        height: 76px;
        border-radius: 24px;
    }

    .orbit_core img {
        width: 28px;
        height: auto;
    }

    .orbit_tile {
        top: -23px;
        left: -23px;
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .orbit_tile .icon {
        width: 21px;
        height: 21px;
    }

    .orbit_label {
        display: none;
    }

    .integrations_note {
        max-width: 300px;
        font-size: .85rem;
        text-align: center;
    }

    .cta_box {
        padding: 3.5rem 1.4rem;
        border-radius: var(--radius-lg);
    }
}

@media only screen and (max-width: 767px) {
    /* Auth modal becomes a bottom sheet */
    .auth_modal .modal-dialog {
        display: flex;
        align-items: flex-end;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .auth_modal.fade .modal-dialog {
        transform: translate3d(0, 100%, 0);
    }

    .auth_modal.show .modal-dialog {
        transform: none;
    }

    .auth_modal .modal-content {
        border-radius: 26px 26px 0 0;
        border-bottom: none;
    }

    .auth_grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth_visual {
        padding: 1.4rem 1.25rem 1.2rem;
        border-inline-end: none;
        border-bottom: 1px solid var(--border-color);
    }

    .auth_visual_title {
        margin-top: 1rem;
        font-size: 1.45rem;
    }

    .auth_visual_notifications,
    .auth_visual_trust {
        display: none;
    }

    .auth_panel {
        padding: 1.6rem 1.25rem 2rem;
    }

    .auth_title {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 575px) {
    .container {
        padding-inline: 1rem;
    }

    .hero_area {
        padding-top: calc(var(--navbar-height) + 2.5rem);
    }

    .hero_sub {
        font-size: 1.05rem;
    }

    .lock_screen {
        height: 600px;
    }

    .lock_time {
        font-size: 4.6rem;
    }

    .stage_card {
        padding: 1.05rem;
    }

    .reminder_time {
        font-size: 3rem;
    }

    .briefing_stats {
        gap: .4rem;
    }

    .briefing_stat {
        padding: .7rem;
    }
}

/* Short phones: keep the pinned stories inside one screen */
@media only screen and (max-width: 991px) and (max-height: 740px) {
    .story_moment > p,
    .biz_caption > p,
    .profession_tagline {
        display: none;
    }

    .story_sticky {
        padding-top: calc(var(--navbar-height) + .5rem);
    }

    .story_rail {
        margin-bottom: .8rem;
    }

    .story_inner {
        gap: .9rem;
    }

    .icon_tile {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .icon_tile .icon {
        width: 24px;
        height: 24px;
    }

    .moment_time {
        font-size: 2.3rem;
    }

    .moment_label {
        margin-top: .7rem;
    }

    .story_moment h3 {
        font-size: 1.4rem;
    }

    .story_screens {
        zoom: .86;
    }

    .professions_sticky {
        gap: 1rem;
        padding-top: calc(var(--navbar-height) + .6rem);
    }

    .professions_head h2 {
        font-size: 1.55rem;
    }

    .profession_card {
        padding: 1.2rem;
    }

    .profession_card .icon_tile.small {
        width: 60px;
        height: 60px;
        border-radius: 19px;
    }

    .profession_card h3 {
        margin-top: .8rem;
        font-size: 1.6rem;
    }

    .profession_requests li {
        padding: .55rem 0;
        font-size: .86rem;
    }
}