/* =====================================================
   PAY AFTER PLACEMENT — page styles
   Prefix: pap-
   Source: Figma "Pay After Placement" hero spec
===================================================== */

.pap-page{
    background:var(--white);
}

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
}

/* ===================== HERO ===================== */

.pap-hero{
    position:relative;
    background:var(--white);
    padding:var(--space-section) 0;
    overflow:hidden;
}

.pap-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,102,0,.1) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,102,0,.1) 1px,transparent 1px);
    background-size:69.52px 58.73px;
    mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
    pointer-events:none;
}

.pap-hero .container{
    position:relative;
}

.pap-hero-inner{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    gap:96px;
}

.pap-hero-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    width:592px;
    max-width:100%;
    flex-shrink:0;
}

.pap-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:#F5F5F5;
    border:1px solid rgba(93,94,95,.2);
    border-radius:9999px;
    font-weight:600;
    font-size:16px;
    line-height:24px;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--primary);
}

.pap-badge i{
    color:var(--primary);
    font-size:13px;
}

.pap-hero-copy h1{
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:64px;
    line-height:77px;
    margin:0;
}

.pap-hero-copy h1 .pap-heading-lead{
    display:block;
    color:var(--ink);
}

.pap-hero-copy h1 .pap-orange{
    display:block;
    color:var(--primary);
}

.pap-hero-sub{
    max-width:576px;
    font-size:18px;
    font-weight:400;
    line-height:28px;
    color:var(--ink-500);
}

.pap-hero-actions{
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:16px;
    flex-wrap:wrap;
}

.pap-btn-primary,
.pap-btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:700;
    font-size:16px;
    line-height:24px;
    text-decoration:none;
    border-radius:4px;
    white-space:nowrap;
    transition:background .2s ease,border-color .2s ease,transform .15s ease;
}

.pap-btn-primary{
    padding:16px 32px;
    background:var(--primary);
    color:var(--white);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}

.pap-btn-primary:hover{
    background:var(--primary-hover);
    transform:translateY(-1px);
}

.pap-btn-outline{
    padding:16px 24px;
    background:transparent;
    border:1px solid rgba(93,94,95,.4);
    color:var(--ink);
    font-weight:400;
}

.pap-btn-outline i{
    color:var(--ink);
    font-size:15px;
}

.pap-btn-outline:hover{
    border-color:rgba(93,94,95,.7);
    background:rgba(0,0,0,.03);
}

.pap-trust-row{
    display:flex;
    align-items:flex-start;
    gap:32px;
    padding-top:24px;
    border-top:1px solid var(--border-soft);
    width:100%;
    flex-wrap:wrap;
}

.pap-trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    line-height:24px;
    color:var(--ink-500);
    white-space:nowrap;
}

.pap-trust-item i{
    color:var(--ink-400);
    font-size:14px;
}

.pap-hero-visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:592px;
    max-width:100%;
    min-height:600px;
    flex-shrink:0;
}

.pap-hero-image{
    width:100%;
    height:661px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3);
}

.pap-fee-card{
    box-sizing:border-box;
    position:absolute;
    left:-48px;
    bottom:32px;
    width:384px;
    max-width:calc(100% + 48px);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:24px;
    background:var(--white);
    border:1px solid rgba(93,94,95,.2);
    border-radius:12px;
    box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}

.pap-fee-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:16px;
    line-height:24px;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--ink-500);
}

.pap-fee-dot{
    width:8px;
    height:8px;
    border-radius:9999px;
    background:var(--primary);
    flex-shrink:0;
}

.pap-fee-total{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    padding-bottom:16px;
    border-bottom:1px solid rgba(93,94,95,.2);
}

.pap-fee-total span{
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:var(--ink-500);
}

.pap-fee-total strong{
    font-family:'Hanken Grotesk',sans-serif;
    font-weight:700;
    font-size:30px;
    line-height:36px;
    color:var(--ink);
}

.pap-fee-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
}

.pap-fee-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.pap-fee-row span{
    font-size:16px;
    font-weight:400;
    color:var(--ink-500);
}

