.mailing-workspace{
    --mail-ink:#17253b;
    --mail-muted:#4b5c72;
    --mail-accent:#a74a08;
    --mail-paper:#fff;
    --mail-ground:#f1f4f7;
    color:var(--mail-ink);
    background:var(--mail-ground);
    padding:2.5rem 0 4rem
}
.mailing-shell{
    max-width:1180px;
    margin:auto;
    padding:0 24px
}
.mailing-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:30px
}
.mailing-heading h1{
    font-size:clamp(1.8rem,4vw,2.5rem);
    font-weight:750;
    line-height:1.18;
    letter-spacing:-.025em;
    margin:0 0 12px
}
.mailing-heading p{
    max-width:65ch;
    color:var(--mail-muted);
    line-height:1.6
}
.mailing-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:28px;
    align-items:start
}
.mailing-form{
    min-width:0
}
.mailing-section{
    background:var(--mail-paper);
    padding:28px;
    margin-bottom:20px;
    border-radius:12px
}
.mailing-section h2,.mailing-summary h2{
    font-size:1.2rem;
    font-weight:700;
    margin:0 0 8px
}
.mailing-help{
    font-size:.9rem;
    line-height:1.6;
    color:var(--mail-muted);
    margin:0 0 18px
}
.mailing-section legend{
    font-size:1rem;
    font-weight:650;
    margin-bottom:10px
}
.mailing-section fieldset{
    min-width:0;
    margin:20px 0 0
}
.mailing-section fieldset:first-child{
    margin-top:0
}
.mailing-choices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}
.mailing-choice{
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid #c6cfda;
    border-radius:8px;
    padding:14px;
    cursor:pointer;
    min-height:64px;
    transition:background-color .15s,color .15s
}
.mailing-choice:has(input:checked){
    background:#fff6e7;
    border-color:var(--mail-accent)
}
.mailing-choice:has(input:disabled){
    background:#f1f4f7;
    color:#637084;
    cursor:not-allowed
}
.mailing-choice input{
    margin-top:4px;
    flex:none;
    color:var(--mail-accent)
}
.mailing-choice strong{
    display:block;
    font-size:.95rem
}
.mailing-choice small{
    display:block;
    font-size:.83rem;
    line-height:1.5;
    color:var(--mail-muted);
    margin-top:3px
}
.mailing-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:18px
}
.mailing-field{
    min-width:0
}
.mailing-field.wide{
    grid-column:1/-1
}
.mailing-field label{
    display:block;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:6px
}
.mailing-field input:not([type=checkbox]):not([type=radio]),.mailing-field select,.mailing-field textarea{
    width:100%;
    min-height:44px;
    border:1px solid #a9b6c7;
    border-radius:6px;
    background:#fff;
    padding:10px 12px;
    color:var(--mail-ink);
    font:inherit;
    font-size:.95rem
}
.mailing-field input[type=file]{
    font-size:.85rem!important;
    max-width:100%;
    padding:8px!important
}
.mailing-field input[type=file]::file-selector-button{
    border:0;
    border-radius:4px;
    background:#e6ebf1;
    padding:8px 10px;
    margin-right:10px;
    color:var(--mail-ink);
    cursor:pointer
}
.mailing-field textarea{
    min-height:92px;
    resize:vertical
}
.mailing-field p{
    font-size:.82rem;
    color:var(--mail-muted);
    line-height:1.5;
    margin-top:6px
}
.mailing-summary{
    position:sticky;
    top:94px;
    background:#17253b;
    color:white;
    padding:24px;
    border-radius:12px
}
.mailing-summary p,.mailing-summary small{
    color:#d4deeb;
    font-size:.9rem;
    line-height:1.6
}
.mailing-summary dl{
    margin:20px 0
}
.mailing-summary dt{
    color:#b7c6d9;
    font-size:.82rem;
    margin-top:16px
}
.mailing-summary dd{
    font-size:1rem;
    font-weight:600;
    margin-top:3px;
    overflow-wrap:anywhere
}
.mailing-summary .mailing-total{
    font-size:2rem;
    font-weight:700;
    font-variant-numeric:tabular-nums
}
.mailing-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:44px;
    padding:11px 18px;
    border:0;
    border-radius:6px;
    background:#a74a08;
    color:white;
    font-weight:650;
    font-size:.95rem;
    line-height:1.4;
    cursor:pointer;
    text-decoration:none;
    gap:8px
}
.mailing-btn:hover{
    background:#803800
}
.mailing-btn.secondary{
    background:#e6ebf1;
    color:var(--mail-ink)
}
.mailing-btn.secondary:hover{
    background:#d4deeb
}
.mailing-btn:disabled{
    cursor:wait;
    opacity:.65
}
.mailing-link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    text-decoration:underline;
    text-underline-offset:4px;
    color:#823a08;
    font-weight:600
}
.mailing-note{
    padding:16px 18px;
    background:#fff2d7;
    color:#61360b;
    border-radius:8px;
    line-height:1.6;
    font-size:.9rem;
    margin:16px 0
}
.mailing-notice{
    padding:16px 18px;
    background:#e7f1fc;
    color:#193f69;
    border-radius:8px;
    line-height:1.6;
    font-size:.9rem;
    margin:16px 0
}
.mailing-errors{
    background:#fff0ef;
    color:#8a251a;
    border:1px solid #c95746;
    padding:20px;
    border-radius:8px;
    margin-bottom:24px
}
.mailing-errors a{
    text-decoration:underline
}
.mailing-recipient{
    background:#f4f6f9;
    padding:18px;
    margin:14px 0;
    border-radius:8px
}
.mailing-recipient-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px
}
.mailing-recipient-header h3{
    font-size:1rem;
    font-weight:650
}
.mailing-remove{
    min-height:44px;
    padding:8px;
    background:transparent;
    color:#823a08;
    text-decoration:underline
}
.mailing-check{
    display:flex;
    gap:12px;
    align-items:flex-start;
    font-size:.9rem;
    line-height:1.6;
    margin:16px 0;
    min-height:44px
}
.mailing-check input{
    margin-top:5px;
    color:var(--mail-accent);
    flex:none
}
.mailing-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:22px
}
.mailing-item{
    padding:20px 0;
    border-top:1px solid #d5dce6;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:start
}
.mailing-item:first-of-type{
    border-top:0
}
.mailing-item h3{
    font-weight:650;
    margin-bottom:4px
}
.mailing-item p{
    font-size:.9rem;
    color:var(--mail-muted);
    line-height:1.6
}
.mailing-label{
    display:inline-block;
    background:#e6ebf1;
    color:#263c57;
    border-radius:4px;
    padding:4px 8px;
    font-size:.8rem;
    font-weight:650
}
.mailing-money{
    font-size:1.1rem;
    font-weight:650;
    white-space:nowrap;
    font-variant-numeric:tabular-nums
}
.mailing-catalog{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    font-size:.85rem;
    margin:18px 0 0;
    color:var(--mail-muted)
}
.mailing-workspace [hidden]{
    display:none!important
}
.mailing-workspace :focus-visible{
    outline:3px solid #ae520c;
    outline-offset:3px
}
.mailing-workspace input,.mailing-workspace textarea{
    caret-color:#a74a08
}
.mailing-workspace ::selection{
    background:#ffd58f;
    color:#17253b
}
.mailing-workspace input::placeholder,.mailing-workspace textarea::placeholder{
    color:#5c6a7e;
    opacity:1
}
.mailing-inline-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px
}
.mailing-inline-options label{
    display:flex;
    gap:8px;
    align-items:center;
    min-height:44px;
    padding:8px 12px;
    background:#f1f4f7;
    border-radius:6px;
    font-size:.9rem
}
.mailing-status-text{
    line-height:1.6;
    font-size:.9rem;
    color:var(--mail-muted)
}
@media(max-width:900px){
    .mailing-layout{
        grid-template-columns:minmax(0,1fr)
    }
    .mailing-summary{
        position:static;
        grid-row:1
    }
    .mailing-summary dl{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px 20px;
        margin:12px 0
    }
    .mailing-summary dt{
        margin-top:0
    }
    .mailing-summary dl div{
        min-width:0
    }
    .mailing-summary .mailing-total{
        font-size:1.6rem
    }
}
@media(max-width:550px){
    .mailing-workspace{
        padding-top:24px
    }
    .mailing-shell{
        padding:0 16px
    }
    .mailing-heading{
        display:block
    }
    .mailing-heading h1{
        font-size:1.9rem
    }
    .mailing-section{
        padding:20px 16px
    }
    .mailing-choices,.mailing-fields{
        grid-template-columns:minmax(0,1fr)
    }
    .mailing-field.wide{
        grid-column:auto
    }
    .mailing-summary{
        padding:20px
    }
    .mailing-summary dl{
        grid-template-columns:minmax(0,1fr)
    }
    .mailing-item{
        grid-template-columns:minmax(0,1fr)
    }
    .mailing-actions .mailing-btn{
        width:100%
    }
    .mailing-recipient{
        padding:14px
    }
    .mailing-recipient-header{
        align-items:flex-start
    }
}
@media(prefers-reduced-motion:reduce){
    .mailing-choice{
        transition:none
    }
}
.mailing-summary summary{
    font-size:1.2rem;
    font-weight:700;
    list-style:none;
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:space-between
}
.mailing-summary summary::-webkit-details-marker{
    display:none
}
.mailing-summary-hint{
    font-size:.82rem;
    color:#d4deeb;
    font-weight:400
}
.mailing-summary details[open] .mailing-summary-hint{
    display:none
}
.mailing-field-error{
    color:#8a251a;
    font-size:.9rem;
    line-height:1.5;
    margin-top:10px
}
.mailing-workspace [aria-invalid=true]{
    border-color:#a62b1c!important
}
@media(min-width:901px){
    .mailing-summary summary{
        cursor:default;
        pointer-events:none
    }
    .mailing-summary-hint{
        display:none
    }
}
.mailing-workspace input[type=radio],.mailing-workspace input[type=checkbox]{
    color:var(--mail-accent)
}

/* Preserve the enlarged logo and navigation controls when text is zoomed. */
.sc-site:has(.mailing-workspace) #site-header > nav > div:first-child {
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    row-gap: 8px;
}
.sc-site:has(.mailing-workspace) #site-header > nav > div:first-child > div:last-child {
    margin-left: auto;
}
