/* ==================================================
   AR8 CAPTURE PAGE TEMPLATES
   ================================================== */


/* CLEAN & SIMPLE */

body.tpl-simple{
    background:linear-gradient(135deg,#edf6ff,#ffffff);
}

body.tpl-simple .card{
    background:#ffffff;
    border:1px solid #d8e5f0;
}

body.tpl-simple h1{
    color:#0b4f87;
}

body.tpl-simple button{
    background:#0b4f87;
}


/* PROFESSIONAL BLUE */

body.tpl-blue{
    background:linear-gradient(135deg,#e6f3fc,#f8fcff);
}

body.tpl-blue .wrap{
    max-width:600px;
}

body.tpl-blue .card{
    border:1px solid #cfe3f1;
    border-top:7px solid #59a6d7;
    box-shadow:0 14px 35px rgba(48,105,145,.12);
}

body.tpl-blue h1{
    color:#285c7d;
}

body.tpl-blue input{
    border-color:#bfd6e6;
    background:#fbfdff;
}

body.tpl-blue button{
    background:#3988bd;
}


/* FRESH GREEN */

body.tpl-green{
    background:linear-gradient(135deg,#eaf7ed,#fbfffc);
}

body.tpl-green .card{
    border:1px solid #cee4d2;
    border-left:7px solid #62a870;
    box-shadow:0 12px 32px rgba(59,120,72,.10);
}

body.tpl-green h1{
    color:#376f42;
}

body.tpl-green input{
    border-color:#bfd8c4;
}

body.tpl-green button{
    background:#559864;
    border-radius:24px;
}


/* WARM ORANGE */

body.tpl-orange{
    background:linear-gradient(135deg,#fff0df,#fffaf4);
}

body.tpl-orange .card{
    border:1px solid #f0d5ba;
    border-top:7px solid #ee9b47;
    box-shadow:0 12px 34px rgba(170,99,35,.11);
}

body.tpl-orange h1{
    color:#9a5b24;
}

body.tpl-orange input{
    border-color:#e5c8aa;
}

body.tpl-orange button{
    background:#e68931;
}


/* MODERN GREY */

body.tpl-grey{
    background:linear-gradient(135deg,#eceff1,#fafafa);
}

body.tpl-grey .card{
    border:1px solid #d7dde1;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(65,75,82,.10);
}

body.tpl-grey h1{
    color:#4c5961;
}

body.tpl-grey input{
    background:#fafbfc;
    border-color:#cbd2d7;
}

body.tpl-grey button{
    background:#65727a;
}


/* OFFER SPOTLIGHT */

body.tpl-spotlight{
    background:linear-gradient(135deg,#fff4cf,#fffdf6);
}

body.tpl-spotlight .wrap{
    max-width:610px;
}

body.tpl-spotlight .card{
    border:1px solid #ead89d;
    border-radius:18px;
    box-shadow:0 15px 36px rgba(154,116,32,.13);
    text-align:center;
}

body.tpl-spotlight .card:before{
    content:"SPECIAL OFFER";
    display:inline-block;
    margin-bottom:18px;
    padding:7px 14px;
    background:#fff1bd;
    color:#8b6a1e;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    letter-spacing:1px;
}

body.tpl-spotlight h1{
    color:#66501c;
}

body.tpl-spotlight label{
    text-align:left;
}

body.tpl-spotlight button{
    background:#d69a28;
}


/* NEWSLETTER */

body.tpl-newsletter{
    background:linear-gradient(135deg,#f0eaf7,#fbf9fd);
}

body.tpl-newsletter .wrap{
    max-width:620px;
}

body.tpl-newsletter .card{
    border:1px solid #ded2ea;
    border-top:10px solid #d2c2e2;
    border-radius:10px;
    box-shadow:0 12px 32px rgba(100,75,125,.10);
}

body.tpl-newsletter h1{
    color:#614c78;
    padding-bottom:18px;
    border-bottom:2px solid #e1d7eb;
}

body.tpl-newsletter input{
    border-color:#d3c7dd;
}

body.tpl-newsletter button{
    background:#80679d;
}


/* PERSONAL INVITATION */

body.tpl-personal{
    background:#f7f4ed;
    font-family:Georgia,"Times New Roman",serif;
}

body.tpl-personal .wrap{
    max-width:590px;
}

body.tpl-personal .card{
    border:1px solid #e2ddd2;
    border-radius:4px;
    padding:40px;
    box-shadow:0 9px 25px rgba(80,70,50,.08);
}

body.tpl-personal h1{
    color:#44423d;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:normal;
}

body.tpl-personal .description{
    font-size:17px;
}

body.tpl-personal label,
body.tpl-personal input,
body.tpl-personal button{
    font-family:Arial,Helvetica,sans-serif;
}

body.tpl-personal button{
    background:#477da3;
    border-radius:5px;
}


/* MOBILE */

@media(max-width:600px){

    body .wrap{
        margin:25px auto;
        padding:14px;
    }

    body .card{
        padding:24px;
    }

    body.tpl-personal .card{
        padding:26px;
    }
}


/* ==================================================
   COMPACT CAPTURE FORM
   ================================================== */

body .wrap{
    max-width:460px;
    margin:38px auto;
    padding:14px;
}

body .card{
    padding:24px 26px;
}

body h1{
    font-size:28px;
    margin-bottom:14px;
}

body .description{
    font-size:15px;
    line-height:1.45;
    margin-bottom:18px;
}

body label{
    font-size:14px;
    margin:11px 0 5px;
}

body input,
body textarea{
    padding:9px 10px;
    font-size:15px;
}

body textarea{
    min-height:68px;
}

body button{
    margin-top:17px;
    padding:11px;
    font-size:16px;
}

@media(max-width:600px){

    body .wrap{
        margin:18px auto;
        padding:10px;
    }

    body .card{
        padding:20px;
    }

    body h1{
        font-size:24px;
    }
}


/* Slimmer form fields */

body input,
body textarea{
    padding:7px 9px;
    font-size:14px;
}

body textarea{
    min-height:52px;
}


/* Capture form privacy reassurance */

body .privacy-note{
    margin-top:9px;
    text-align:center;
    font-size:11px;
    line-height:1.4;
    color:#7b8790;
}



/* ==================================================
   AR8 FULL LANDING PAGE LAYOUT
   ================================================== */

body .wrap{
    width:min(1100px,94%);
    max-width:1100px;
    margin:55px auto;
    padding:20px;
    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(360px,.92fr);
    gap:48px;
    align-items:center;
}

body .landing-copy{
    padding:20px 10px;
}

body .landing-badge{
    display:inline-block;
    margin-bottom:16px;
    padding:7px 12px;
    border-radius:20px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(60,90,110,.14);
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:#536a78;
}

body .landing-copy h1{
    margin:0 0 15px;
    font-size:42px;
    line-height:1.12;
    color:#253f50;
}

body .landing-description{
    max-width:590px;
    margin-bottom:26px;
    font-size:18px;
    line-height:1.65;
    color:#526773;
}

body .landing-benefits{
    display:grid;
    gap:14px;
}

body .landing-benefit{
    display:flex;
    align-items:flex-start;
    gap:12px;
    max-width:560px;
}

body .landing-benefit > span{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    box-shadow:0 3px 9px rgba(0,0,0,.08);
    color:#27824a;
    font-weight:bold;
}

body .landing-benefit strong{
    display:block;
    margin-bottom:3px;
    color:#263f4f;
    font-size:15px;
}

body .landing-benefit small{
    display:block;
    color:#687a84;
    font-size:13px;
    line-height:1.45;
}

body .form-card{
    width:100%;
    margin:0;
    padding:28px;
    background:rgba(255,255,255,.97);
}

body .form-card > h1,
body .form-card > .description{
    display:none;
}

body .form-heading{
    margin:0 0 6px;
    text-align:center;
    font-size:25px;
    color:#294a5e;
}

body .form-subheading{
    margin:0 0 20px;
    text-align:center;
    font-size:14px;
    line-height:1.45;
    color:#71808a;
}


@media(max-width:820px){

    body .wrap{
        width:min(620px,94%);
        grid-template-columns:1fr;
        gap:20px;
        margin:25px auto;
    }

    body .landing-copy{
        padding:5px;
        text-align:center;
    }

    body .landing-copy h1{
        font-size:34px;
    }

    body .landing-description{
        margin-left:auto;
        margin-right:auto;
        font-size:16px;
    }

    body .landing-benefits{
        max-width:470px;
        margin:0 auto;
        text-align:left;
    }
}


@media(max-width:500px){

    body .wrap{
        width:96%;
        padding:10px;
    }

    body .landing-copy h1{
        font-size:29px;
    }

    body .form-card{
        padding:23px 20px;
    }
}



/* =========================================================
   AR8_MASTER_CAPTURE_LAYOUT_V2
   Consistent Build It For Me capture-page structure
   ========================================================= */


/*
 * All themes use the same proper landing-page size.
 * This overrides old 590px / 600px template widths.
 */
body.tpl-simple .wrap,
body.tpl-blue .wrap,
body.tpl-green .wrap,
body.tpl-orange .wrap,
body.tpl-grey .wrap,
body.tpl-spotlight .wrap,
body.tpl-newsletter .wrap,
body.tpl-personal .wrap{

    width:min(1180px,94%);
    max-width:1180px;

    margin:38px auto;
    padding:38px 42px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(370px,.92fr);

    grid-template-areas:"copy form";

    gap:46px;
    align-items:center;

    background:rgba(255,255,255,.72);

    border:2px solid rgba(75,105,120,.18);
    border-radius:22px;

    box-shadow:
        0 14px 38px
        rgba(50,70,82,.09);
}


/* Theme-coloured outer border */

body.tpl-simple .wrap{
    border-color:#c9dfee;
}

body.tpl-blue .wrap{
    border-color:#b9d8eb;
}

body.tpl-green .wrap{
    border-color:#b9dbc1;
}

body.tpl-orange .wrap{
    border-color:#efcfad;
}

body.tpl-grey .wrap{
    border-color:#cfd7dc;
}

body.tpl-spotlight .wrap{
    border-color:#e6d394;
}

body.tpl-newsletter .wrap{
    border-color:#dacde7;
}

body.tpl-personal .wrap{
    border-color:#ded6c8;
}


/* Main wording */

body .landing-copy{

    grid-area:copy;

    min-width:0;

    padding:10px 8px;
}

body .landing-copy h1{

    max-width:680px;

    margin-top:0;

    font-size:42px;
    line-height:1.12;
}

body .landing-description{

    max-width:650px;

    font-size:18px;
    line-height:1.6;
}


/* Form card */

body .form-card{

    grid-area:form;

    width:100%;
    max-width:500px;

    justify-self:end;

    margin:0;

    padding:30px;

    box-sizing:border-box;

    border-radius:18px !important;

    background:#ffffff;

    box-shadow:
        0 12px 30px
        rgba(50,70,82,.11);
}


/* Fresh Green-style rounded action button on all themes */

body .form-card button{

    width:100%;

    border-radius:24px !important;

    color:#ffffff !important;

    font-weight:700;

    cursor:pointer;
}


/* =========================================================
   FORM RIGHT
   ========================================================= */

body.layout-right .wrap{

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(370px,.92fr);

    grid-template-areas:"copy form";
}

body.layout-right .form-card{
    justify-self:end;
}


/* =========================================================
   FORM LEFT
   ========================================================= */

body.layout-left .wrap{

    grid-template-columns:
        minmax(370px,.92fr)
        minmax(0,1.08fr);

    grid-template-areas:"form copy";
}

body.layout-left .form-card{
    justify-self:start;
}


/* =========================================================
   FORM UNDER
   ========================================================= */

body.layout-under .wrap{

    max-width:980px;

    grid-template-columns:1fr;

    grid-template-areas:
        "copy"
        "form";

    gap:28px;
}

body.layout-under .landing-copy{

    text-align:center;
}

body.layout-under .landing-copy h1,
body.layout-under .landing-description{

    margin-left:auto;
    margin-right:auto;
}

body.layout-under .landing-benefits{

    max-width:650px;

    margin-left:auto;
    margin-right:auto;

    text-align:left;
}

body.layout-under .form-card{

    width:min(560px,100%);
    max-width:560px;

    justify-self:center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:820px){

    body.tpl-simple .wrap,
    body.tpl-blue .wrap,
    body.tpl-green .wrap,
    body.tpl-orange .wrap,
    body.tpl-grey .wrap,
    body.tpl-spotlight .wrap,
    body.tpl-newsletter .wrap,
    body.tpl-personal .wrap{

        width:min(650px,94%);

        margin:22px auto;
        padding:25px;

        grid-template-columns:1fr;

        grid-template-areas:
            "copy"
            "form";

        gap:22px;
    }

    body .landing-copy{

        text-align:center;
    }

    body .landing-copy h1{

        margin-left:auto;
        margin-right:auto;

        font-size:34px;
    }

    body .landing-description{

        margin-left:auto;
        margin-right:auto;

        font-size:16px;
    }

    body .landing-benefits{

        max-width:500px;

        margin-left:auto;
        margin-right:auto;

        text-align:left;
    }

    body.layout-left .form-card,
    body.layout-right .form-card,
    body.layout-under .form-card{

        width:min(540px,100%);
        max-width:540px;

        justify-self:center;
    }
}


@media(max-width:500px){

    body.tpl-simple .wrap,
    body.tpl-blue .wrap,
    body.tpl-green .wrap,
    body.tpl-orange .wrap,
    body.tpl-grey .wrap,
    body.tpl-spotlight .wrap,
    body.tpl-newsletter .wrap,
    body.tpl-personal .wrap{

        width:95%;

        padding:18px;

        border-radius:16px;
    }

    body .landing-copy h1{
        font-size:29px;
    }

    body .form-card{
        padding:23px 20px;
    }
}



/* =========================================================
   AR8_BACKGROUND_IMAGE_V1
   ========================================================= */

body.has-background-image{

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
}

body.has-background-image .wrap{

    background:rgba(255,255,255,.86);

    box-shadow:
        0 16px 42px
        rgba(25,45,55,.18);
}

@media(max-width:820px){

    body.has-background-image{
        background-attachment:scroll !important;
    }

    body.has-background-image .wrap{
        background:rgba(255,255,255,.91);
    }
}



/* =========================================================
   AR8_BALANCED_CAPTURE_V1
   Balanced two-column Build-For-Me landing page
   ========================================================= */

body .wrap{
    align-items:start;
}


/*
 * Slightly tighter master container.
 * Keeps the page substantial without unnecessary height.
 */
body.tpl-simple .wrap,
body.tpl-blue .wrap,
body.tpl-green .wrap,
body.tpl-orange .wrap,
body.tpl-grey .wrap,
body.tpl-spotlight .wrap,
body.tpl-newsletter .wrap,
body.tpl-personal .wrap{

    margin:28px auto;
    padding:30px 36px;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(370px,.92fr);

    gap:38px;
    align-items:start;
}


/* Left column */

body .landing-copy{
    padding:8px 4px;
}

body .landing-badge{
    margin-bottom:12px;
}

body .landing-copy h1{
    margin-bottom:14px;
    font-size:39px;
}

body .landing-description{
    margin-bottom:20px;
    font-size:17px;
    line-height:1.55;
}

body .landing-benefits{
    gap:12px;
}


/* Right-hand column */

body .form-column{
    grid-area:form;
    width:100%;
    align-self:start;
}


/*
 * Build-For-Me recommendation panel.
 */

body .landing-recommendation{
    margin:0 0 14px;
    padding:17px 19px;

    border:1px solid #b9dbc1;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #f1faf3,
            #f8fcf9
        );

    box-shadow:
        0 7px 18px
        rgba(52,105,67,.07);
}

body .landing-recommendation-title{
    margin:0 0 6px;

    color:#287744;
    font-size:17px;
    font-weight:700;
}

body .landing-recommendation-text{
    color:#526773;
    font-size:14px;
    line-height:1.5;
}


/* Form is slightly more compact */

body .form-card{
    padding:24px 26px;
}

body .form-heading{
    font-size:24px;
}

body .form-subheading{
    margin-bottom:15px;
}


/*
 * Mobile remains a simple one-column layout.
 */

@media(max-width:820px){

    body.tpl-simple .wrap,
    body.tpl-blue .wrap,
    body.tpl-green .wrap,
    body.tpl-orange .wrap,
    body.tpl-grey .wrap,
    body.tpl-spotlight .wrap,
    body.tpl-newsletter .wrap,
    body.tpl-personal .wrap{

        width:min(620px,94%);
        padding:22px;
        grid-template-columns:1fr;
        grid-template-areas:
            "copy"
            "form";
        gap:18px;
    }

    body .form-column{
        width:100%;
    }

    body .landing-recommendation{
        text-align:left;
    }
}


@media(max-width:500px){

    body.tpl-simple .wrap,
    body.tpl-blue .wrap,
    body.tpl-green .wrap,
    body.tpl-orange .wrap,
    body.tpl-grey .wrap,
    body.tpl-spotlight .wrap,
    body.tpl-newsletter .wrap,
    body.tpl-personal .wrap{

        width:96%;
        margin:16px auto;
        padding:16px;
    }

    body .landing-copy h1{
        font-size:29px;
    }

    body .form-card{
        padding:22px 20px;
    }
}