/* FollowUpPro Documentation V2
   Brand language: black / white / FollowUpPro orange.
   Normal text intentionally kept at 14px or above.
*/

:root{
    --fup-orange:#ff6a35;
    --fup-orange-dark:#e95725;
    --fup-black:#111111;
    --fup-ink:#17181b;
    --fup-muted:#62656d;
    --fup-soft:#f6f6f4;
    --fup-line:#e7e7e4;
    --fup-white:#fff;
    --docs-header-offset:86px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{color:var(--fup-ink);background:#fff}
.fup-docs{font-size:14px;line-height:1.7}
.docs-container{width:min(1400px,calc(100% - 56px));margin:0 auto}

.docs-hero{
    background:var(--fup-black);
    color:#fff;
    padding:34px 0 74px;
    border-bottom:1px solid #252525;
}
.docs-breadcrumb{display:flex;gap:10px;align-items:center;font-size:14px;color:#9e9e9e;margin-bottom:55px}
.docs-breadcrumb a{color:#fff;text-decoration:none}
.docs-breadcrumb a:hover{color:var(--fup-orange)}
.docs-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(350px,.8fr);gap:80px;align-items:end}
.docs-kicker,.section-kicker{
    display:inline-block;
    color:var(--fup-orange);
    font-size:13px;
    font-weight:800;
    letter-spacing:.14em;
}
.docs-hero h1{
    font-size:clamp(44px,5.2vw,76px);
    line-height:1.03;
    letter-spacing:-.055em;
    margin:18px 0 22px;
    max-width:900px;
}
.docs-hero-copy{font-size:18px;line-height:1.75;color:#bcbec4;max-width:820px;margin:0}
.docs-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.docs-button{
    display:inline-flex;align-items:center;justify-content:center;gap:16px;
    min-height:48px;padding:0 20px;border-radius:10px;
    font-size:14px;font-weight:800;text-decoration:none;transition:.2s ease;
}
.docs-button-primary{background:var(--fup-orange);color:#fff}
.docs-button-primary:hover{background:#ff7a4b;color:#fff;transform:translateY(-1px)}
.docs-button-secondary{border:1px solid #454545;color:#fff;background:transparent}
.docs-button-secondary:hover{border-color:var(--fup-orange);color:var(--fup-orange)}
.docs-hero-panel{border:1px solid #333;background:#171717;border-radius:18px;padding:25px 26px}
.panel-label{font-size:12px;letter-spacing:.14em;font-weight:800;color:#888;margin-bottom:10px}
.quick-step{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:17px 0;border-top:1px solid #2c2c2c;font-size:14px}
.quick-step b{color:var(--fup-orange)}
.quick-step span{color:#eee}

.docs-shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:68px;align-items:start;padding-top:58px}
.docs-sidebar{position:sticky;top:20px;align-self:start;height:calc(100vh - 40px);z-index:3}
.sidebar-inner{
    height:100%;
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--fup-line);
    padding-right:25px;
}
.sidebar-title{font-size:12px;font-weight:800;letter-spacing:.12em;color:#999;margin-bottom:14px}
#docsNav{display:flex;flex-direction:column;overflow:auto;padding-right:8px}
#docsNav a{
    position:relative;
    display:block;
    padding:9px 12px;
    color:#696c73;
    text-decoration:none;
    font-size:14px;
    line-height:1.35;
    border-radius:7px;
    margin-bottom:2px;
}
#docsNav a:hover{color:var(--fup-black);background:#f7f7f5}
#docsNav a.active{color:var(--fup-black);font-weight:800;background:#fff2ec}
#docsNav a.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--fup-orange);border-radius:3px}
.sidebar-contact{margin-top:auto;padding-top:20px;border-top:1px solid var(--fup-line)}
.sidebar-contact span{display:block;font-size:10px;font-weight:800;letter-spacing:.11em;color:#999;margin-bottom:7px}
.sidebar-contact a{font-size:16px;font-weight:800;color:var(--fup-black);text-decoration:none}
.sidebar-contact a:hover{color:var(--fup-orange)}
.sidebar-contact small{display:block;color:#888;font-size:12px;line-height:1.45;margin-top:3px}

.docs-content{min-width:0}
.doc-section{
    position:relative;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:26px;
    padding:0 0 82px;
    margin-bottom:75px;
    border-bottom:1px solid var(--fup-line);
}
.doc-section:last-child{border-bottom:0;margin-bottom:0}
.section-index{font-size:13px;font-weight:800;color:#aaa;padding-top:8px}
.doc-section h2{font-size:clamp(30px,3.1vw,46px);line-height:1.1;letter-spacing:-.04em;margin:10px 0 16px;color:var(--fup-black)}
.doc-section h3{font-size:18px;line-height:1.3;margin:30px 0 10px}
.doc-section p{font-size:15px;line-height:1.78;color:var(--fup-muted);margin:0 0 16px;max-width:920px}
.doc-intro p{font-size:16px}
.muted-note{font-size:13px!important;color:#85878d!important}

.definition-grid,.feature-grid,.security-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px
}
.definition-grid>div,.feature-grid>div,.security-grid>div{
    border:1px solid var(--fup-line);border-radius:12px;padding:19px;background:#fff
}
.definition-grid b,.feature-grid b,.security-grid b{display:block;font-size:15px;margin-bottom:6px}
.definition-grid span{display:block;color:#6d7077;font-size:14px;line-height:1.55}
.feature-grid p,.security-grid p{font-size:14px;margin:0;line-height:1.6}
.feature-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.numbered-list{border-top:1px solid var(--fup-line);margin-top:28px}
.numbered-list>div{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--fup-line)}
.numbered-list strong{font-size:13px;color:var(--fup-orange)}
.numbered-list h3{margin:0 0 5px;font-size:16px}
.numbered-list p{margin:0;font-size:14px}

.info-callout{margin-top:25px;padding:18px 20px;border-left:3px solid var(--fup-orange);background:#fff7f3;border-radius:0 10px 10px 0;display:flex;gap:12px;flex-wrap:wrap}
.info-callout b{font-size:14px}
.info-callout span{font-size:14px;color:#65686e}

.workflow{display:flex;align-items:stretch;gap:8px;margin-top:32px;overflow:auto;padding-bottom:8px}
.workflow>div{min-width:140px;border:1px solid var(--fup-line);border-radius:12px;padding:16px;background:#fff}
.workflow span{display:block;font-size:11px;font-weight:800;color:var(--fup-orange);margin-bottom:9px}
.workflow b{display:block;font-size:15px}
.workflow small{display:block;color:#777;font-size:12px;line-height:1.45;margin-top:4px}
.workflow>i{display:flex;align-items:center;color:#aaa;font-style:normal;font-size:18px}

.mini-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.mini-flow span{padding:9px 13px;border:1px solid var(--fup-line);border-radius:8px;font-size:13px;font-weight:800;background:#fafafa}
.mini-flow i{font-style:normal;color:var(--fup-orange)}

.hierarchy{border:1px solid var(--fup-line);border-radius:12px;overflow:hidden;margin:28px 0}
.hierarchy-row{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:17px 19px;border-bottom:1px solid var(--fup-line)}
.hierarchy-row:last-child{border-bottom:0}
.hierarchy-row span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--fup-orange)}
.hierarchy-row b{font-size:14px}

.automation-layout{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:center;gap:10px;margin-top:28px}
.automation-layout>div{border:1px solid var(--fup-line);border-radius:12px;padding:18px}
.automation-layout>div:nth-child(even){border:0;padding:0;text-align:center;color:var(--fup-orange);font-size:20px}
.automation-layout span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--fup-orange);margin-bottom:7px}
.automation-layout b{font-size:14px;line-height:1.5}

.report-list{border-top:1px solid var(--fup-line);margin-top:25px}
.report-list div{display:grid;grid-template-columns:160px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--fup-line)}
.report-list b{font-size:14px}.report-list span{font-size:14px;color:#70737a}

.plan-table-wrap{overflow:auto;margin-top:28px;border:1px solid var(--fup-line);border-radius:12px}
.plan-table{width:100%;border-collapse:collapse;min-width:700px}
.plan-table th,.plan-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--fup-line);font-size:14px}
.plan-table th{background:#fafafa;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888}
.plan-table tr:last-child td{border-bottom:0}
.plan-table td:first-child{font-weight:800}
.billing-note{font-size:13px!important;margin-top:15px!important}

.architecture{display:flex;align-items:center;gap:10px;overflow:auto;margin-top:28px;padding-bottom:8px}
.architecture>div{min-width:180px;padding:18px;border:1px solid var(--fup-line);border-radius:12px;background:#fff}
.architecture b{display:block;font-size:14px}.architecture span{display:block;color:#777;font-size:12px;margin-top:4px}.architecture i{font-style:normal;color:var(--fup-orange);white-space:nowrap}

.doc-faq{border-top:1px solid var(--fup-line);margin-top:25px}
.doc-faq details{border-bottom:1px solid var(--fup-line);padding:0}
.doc-faq summary{list-style:none;cursor:pointer;padding:20px 4px;font-size:16px;font-weight:800;display:flex;justify-content:space-between;gap:20px}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary:after{content:"+";color:var(--fup-orange);font-size:20px;font-weight:400}
.doc-faq details[open] summary:after{content:"×"}
.doc-faq p{padding:0 30px 22px 4px;margin:0;font-size:14px}

.doc-contact{padding-bottom:20px}
.contact-panel{background:var(--fup-black);border-radius:18px;padding:36px 38px;color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:center}
.contact-panel h2{color:#fff;margin-top:10px}.contact-panel p{color:#aaa;margin-bottom:0}
.contact-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
.contact-phone{font-size:21px;font-weight:800;color:#fff;text-decoration:none}.contact-phone:hover{color:var(--fup-orange)}
.docs-button-light{background:#fff;color:#151515}.docs-button-light:hover{background:var(--fup-orange);color:#fff}

@media(max-width:1100px){
    .docs-hero-grid{grid-template-columns:1fr;gap:35px}
    .docs-hero-panel{max-width:650px}
    .docs-shell{grid-template-columns:220px minmax(0,1fr);gap:38px}
    .feature-grid.three{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
    .docs-container{width:min(100% - 32px,700px)}
    .docs-hero{padding-bottom:50px}
    .docs-breadcrumb{margin-bottom:35px}
    .docs-hero h1{font-size:44px}
    .docs-hero-copy{font-size:16px}
    .docs-shell{display:block;padding-top:25px}
    .docs-sidebar{position:sticky;top:0;height:auto;background:#fff;border-bottom:1px solid var(--fup-line);margin:0 -16px 40px;padding:0 16px;z-index:20}
    .sidebar-inner{height:auto;border-right:0;padding:12px 0}
    .sidebar-title,.sidebar-contact{display:none}
    #docsNav{display:flex;flex-direction:row;gap:6px;overflow:auto;white-space:nowrap;padding:0}
    #docsNav a{display:inline-block;flex:0 0 auto;padding:8px 11px;font-size:13px;margin:0;border:1px solid var(--fup-line);border-radius:7px}
    #docsNav a.active{background:#fff2ec;border-color:#ffd4c3}
    #docsNav a.active:before{display:none}
    .doc-section{grid-template-columns:1fr;gap:5px;padding-bottom:55px;margin-bottom:50px}
    .section-index{padding-top:0}
    .feature-grid,.definition-grid,.security-grid,.feature-grid.three{grid-template-columns:1fr}
    .automation-layout{grid-template-columns:1fr;gap:8px}
    .automation-layout>div:nth-child(even){transform:rotate(90deg)}
    .contact-panel{flex-direction:column;align-items:flex-start;padding:28px}
    .contact-actions{align-items:flex-start}
}
@media(max-width:520px){
    .docs-hero h1{font-size:37px}
    .docs-hero-actions{flex-direction:column;align-items:stretch}
    .docs-button{width:100%}
    .doc-section h2{font-size:31px}
    .workflow{margin-right:-16px}
    .report-list div{grid-template-columns:1fr;gap:4px}
    .hierarchy-row{grid-template-columns:1fr;gap:5px}
}

/* =========================================================
   RESPONSIVE HARDENING
   Keeps the documentation usable from small phones to desktop.
========================================================= */

.fup-docs{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

.fup-docs *,
.fup-docs *::before,
.fup-docs *::after{
    min-width:0;
}

.docs-container{
    width:min(1400px, calc(100% - 56px));
    max-width:1400px;
}

.docs-hero h1,
.doc-section h2,
.doc-section h3,
.docs-hero-copy,
.doc-section p,
.feature-grid p,
.security-grid p,
.info-callout span,
.numbered-list p,
.billing-note{
    overflow-wrap:anywhere;
    word-break:normal;
}

.docs-hero-panel,
.doc-section,
.feature-grid > div,
.definition-grid > div,
.security-grid > div,
.info-callout,
.contact-panel{
    min-width:0;
}

.workflow,
.architecture,
.plan-table-wrap{
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

@media (max-width: 1100px){
    .docs-hero-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .docs-hero-panel{
        width:100%;
        max-width:700px;
    }

    .docs-shell{
        grid-template-columns:220px minmax(0,1fr);
        gap:38px;
    }

    .docs-sidebar{
        top:calc(var(--docs-header-offset) + 10px);
        height:calc(100vh - var(--docs-header-offset) - 20px);
    }

    .feature-grid.three{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 820px){
    .docs-container{
        width:calc(100% - 32px);
        max-width:700px;
    }

    .docs-hero{
        padding:28px 0 50px;
    }

    .docs-breadcrumb{
        margin-bottom:34px;
        flex-wrap:wrap;
    }

    .docs-hero h1{
        font-size:clamp(37px, 8vw, 44px);
        letter-spacing:-.045em;
    }

    .docs-hero-copy{
        font-size:16px;
        line-height:1.7;
    }

    .docs-hero-actions{
        width:100%;
    }

    .docs-button{
        max-width:100%;
    }

    .docs-shell{
        display:block;
        padding-top:24px;
    }

    .docs-sidebar{
        position:sticky;
        top:var(--docs-header-offset);
        width:100%;
        height:auto;
        margin:0 -16px 38px;
        padding:0 16px;
        background:#fff;
        border-bottom:1px solid var(--fup-line);
        z-index:20;
    }

    .sidebar-inner{
        height:auto;
        border-right:0;
        padding:12px 0;
    }

    .sidebar-title,
    .sidebar-contact{
        display:none;
    }

    #docsNav{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:6px;
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;
        padding:0 0 3px;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    #docsNav::-webkit-scrollbar{
        display:none;
    }

    #docsNav a{
        display:inline-flex;
        align-items:center;
        flex:0 0 auto;
        padding:8px 11px;
        margin:0;
        font-size:13px;
        line-height:1.25;
        border:1px solid var(--fup-line);
        border-radius:7px;
    }

    #docsNav a.active{
        background:#fff2ec;
        border-color:#ffd4c3;
    }

    #docsNav a.active:before{
        display:none;
    }

    .doc-section{
        grid-template-columns:1fr;
        gap:5px;
        padding-bottom:55px;
        margin-bottom:50px;
    }

    .section-index{
        padding-top:0;
    }

    .feature-grid,
    .definition-grid,
    .security-grid,
    .feature-grid.three{
        grid-template-columns:1fr;
    }

    .automation-layout{
        grid-template-columns:1fr;
        gap:8px;
    }

    .automation-layout > div:nth-child(even){
        transform:rotate(90deg);
        min-height:20px;
    }

    .contact-panel{
        flex-direction:column;
        align-items:flex-start;
        width:100%;
    }

    .contact-actions{
        align-items:flex-start;
        width:100%;
    }

    .contact-phone{
        max-width:100%;
        overflow-wrap:anywhere;
    }
}

@media (max-width: 600px){
    .docs-container{
        width:calc(100% - 24px);
        max-width:none;
    }

    .docs-hero{
        padding:24px 0 42px;
    }

    .docs-breadcrumb{
        margin-bottom:28px;
        font-size:13px;
    }

    .docs-hero h1{
        font-size:clamp(34px, 10vw, 40px);
        line-height:1.05;
    }

    .docs-hero-copy{
        font-size:15px;
        line-height:1.65;
    }

    .docs-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .docs-button{
        width:100%;
        min-height:48px;
    }

    .docs-hero-panel{
        padding:20px;
        border-radius:14px;
    }

    .quick-step{
        grid-template-columns:32px minmax(0,1fr);
        padding:14px 0;
    }

    .docs-sidebar{
        margin-left:-12px;
        margin-right:-12px;
        padding-left:12px;
        padding-right:12px;
    }

    .doc-section{
        padding-bottom:45px;
        margin-bottom:42px;
    }

    .doc-section h2{
        font-size:clamp(29px, 8vw, 34px);
    }

    .doc-section p{
        font-size:15px;
    }

    .info-callout{
        flex-direction:column;
        gap:5px;
        padding:16px;
    }

    .numbered-list > div{
        grid-template-columns:38px minmax(0,1fr);
        gap:12px;
        padding:18px 0;
    }

    .hierarchy-row{
        grid-template-columns:1fr;
        gap:5px;
    }

    .report-list div{
        grid-template-columns:1fr;
        gap:4px;
    }

    .workflow{
        margin-right:-12px;
        padding-right:12px;
    }

    .architecture{
        margin-right:-12px;
        padding-right:12px;
    }

    .plan-table-wrap{
        margin-right:0;
        border-radius:10px;
    }

    .contact-panel{
        padding:24px;
        border-radius:14px;
    }

    .contact-panel h2{
        font-size:clamp(30px, 9vw, 38px);
        line-height:1.05;
    }

    .contact-actions,
    .docs-button-light{
        width:100%;
    }
}

@media (max-width: 380px){
    .docs-container{
        width:calc(100% - 20px);
    }

    .docs-sidebar{
        margin-left:-10px;
        margin-right:-10px;
        padding-left:10px;
        padding-right:10px;
    }

    .docs-hero h1{
        font-size:32px;
    }

    .docs-hero-panel{
        padding:17px;
    }

    .quick-step{
        grid-template-columns:28px minmax(0,1fr);
        gap:8px;
        font-size:13px;
    }

    .doc-section h2{
        font-size:28px;
    }

    .workflow,
    .architecture{
        margin-right:-10px;
        padding-right:10px;
    }

    .contact-panel{
        padding:20px;
    }
}