/* =========================================================
   FN+ HOME PAGE - MOBILE SCALING AND RESPONSIVE POLISH
   Load after fn-site.css and fn-app-tour.css
   ========================================================= */

@media (max-width: 991.98px) {
    body {
        -webkit-text-size-adjust: 100%;
    }

    .hero .container,
    .section .container,
    .stat-strip .container {
        max-width: 100%;
    }

    .feature-showcase-main > h3 {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }

    .showcase-visual {
        padding-left: 0;
        margin-top: 34px;
    }

    .showcase-image-card {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: auto;
        padding: 112px 0 54px;
    }

    .hero .container,
    .section .container,
    .stat-strip .container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .hero-copy {
        text-align: left;
    }

    .eyebrow {
        margin-bottom: 18px;
        padding: 7px 11px;
        font-size: .68rem;
        letter-spacing: .075em;
    }

    .hero h1 {
        max-width: 100%;
        margin: 0;
        font-size: clamp(2.65rem, 13vw, 3.7rem);
        line-height: .98;
        letter-spacing: -.05em;
    }

    .hero h1 .accent {
        display: inline;
    }

    .hero-lead {
        max-width: 100%;
        margin-top: 20px;
        font-size: .98rem;
        line-height: 1.66;
    }

    .hero-actions {
        justify-content: stretch;
        gap: 10px;
        margin-top: 25px;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 50px;
        padding: 0 18px;
        font-size: .88rem;
    }

    .hero-trust {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        margin-top: 23px;
        font-size: .8rem;
    }

    .phone-stage {
        min-height: 500px;
        margin-top: 26px;
    }

    .phone-glow {
        width: 330px;
        height: 330px;
    }

    .phone-shell {
        width: 224px;
        height: 458px;
        border-radius: 40px;
        transform: translate(-50%, -50%) rotate(2deg);
    }

    .phone-screen {
        border-radius: 32px;
    }

    .screen-content {
        padding: 47px 14px 16px;
    }

    .screen-brand img {
        width: 34px;
        height: 34px;
    }

    .screen-brand strong {
        font-size: .9rem;
    }

    .screen-hero-card {
        padding: 15px;
        border-radius: 18px;
    }

    .screen-hero-card h3 {
        font-size: 1.02rem;
    }

    .screen-grid {
        gap: 8px;
    }

    .screen-tile {
        min-height: 79px;
        padding: 10px;
        border-radius: 14px;
    }

    .screen-tile strong {
        font-size: .61rem;
    }

    .floating-card {
        min-width: 145px;
        max-width: 155px;
        padding: 11px 12px;
        border-radius: 15px;
    }

    .floating-card.one {
        top: 66px;
        left: -4px;
    }

    .floating-card.two {
        right: -4px;
        bottom: 70px;
    }

    .floating-card .mini-icon {
        width: 31px;
        height: 31px;
        margin-right: 7px;
    }

    .floating-card strong {
        font-size: .7rem;
    }

    .floating-card small {
        font-size: .61rem;
    }

    .stat-strip {
        padding: 20px 0;
    }

    .stat-strip .row {
        margin-right: -6px;
        margin-left: -6px;
    }

    .stat-item {
        padding-right: 6px;
        padding-left: 6px;
        margin: 8px 0;
    }

    .stat-item strong {
        font-size: .88rem;
        line-height: 1.25;
    }

    .stat-item span {
        display: block;
        font-size: .71rem;
        line-height: 1.35;
    }

    .section {
        padding: 66px 0;
    }

    .section-heading {
        margin-bottom: 34px;
        text-align: left;
    }

    .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.75rem);
        line-height: 1.08;
    }

    .section-heading p {
        margin-top: 15px;
        font-size: .94rem;
        line-height: 1.65;
    }

    .section-kicker {
        margin-bottom: 10px;
        font-size: .7rem;
        letter-spacing: .11em;
    }

    .feature-showcase {
        gap: 15px;
        margin-top: 0;
    }

    .feature-showcase-main {
        padding: 27px 21px;
        border-radius: 22px;
    }

    .feature-showcase-badge {
        margin-bottom: 16px;
        font-size: .65rem;
    }

    .feature-showcase-main > h3 {
        font-size: clamp(1.8rem, 8.3vw, 2.35rem);
        line-height: 1.09;
    }

    .feature-showcase-lead {
        margin-top: 15px;
        font-size: .9rem;
        line-height: 1.62;
    }

    .feature-highlight-list {
        gap: 10px;
        margin-top: 24px;
    }

    .feature-highlight {
        gap: 11px;
        padding: 15px;
        border-radius: 15px;
    }

    .feature-highlight-icon {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }

    .feature-highlight h4 {
        font-size: .88rem;
    }

    .feature-highlight p {
        font-size: .76rem;
        line-height: 1.5;
    }

    .feature-score-panel {
        padding: 25px 21px;
        border-radius: 22px;
    }

    .feature-score-top strong {
        font-size: 4rem;
    }

    .feature-score-stats {
        margin: 20px 0;
    }

    .feature-list-panel {
        margin-top: 17px;
        border-radius: 20px;
    }

    .feature-list-item {
        gap: 13px;
        padding: 21px 18px;
    }

    .feature-list-icon {
        width: 41px;
        height: 41px;
        border-radius: 12px;
    }

    .feature-list-item h4 {
        font-size: .92rem;
    }

    .feature-list-item p {
        font-size: .8rem;
        line-height: 1.55;
    }

    .workflow-card {
        padding: 23px 20px;
        border-radius: 18px;
    }

    .workflow-number {
        width: 38px;
        height: 38px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .workflow-card h3 {
        font-size: 1rem;
    }

    .workflow-card p {
        font-size: .83rem;
    }

    .showcase-panel,
    .showcase-panel-feature {
        padding: 27px 20px;
        border-radius: 22px;
    }

    .showcase-list li {
        gap: 10px;
        margin-bottom: 12px;
        font-size: .84rem;
    }

    .showcase-image-card {
        padding: 8px;
        border-radius: 18px;
    }

    .showcase-image {
        border-radius: 12px;
    }

    .home-faq-grid {
        gap: 11px;
        margin-top: 27px;
    }

    .home-faq-item {
        padding: 20px 18px;
        border-radius: 16px;
    }

    .home-faq-item h3 {
        font-size: .92rem;
        line-height: 1.4;
    }

    .home-faq-item p {
        font-size: .8rem;
        line-height: 1.58;
    }

    #home-faq .text-center {
        text-align: left !important;
    }

    #home-faq .btn {
        width: 100%;
    }

    .cta-panel {
        padding: 29px 21px;
        border-radius: 22px;
    }

    .cta-panel h2 {
        font-size: clamp(2rem, 9vw, 2.55rem);
    }

    .cta-panel p {
        font-size: .9rem;
        line-height: 1.62;
    }

    .app-tour-mobile-tabs {
        margin-top: 21px;
        margin-right: -18px;
        margin-left: -18px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .app-tour-mobile-tab {
        min-height: 40px;
        padding: 0 12px;
        font-size: .72rem;
    }

    .app-tour-shell {
        gap: 15px;
        margin-top: 19px;
    }

    .app-tour-device-stage {
        padding: 25px 14px 47px;
        border-radius: 22px;
    }

    .app-tour-device-stage:before {
        width: 330px;
        height: 330px;
    }

    .app-tour-device-stage:after {
        width: 430px;
        height: 430px;
    }

    .app-tour-phone {
        width: min(78vw, 272px);
        padding: 6px;
        border-radius: 39px;
    }

    .app-tour-screen {
        border-radius: 33px;
    }

    .app-tour-progress {
        right: 17px;
        bottom: 20px;
        left: 17px;
        gap: 4px;
    }

    .app-tour-progress span {
        height: 3px;
    }

    .app-tour-copy {
        padding: 24px 20px;
        border-radius: 21px;
    }

    .app-tour-copy-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 17px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .app-tour-copy-kicker {
        font-size: .67rem;
    }

    .app-tour-copy h3 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
        line-height: 1.1;
    }

    .app-tour-copy > p {
        margin-top: 14px;
        font-size: .87rem;
        line-height: 1.62;
    }

    .app-tour-points {
        margin-top: 20px;
    }

    .app-tour-points li {
        gap: 9px;
        margin-bottom: 10px;
        font-size: .8rem;
    }

    .app-tour-controls {
        margin-top: 20px;
        padding-top: 18px;
    }

    .app-tour-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 420px) {
    .hero .container,
    .section .container,
    .stat-strip .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .hero {
        padding-top: 104px;
    }

    .hero h1 {
        font-size: clamp(2.45rem, 13vw, 3.2rem);
    }

    .phone-stage {
        min-height: 460px;
    }

    .phone-shell {
        width: 205px;
        height: 420px;
    }

    .floating-card {
        min-width: 132px;
        max-width: 140px;
    }

    .section {
        padding: 58px 0;
    }

    .app-tour-mobile-tabs {
        margin-right: -15px;
        margin-left: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .app-tour-phone {
        width: min(80vw, 252px);
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 2.35rem;
    }

    .phone-stage {
        min-height: 425px;
    }

    .phone-shell {
        width: 188px;
        height: 385px;
    }

    .floating-card {
        display: none;
    }

    .app-tour-phone {
        width: 232px;
    }

    .feature-score-top strong {
        font-size: 3.55rem;
    }
}