/* Isolated hero proposals. Brand fonts and navigation are inherited from the LP.
   Pills are reserved for actions; media uses the established 16px radius. */
.preview{--hero-accent:#0073ab;--hero-ink:#102d46;--hero-body:#465e6d;--hero-bg:#edf5fa;--hero-band:#e5eef3;background:#fff}
.preview .btn-primary{background:var(--hero-accent)}
.preview .btn-primary:hover{background:#005d8b}
.proposal-hero{padding:0;background:var(--hero-bg);color:var(--hero-ink)}
.hero-layout{width:min(1272px,calc(100% - 64px));margin:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:'copy photo' 'proof proof';column-gap:64px;align-items:center;padding-top:40px}
.hero-copy{grid-area:copy;min-width:0;padding:8px 0}
.hero-eyebrow{display:block;font:700 12px/1.5 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--hero-accent);margin-bottom:12px}
.proposal-hero h1{font:800 clamp(32px,3.35vw,48px)/1.15 Manrope,sans-serif;letter-spacing:-.035em;color:var(--hero-ink);margin:0}
.proposal-hero h1>span{display:block;white-space:nowrap}
.proposal-hero h1 em{font-style:normal;color:var(--hero-accent)}
.hero-subtitle{font:650 21px/1.4 Manrope,sans-serif;color:var(--hero-accent);margin:18px 0 24px;white-space:nowrap}
.hero-description{max-width:52ch;margin:0;font:400 16px/1.55 Inter,sans-serif;color:var(--hero-body)}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:50ch;font:400 16px/1.55 Inter,sans-serif;color:var(--hero-body)}
.hero-points li{position:relative;padding-left:24px}
.hero-points li::before{content:'✓';position:absolute;left:0;color:var(--hero-accent);font-weight:700}
.hero-points strong{font-weight:600}
.hero-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;margin-top:24px;background:var(--hero-accent);color:#fff;font:700 16px/1.5 Manrope,sans-serif;border-radius:999px;white-space:nowrap;transition:background-color .18s,transform .18s}
.hero-button:hover{background:#005d8b;color:#fff}.hero-button:active{transform:translateY(1px)}
.preview a:focus-visible{outline:3px solid #102d46;outline-offset:4px}
.hero-photo{grid-area:photo;min-width:0;margin:0;height:402px;border-radius:16px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;display:block}
.hero-proof{grid-area:proof;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:32px 0;margin-top:40px;position:relative;isolation:isolate}
.hero-proof::before{content:'';position:absolute;inset:0 calc((1272px - 100vw)/2);background:var(--hero-band);z-index:-1}
.hero-benefit{padding:0 24px;min-width:0}.hero-benefit:first-child{padding-left:0}.hero-benefit:last-child{padding-right:0}.hero-benefit+.hero-benefit{border-left:1px solid #c7d9e4}
.hero-benefit h2{font:650 18px/1.35 Manrope,sans-serif;letter-spacing:-.015em;color:var(--hero-ink);margin:0 0 10px;text-wrap:balance}
.hero-benefit p{font:400 16px/1.5 Inter,sans-serif;color:var(--hero-body);margin:0}.hero-benefit strong{font-weight:700;color:inherit}
.preview-switch{max-width:1272px;margin:40px auto;padding:24px 32px;font-size:14px;color:var(--hero-body)}
.preview-switch p{margin-bottom:12px}.preview-switch nav{display:flex;flex-wrap:wrap;gap:8px 24px}.preview-switch a{color:#006b9e;padding:8px 0;text-decoration:underline;text-underline-offset:4px}.preview-switch [aria-current]{font-weight:700;color:var(--hero-ink)}
/* B: a single editorial composition; the four reasons stay with the offer. */
.variant-b{--hero-bg:#f3f7f9}
.variant-b .hero-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:'copy photo' 'proof photo';gap:0 48px;padding-top:36px;padding-bottom:36px;align-items:start}
.variant-b .hero-photo{height:100%;min-height:620px;align-self:stretch}.variant-b .hero-photo img{object-position:58% center}
.variant-b .hero-proof{grid-template-columns:1fr 1fr;gap:24px 28px;margin-top:32px;padding:28px 0 0;border-top:1px solid #ccdce6}
.variant-b .hero-proof::before{display:none}.variant-b .hero-benefit{padding:0;border:0}.variant-b .hero-benefit h2{font-size:17px}.variant-b .hero-benefit p{font-size:16px}
.variant-b .hero-subtitle{margin-bottom:20px}.variant-b .hero-points{max-width:51ch}
/* C: edge-to-edge photography, balanced by a generous text column. */
.variant-c .hero-layout{width:100%;max-width:1600px;grid-template-columns:1fr 1fr;gap:0;padding-top:0}
.variant-c .hero-copy{padding:40px 40px 40px max(32px,calc((100vw - 1272px)/2));min-height:466px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.variant-c .hero-photo{height:100%;min-height:466px;border-radius:0 0 0 32px;align-self:stretch}
.variant-c .hero-proof{width:min(1272px,calc(100% - 64px));margin:0 auto;padding:36px 0}
.variant-c .hero-proof::before{display:none}
@media(min-width:1600px){.variant-c .hero-copy{padding-left:164px}.variant-c .hero-photo{border-radius:0 0 32px 32px}}
@media(max-width:1336px){.hero-proof::before{inset:0 -32px}.hero-layout{column-gap:40px}.hero-benefit{padding:0 20px}.variant-c .proposal-hero h1{font-size:clamp(30px,3.2vw,48px)}}
@media(min-width:768px) and (max-width:1023px){.hero-layout{column-gap:28px;grid-template-columns:1.1fr 1fr}.proposal-hero h1{font-size:clamp(26px,3.4vw,35px)}.hero-subtitle{font-size:18px}.hero-photo{height:360px}.hero-proof{grid-template-columns:1fr 1fr;gap:28px 0}.hero-benefit:nth-child(3){border-left:0;padding-left:0}.hero-benefit:nth-child(2){padding-right:0}.variant-b .hero-layout{grid-template-columns:1.2fr 1fr;gap:0 28px}.variant-b .hero-proof{grid-template-columns:1fr}.variant-b .hero-photo img{object-position:62% center}.variant-c .hero-copy{padding:32px 24px 32px 32px}.variant-c .hero-subtitle{font-size:17px}}
@media(max-width:767px){
 .hero-layout,.variant-b .hero-layout,.variant-c .hero-layout{width:100%;display:flex;flex-direction:column;gap:0;padding:0}
 .hero-copy,.variant-c .hero-copy{width:100%;padding:28px 16px;min-height:0;display:block}
 .hero-eyebrow{margin-bottom:8px}
 .proposal-hero h1,.variant-c .proposal-hero h1{font-size:clamp(26px,8.15vw,48px);line-height:1.16;letter-spacing:-.035em}
 .hero-subtitle,.variant-b .hero-subtitle,.variant-c .hero-subtitle{font-size:clamp(17px,4.9vw,26px);margin:16px 0 24px;line-height:1.4}
 .hero-description{font-size:16px;line-height:1.55}
 .hero-points{font-size:16px;line-height:1.5;gap:12px;max-width:54ch}
 .hero-button{margin-top:24px;min-height:52px}
 .hero-photo,.variant-b .hero-photo,.variant-c .hero-photo{width:calc(100% - 32px);height:auto;min-height:0;aspect-ratio:6/5;border-radius:16px;align-self:center}
 .hero-photo img,.variant-b .hero-photo img{object-position:50% 82%}
 .hero-proof,.variant-b .hero-proof,.variant-c .hero-proof{width:100%;display:grid;grid-template-columns:1fr;gap:24px;margin:28px 0 0;padding:28px 16px;border:0}
 .hero-proof::before{inset:0}.hero-benefit,.hero-benefit:first-child,.hero-benefit:last-child{padding:0;border:0}
 .hero-benefit h2,.variant-b .hero-benefit h2{font-size:18px;text-wrap:initial;margin-bottom:8px}
 .variant-b .hero-proof{margin-top:4px;padding-top:28px;gap:24px}
 .variant-c .hero-photo{width:100%;border-radius:0;aspect-ratio:5/4}
 .variant-c .hero-proof{margin-top:0;padding:32px 16px}
 .preview-switch{margin:16px auto;padding:24px 16px}
}
@media(prefers-reduced-motion:reduce){.preview *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Remove the main site's decorative section grid from these quiet proposals. */
.preview .proposal-hero::before{display:none}
@media(min-width:768px){
 .variant-c .hero-photo{height:466px;min-height:0}
 .variant-b .hero-layout{padding-top:28px;padding-bottom:28px}
 .variant-b .proposal-hero h1{font-size:clamp(26px,3vw,42px)}
 .variant-b .hero-subtitle{margin-top:14px;margin-bottom:18px}
 .variant-b .hero-points{line-height:1.5;gap:10px}
 .variant-b .hero-button{margin-top:20px}
 .variant-b .hero-proof{margin-top:24px;padding-top:22px;gap:20px 28px}
 .variant-b .hero-photo{min-height:0}
}
@media(max-width:767px){.hero-benefit+.hero-benefit{border:0}}
@media(min-width:768px){.variant-c .hero-photo{height:clamp(490px,34vw,544px)}.variant-c .hero-photo img{object-position:50% 74%}.variant-c .hero-proof{padding-top:28px;padding-bottom:28px}}
/* Benefits now have two reading levels: short claims and optional detail.
   All four claims stay visible; native details supports touch and keyboard. */
.preview .hero-proof{align-items:start;background:none;border:0;gap:24px;padding:24px 0 32px;margin-top:28px}
.preview .hero-proof::before{display:none}
.preview .hero-benefit,.preview .hero-benefit:first-child,.preview .hero-benefit:last-child{padding:0;border:0;min-width:0}
.hero-benefit summary{position:relative;list-style:none;cursor:pointer;min-height:64px;padding:4px 24px 4px 0;border-radius:4px}
.hero-benefit summary::-webkit-details-marker{display:none}
.preview .hero-benefit h2{font:650 16px/1.4 Manrope,sans-serif;letter-spacing:-.01em;text-wrap:initial;margin:0;color:var(--hero-ink)}
.preview .hero-benefit .benefit-brief{font:400 14px/1.5 Inter,sans-serif;margin:5px 0 0;color:var(--hero-body)}
.benefit-toggle{position:absolute;right:1px;top:11px;width:12px;height:12px;color:var(--hero-accent)}
.benefit-toggle::before,.benefit-toggle::after{content:'';position:absolute;background:currentColor;top:5px;left:0;width:12px;height:2px}
.benefit-toggle::after{transform:rotate(90deg)}
.hero-benefit[open] .benefit-toggle::after{display:none}
.preview .hero-benefit .benefit-detail{margin:12px 0 0;font:400 16px/1.5 Inter,sans-serif;color:var(--hero-body);max-width:52ch}
.hero-benefit summary:hover h2{color:var(--hero-accent)}
.hero-benefit summary:focus-visible{outline:2px solid var(--hero-accent);outline-offset:5px}
.preview.variant-b .hero-proof{gap:16px 32px;margin-top:24px;padding:0}
.variant-b .hero-benefit summary{min-height:64px}
.preview.variant-c .hero-proof{gap:32px;margin-top:0;padding:28px 0}
.variant-c .benefit-brief{display:none}
.variant-c .hero-benefit summary{min-height:52px;display:flex;align-items:center;padding-top:0;padding-bottom:0}
.variant-c .benefit-toggle{top:20px}
@media(min-width:768px){
 .variant-b .hero-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
 .variant-b .hero-photo{height:100%;max-height:600px}
 .variant-c .hero-benefit h2{font-size:16px}
}
@media(max-width:767px){
 .preview .hero-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;width:100%;margin:0;padding:28px 16px 32px}
 .preview .hero-benefit h2{font-size:16px}
 .hero-benefit summary{min-height:92px;padding-right:18px}
 .preview.variant-b .hero-proof{grid-template-columns:1fr;gap:12px;margin:0;padding:24px 16px 32px}
 .variant-b .hero-benefit summary{min-height:58px;padding-right:28px}
 .variant-b .hero-benefit .benefit-brief{margin-top:2px}
 .variant-b .benefit-toggle{top:22px}
 .preview.variant-c .hero-proof{grid-template-columns:1fr;gap:0;margin:0;padding:20px 16px 24px}
 .variant-c .hero-benefit summary{min-height:52px;padding-right:28px}
 .variant-c .hero-benefit .benefit-detail{margin-top:0;margin-bottom:16px}
}
/* A and B: full descriptions are always visible at the compact 14px size. */
.preview .benefit-full .benefit-detail{font-size:14px;line-height:1.5;margin:6px 0 0;max-width:52ch}
@media(min-width:768px){
 /* A borrows C's edge-to-edge desktop photography and copy alignment. */
 .variant-a .hero-layout{width:100%;max-width:1600px;grid-template-columns:1fr 1fr;gap:0;padding-top:0}
 .variant-a .hero-copy{padding:40px 40px 40px max(32px,calc((100vw - 1272px)/2));min-height:466px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 .variant-a .hero-photo{height:clamp(490px,34vw,544px);min-height:0;border-radius:0 0 0 32px;align-self:stretch}
 .variant-a .hero-photo img{object-position:50% 74%}
 .preview.variant-a .hero-proof{width:min(1272px,calc(100% - 64px));margin:0 auto;padding:28px 0;gap:32px}
}
@media(min-width:1600px){.variant-a .hero-copy{padding-left:164px}.variant-a .hero-photo{border-radius:0 0 32px 32px}}
@media(min-width:768px) and (max-width:1023px){.variant-a .hero-copy{padding:32px 24px 32px 32px}.variant-a .hero-subtitle{font-size:17px}}
@media(min-width:768px) and (max-width:1336px){.variant-a .proposal-hero h1{font-size:clamp(30px,3.2vw,48px)}}
@media(max-width:767px){
 .preview.variant-b .hero-proof{gap:20px}
 .preview.variant-b .benefit-full{position:relative;padding:0 0 0 28px}
 .variant-b .benefit-full::before{content:'✓';position:absolute;left:0;top:0;color:var(--hero-accent);font:700 17px/1.4 Manrope,sans-serif}
}

@media(min-width:768px){
 .preview.variant-a .hero-proof{padding-top:52px}
 .variant-a .hero-photo{border-top-left-radius:32px}
}

/* A uses the same mobile benefit treatment as B. */
@media(max-width:767px){
 .preview.variant-a .hero-proof{grid-template-columns:1fr;gap:20px;margin:0;padding:24px 16px 32px}
 .preview.variant-a .benefit-full{position:relative;padding:0 0 0 28px}
 .variant-a .benefit-full::before{content:'✓';position:absolute;left:0;top:0;color:var(--hero-accent);font:700 17px/1.4 Manrope,sans-serif}
}
.variant-a .hero-description{color:#29485d}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:24px}
.hero-actions .hero-button{margin-top:0}
.hero-secondary{display:inline-flex;align-items:center;min-height:48px;color:var(--hero-accent);font:650 15px/1.4 Manrope,sans-serif;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;white-space:nowrap}
.hero-secondary:hover{color:#005d8b;text-decoration-thickness:2px}
.hero-secondary:active{transform:translateY(1px)}
/* A: stronger benefit headings on desktop and mobile. */
@media(min-width:768px){.preview.variant-a .hero-benefit h2{font-size:18px}}
@media(max-width:767px){.preview.variant-a .hero-benefit h2{font-size:17px}}
/* A: quiet secondary action and more compact mobile section navigation. */
@media(min-width:768px){.preview.variant-a .hero-benefit h2{font-size:20px}}
.variant-a .hero-secondary{color:#29485d;border:1px solid #c7d4de;border-radius:999px;padding:12px 20px;text-decoration:none;background:transparent}
.variant-a .hero-secondary:hover{color:#102d46;border-color:#91a6b5;background:transparent;text-decoration:none}
@media(max-width:767px){
}
@media(max-width:767px){}
.variant-a.preview .hero-benefit h2{font-weight:600}
/* A: equal-height actions, kept on one row on mobile. */
.variant-a .hero-actions .hero-button,
.variant-a .hero-actions .hero-secondary{height:52px;min-height:52px;box-sizing:border-box;justify-content:center}
@media(max-width:767px){
 .variant-a .hero-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;width:100%}
 .variant-a .hero-actions .hero-button,
 .variant-a .hero-actions .hero-secondary{width:100%;padding:12px 8px;font-size:clamp(12px,3.5vw,15px);white-space:nowrap}
}

@media(max-width:767px){
 .variant-a .hero-actions{grid-template-columns:minmax(160px,1.2fr) minmax(0,1fr)}
 .variant-a .hero-actions .hero-button{font-size:16px}
 .variant-a .hero-actions .hero-secondary{font-size:15px}
}

@media(min-width:981px){}
/* Selected A: more space above the desktop benefits and quiet separators. */
@media(min-width:768px){
 .preview.variant-a .hero-proof{padding-top:52px;align-items:stretch}
 .preview.variant-a .hero-benefit{position:relative}
 .preview.variant-a .hero-benefit+.hero-benefit::after{content:'';position:absolute;left:-16px;top:2px;bottom:2px;width:1px;background:rgba(16,45,70,.11);pointer-events:none}
}
@media(min-width:768px) and (max-width:1023px){
 .preview.variant-a .hero-benefit:nth-child(3)::after{display:none}
}
/* Equal column gutters place every separator midway between benefit contents. */
@media(min-width:768px){
 .preview.variant-a .hero-proof{column-gap:0}
 .preview.variant-a .hero-benefit,
 .preview.variant-a .hero-benefit:first-child,
 .preview.variant-a .hero-benefit:last-child{padding-left:24px;padding-right:24px}
 .preview.variant-a .hero-benefit+.hero-benefit::after{left:0;transform:translateX(-50%)}
}
/* Fill the first desktop screen with hero background; let content grow naturally. */
@media(min-width:1024px) and (max-width:1920px) and (max-height:1080px){
 .variant-a .proposal-hero{min-height:calc(100svh - 75px)}
}
@media(min-width:981px){.hero-selected .hero-benefit .benefit-detail{font-size:15px}}
/* Align the first desktop benefit with the hero copy container. */
@media(min-width:981px){.preview.variant-a .hero-benefit:first-child{padding-left:0}}

@media(max-width:767px){
 .variant-a .hero-actions .hero-button,
 .variant-a .hero-actions .hero-secondary{font-size:15px}
}