.pap-fee-row strong{
    font-size:16px;
    font-weight:600;
    color:var(--ink);
}

.pap-fee-note{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    padding:24px 16px 16px;
    background:#F5F5F5;
    border:1px solid rgba(93,94,95,.1);
    border-radius:8px;
}

.pap-fee-note i{
    color:var(--primary);
    font-size:14px;
    margin-top:2px;
}

.pap-fee-note span{
    font-size:16px;
    font-weight:400;
    line-height:26px;
    color:var(--ink-500);
}

/* ===================== PROGRAM HIGHLIGHTS ===================== */

.pap-highlights{
    padding:var(--space-section-sm) 0;
    background:var(--white);
}

.pap-highlights-inner{
    display:flex;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;
}

.pap-highlights-label{
    flex:0 0 auto;
    font-size:22px;
    font-weight:800;
    line-height:1.25;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:0;
}

.pap-highlights-row{
    display:flex;
    gap:16px;
    flex:1 1 auto;
    flex-wrap:wrap;
}

.pap-highlight-card{
    flex:1 1 170px;
    min-width:170px;
    max-width:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:24px 16px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:var(--white);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pap-highlight-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(255, 107, 0, 0.08);
    border-color:rgba(255, 107, 0, 0.3);
}

.pap-highlight-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--primary-10);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.pap-highlight-card p{
    font-weight:700;
    font-size:15px;
    line-height:1.35;
    color:var(--ink-900);
    margin:0;
}

/* ===================== HOW IT WORKS ===================== */

.pap-how{
    padding:var(--space-section) 0;
    background:var(--white);
}

.pap-how-title{
    text-align:center;
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink-900);
    margin-bottom:var(--space-block);
}

.pap-how-title .pap-orange{
    color:var(--primary);
}

.pap-how-steps{
    display:flex;
    align-items:flex-start;
    gap:0;
}

.pap-how-step{
    position:relative;
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:44px 16px 24px;
}

.pap-how-num{
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:var(--white);
    font-family:'Hanken Grotesk',sans-serif;
    font-weight:700;
    font-size:16px;
    box-shadow:0 4px 10px rgba(255,102,0,.3);
}

.pap-how-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F5F5F5;
    color:var(--primary);
    font-size:22px;
    margin:8px 0 4px;
}

.pap-how-step h4{
    font-size:16px;
    font-weight:700;
    color:var(--ink-900);
}

.pap-how-step p{
    font-size:14px;
    line-height:20px;
    color:var(--ink-500);
}

.pap-how-arrow{
    position:relative;
    flex:0 0 56px;
    align-self:flex-start;
    height:2px;
    margin-top:112px;
}

.pap-how-arrow::before{
    content:"";
    position:absolute;
    left:8px;
    right:20px;
    top:0;
    border-top:2px dashed var(--primary-65);
}

.pap-how-arrow i{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    color:var(--primary);
    font-size:12px;
}

/* ===================== WHAT YOU'LL LEARN ===================== */

.pap-learn{
    padding:var(--space-section) 0;
    background:var(--section-bg);
}

.pap-learn-title{
    text-align:center;
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink-900);
    margin-bottom:var(--space-block);
}

.pap-learn-title .pap-orange{
    color:var(--primary);
}

.pap-learn-inner{
    display:flex;
    align-items:stretch;
    gap:24px;
}

.pap-learn-tabs{
    flex:0 0 340px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pap-learn-tab{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:16px 18px;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:10px;
    cursor:pointer;
    text-align:left;
    transition:border-color .2s ease,box-shadow .2s ease;
    font-family:inherit;
}

.pap-learn-tab:hover{
    border-color:var(--primary-35);
}

.pap-learn-tab.is-active{
    border-color:var(--primary);
    box-shadow:0 4px 14px rgba(255,102,0,.12);
}

.pap-learn-tab-icon{
    flex-shrink:0;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:var(--white);
    border:1px solid var(--border-soft);
    color:var(--ink-500);
    font-size:15px;
}

.pap-learn-tab.is-active .pap-learn-tab-icon{
    background:var(--primary-10);
    border-color:transparent;
    color:var(--primary);
}

.pap-learn-tab-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.pap-learn-tab-label{
    font-size:12px;
    font-weight:600;
    color:var(--primary);
}

.pap-learn-tab.is-active .pap-learn-tab-label{
    color:var(--primary);
}

.pap-learn-tab:not(.is-active) .pap-learn-tab-label{
    color:var(--ink-400);
}

.pap-learn-tab-name{
    font-size:16px;
    font-weight:700;
    color:var(--ink-900);
}

.pap-learn-panels{
    flex:1 1 auto;
    position:relative;
    min-width:0;
}

.pap-learn-panel{
    display:none;
    height:100%;
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:36px 40px;
}

.pap-learn-panel.is-active{
    display:block;
}

.pap-learn-panel-label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:6px;
}

.pap-learn-panel h3{
    font-size:26px;
    font-weight:800;
    color:var(--ink-900);
    margin-bottom:24px;
}

.pap-learn-panel ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:28px;
}

.pap-learn-panel ul li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:16px;
    color:var(--ink-600);
}

.pap-learn-panel ul li i{
    color:var(--primary);
    font-size:14px;
    margin-top:4px;
}

.pap-learn-panel-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:24px;
}

.pap-learn-panel-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    background:var(--section-bg);
    border-radius:8px;
    font-size:14px;
    color:var(--ink-500);
}

.pap-learn-panel-meta span strong{
    color:var(--ink-900);
    font-weight:700;
}

.pap-learn-panel-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:15px;
    color:var(--primary);
    text-decoration:none;
    padding-top:16px;
    border-top:1px solid var(--border-soft);
    width:100%;
}

.pap-learn-panel-link i{
    font-size:13px;
    transition:transform .2s ease;
}

.pap-learn-panel-link:hover i{
    transform:translateX(4px);
}

/* ===================== BUILD REAL. BUILD BETTER. ===================== */

.pap-projects{
    padding:var(--space-section) 0;
    background:var(--white);
}

.pap-projects .container{
    text-align:center;
    margin-bottom:var(--space-block);
}

.pap-projects-title{
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink-900);
    margin-bottom:12px;
}

.pap-projects-title .pap-orange{
    color:var(--primary);
}

.pap-projects-sub{
    font-size:var(--fs-lead);
    color:var(--ink-500);
}

.pap-projects-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    max-width:1200px;
    margin:0 auto;
    width:100%;
}

.pap-project-card{
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(0, 0, 0, 0.05);
    display:flex;
    flex-direction:column;
    text-align:left;
    transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pap-project-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 32px rgba(15, 23, 42, 0.1);
    border-color:rgba(255, 102, 0, 0.35);
}

.pap-project-header{
    padding:16px 18px 12px;
}

.pap-project-badge{
    display:inline-block;
    padding:4px 10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--primary);
    border:1px solid rgba(255, 102, 0, 0.35);
    background:rgba(255, 102, 0, 0.06);
    border-radius:6px;
}

.pap-project-media{
    padding:0 16px;
}

.pap-project-media img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:var(--section-bg);
}

.pap-project-body{
    padding:16px 18px 20px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.pap-project-body h4{
    font-size:18px;
    font-weight:700;
    color:var(--ink-900);
    margin-bottom:8px;
}

.pap-project-body p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--ink-500);
    margin-bottom:16px;
    flex:1;
}

.pap-project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
}

.pap-project-tags span{
    padding:5px 10px;
    background:var(--section-bg);
    border:1px solid var(--border-soft);
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:var(--ink-600);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width:1200px){
    .pap-hero-inner{
        gap:56px;
    }
    .pap-hero-copy h1{
        font-size:48px;
        line-height:58px;
    }
}

@media (max-width:992px){
    .pap-hero-inner{
        flex-direction:column;
        align-items:stretch;
        gap:48px;
    }
    .pap-hero-copy{
        width:100%;
    }
    .pap-hero-visual{
        width:100%;
        min-height:auto;
        /* The fee card goes position:relative just below, which puts it back
           into this flex container's flow. The container is a row, so the
           card landed BESIDE the image rather than under it - 342px of image
           plus 206px of card in a 390px row, centred, which pushed the image
           out to x=-79 and the card's text out to x=444. It only ever worked
           on desktop because the card was absolutely positioned there and
           took no part in the layout. Stack them. */
        flex-direction:column;
    }
    .pap-hero-image{
        height:420px;
    }
    .pap-fee-card{
        position:relative;
        left:0;
        bottom:0;
        margin-top:-56px;
        margin-left:auto;
        margin-right:16px;
        width:calc(100% - 32px);
        max-width:384px;
    }
    .pap-how-arrow{
        display:none;
    }
    .pap-how-steps{
        justify-content:center;
        flex-wrap:wrap;
        gap:24px;
    }
    .pap-how-step{
        flex:1 1 260px;
    }
    .pap-learn-inner{
        flex-direction:column;
    }
    .pap-learn-tabs{
        flex:0 0 auto;
        width:100%;
    }
    .pap-highlights{
        padding:40px 0;
    }
    .pap-highlights-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:24px;
    }
    .pap-highlights-label{
        font-size:22px;
        line-height:1.2;
    }
    .pap-highlights-row{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
        width:100%;
    }
    .pap-highlight-card{
        flex:none;
        min-width:0;
        max-width:100%;
        width:100%;
        padding:20px 14px;
        box-sizing:border-box;
    }
    .pap-highlight-card:nth-child(5){
        grid-column:span 2;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:16px;
        text-align:left;
        padding:16px 20px;
    }
}

@media (max-width:640px){
    .pap-hero-copy h1{
        font-size:36px;
        line-height:44px;
    }
    .pap-hero-sub{
        font-size:16px;
        line-height:24px;
    }
    .pap-hero-actions{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }
    .pap-btn-primary,
    .pap-btn-outline{
        width:100%;
    }
    .pap-trust-row{
        gap:16px 24px;
    }
    .pap-fee-card{
        margin-right:0;
        width:100%;
        max-width:100%;
    }
    .pap-highlights{
        padding:32px 0;
    }
    .pap-highlights-inner{
        gap:16px;
    }
    .pap-highlights-label{
        font-size:20px;
    }
    .pap-highlights-row{
        gap:12px;
    }
    .pap-highlight-card{
        padding:16px 10px;
        border-radius:12px;
        gap:10px;
    }
    .pap-highlight-icon{
        width:46px;
        height:46px;
        font-size:17px;
    }
    .pap-highlight-card p{
        font-size:13px;
        line-height:1.3;
    }
    .pap-highlight-card:nth-child(5){
        gap:14px;
        padding:14px 16px;
    }
    .pap-how-step{
        flex:1 1 100%;
    }
    .pap-learn-panel{
        padding:28px 22px;
    }
    .pap-learn-panel h3{
        font-size:22px;
    }
    .pap-projects-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
}

@media (max-width:360px){
    .pap-highlights-row{
        gap:8px;
    }
    .pap-highlight-card{
        padding:12px 6px;
        border-radius:10px;
    }
    .pap-highlight-icon{
        width:38px;
        height:38px;
        font-size:15px;
    }
    .pap-highlight-card p{
        font-size:11.5px;
        line-height:1.25;
    }
    .pap-highlight-card:nth-child(5){
        padding:12px 10px;
        gap:10px;
    }
}

/* ==========================================
   TOUCH TARGETS

   The panel link measured 296x36 — four short of the height a thumb needs,
   and it is the section's only way forward.

   Note the stray "</content>" that used to close this file, now removed. It
   was the last line so it broke nothing visible, but it is not CSS: the
   parser discards from there to the end of the file, so anything appended
   after it was silently dead. This block was, until it went.
========================================== */

@media (max-width:768px), (hover:none){

    /* Already inline-flex with padding-top:16px and nothing on the bottom,
       which is where the 36 comes from — so the padding is the thing to even
       up, not the height. */
    .pap-learn-panel-link{
        min-height:44px;
        padding-top:12px;
        padding-bottom:12px;
    }

}