/* Prime creative direction: original logo and copy, paper / navy / blue. */
@font-face{font-family:PrimeDisplay;src:url('/assets/prime-display.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#092c42;--muted:#596c77;--blue:#006ce0;--line:#d5dedc;--wash:#e5f0f5;--white:#fffdf8;--paper:#f5f3eb}
body{background:var(--paper);color:var(--ink)}
body h1,body h2{font-family:PrimeDisplay,Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.98}
body h1{font-size:clamp(55px,6.5vw,96px)}body h2{font-size:clamp(38px,4.4vw,65px)}
body h3{font-family:Manrope,Arial,sans-serif;letter-spacing:-.035em}
.wrap{max-width:1440px;padding-inline:5%}.section{padding-block:88px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#0061c7}
.site-header{background:var(--paper);border-color:var(--line)}.header-inner{height:100px}.logo{width:195px}.logo img{display:block;width:100%;height:auto}
#main-nav{gap:25px;font-size:12px}.login{margin-left:8px}.section-nav{background:var(--paper)}
.button{border-radius:40px;padding:15px 24px;font-size:13px;background:var(--ink);border-color:var(--ink);box-shadow:none}.button:hover{background:var(--blue);border-color:var(--blue)}.button.small{border-radius:30px;padding:12px 20px}.button.outline{border-color:#7b919d;background:transparent}.button.outline:hover{color:var(--ink);background:#dcebf4}.button.light{color:var(--ink);background:#fffdf8}.button span{margin-left:12px}.button-row{gap:30px}
/* Restore the original side-by-side hero composition with the new typography. */
.hero-field{background:var(--paper)}
.hero-field .hero{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding-block:60px;align-items:center}
.hero-copy{display:block;max-width:590px}
.hero-field .hero h1{font-size:clamp(62px,6vw,86px);line-height:.97;letter-spacing:-.018em}
.hero h1 em{color:var(--blue)}
.hero .lead{font-size:17px;line-height:1.65}
.hero-copy .button-row{justify-content:flex-start;margin-top:28px;gap:22px}
.hero-price{text-align:left}

.proof-strip{background:var(--ink);border-block:1px solid var(--ink)}.proof-strip .wrap{padding-block:25px}.proof-strip span{color:#a9d7ff;font-size:10px}.proof-strip p{color:#fffdf8}
.benefit-grid{gap:40px}.benefit-grid article{padding-top:27px}.section-number{font-family:PrimeDisplay;font-size:40px;color:var(--blue)}.benefit-grid h3{font-size:23px}.benefit-grid p{font-size:14px}.section-heading{gap:55px}.section-heading>p{font-size:15px}
.audience-section,.blue-wash,.design-section{background:var(--wash)}.audience-card,.design-options article,.price-card,.contact-form,.guide-card{background:#fffdf8;border:1px solid var(--line);border-radius:4px;box-shadow:none}.audience-card{padding:28px}.audience-card-top>span:first-child{font-family:PrimeDisplay;font-size:35px;color:var(--blue)}.audience-map{border-radius:4px;box-shadow:14px 14px 0 #bed9eb}.design-options article{border-radius:4px;padding:28px}.design-options article>span{color:var(--blue)}
.steps{gap:0;border-top:1px solid var(--line)}.steps article{padding:28px 24px;border-right:1px solid var(--line)}.steps article:last-child{border-right:0}.steps h3{font-size:22px}.steps p{font-size:14px}.use-section{background:var(--ink);color:white}.use-section h2,.use-section h3,.use-section a{color:#fffdf8}.use-section p{color:#b8d0dd}.use-section .eyebrow{color:#9bd5ff}.use-list>a{border-color:#476071}.use-list>a>span{color:#93d1ff}
.price-card{border-radius:4px;padding:38px}.price-card.prime{background:#d9ebfa;border:1px solid #96c4e7;border-top:5px solid var(--blue)}.plan-monthly{font-family:PrimeDisplay;font-size:84px;line-height:1;color:var(--ink)}.plan-monthly span{font-family:Arial,sans-serif;font-size:14px}.savings-badge{background:#b8dcf7;color:#073f72}.scale-banner,.guideline-banner{border-radius:4px;background:#e5edf0}.faq details{border-color:var(--line);background:transparent}.cta{background:var(--blue);color:white}.cta h2{font-size:clamp(48px,6vw,84px)}.cta p{color:#e9f5ff}.cta .button{background:#fffdf8;color:var(--ink);border-color:#fffdf8}.site-footer{background:var(--ink);color:white}.site-footer p,.site-footer a{color:#ccdde7}.footer-brand{font-family:PrimeDisplay;font-size:35px;letter-spacing:0}
.industries-intro,.audiences-hero,.studio-intro,.pricing-intro,.page-intro{padding-block:65px}.industry-case{padding-block:60px;border-bottom:1px solid var(--line)}.case-art{border-radius:4px;background:#dcebf4}.industry-jumps a,.filter,.use-pills span{border-radius:30px}.filter.active{background:var(--ink);color:white}.gallery-grid{gap:28px}.template-card{border-radius:4px;border-color:var(--line);background:#fffdf8;box-shadow:none}.template-card .preview{background:#e1e9ec}.template-detail h1{font-size:clamp(48px,6vw,80px)}
/* Postcard artwork and print-layout selectors intentionally retain their own typography. */
.mailer h3{font-family:Georgia,serif;text-transform:none}.legal-page h2,.legal-content h2,.legal-layout h2{font-family:Manrope,Arial,sans-serif;font-size:26px;text-transform:none;line-height:1.25}
@media(max-width:1100px){#main-nav{gap:14px}.header-inner{gap:20px}.logo{width:165px}}
@media(max-width:760px){.wrap{padding-inline:6%}.section{padding-block:55px}.header-inner{height:82px}.logo{width:175px}body h1{font-size:60px}body h2{font-size:44px}.proof-strip .wrap{gap:14px}.steps article{padding:25px 12px;border-right:0;border-bottom:1px solid var(--line)}.price-card{padding:26px}.audience-map{box-shadow:7px 7px 0 #bed9eb}.cta h2{font-size:50px}.site-header #main-nav{background:var(--paper)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.button{transition:none}}

/* Creative options use the same readable light surfaces as audience tools. */
.design-section{background:var(--wash);color:var(--ink)}
.design-section h2,.design-section h3,.design-section .gallery-meta a{color:var(--ink)}
.design-section p,.design-section .section-heading>p,.design-section .section-action>span,.design-section .gallery-meta span{color:var(--muted)}
.design-section .eyebrow,.design-section .design-options span{color:#0061c7}
.design-section .design-options article{background:var(--white);border:1px solid var(--line)}
.design-section .text-link{color:var(--ink)}
.design-section .gallery-meta a:hover,.design-section .text-link:hover{color:#005bbd}
/* Neutral stages let the uploaded template artwork supply its own color. */
.design-preview,.design-section .design-preview,.template-card .preview,.case-art,.art-link{background:#f0eee7}
.industry-jumps>a{background:var(--white);border-color:#9aabb4;color:var(--ink)}
.industry-jumps>a:hover{background:var(--ink);color:white;border-color:var(--ink)}
.case-links .button,.beyond-industries .button{background:#0061c7;border-color:#0061c7;color:white}
.case-links .button:hover,.beyond-industries .button:hover{background:var(--ink);border-color:var(--ink)}
.scale-banner{background:var(--ink);color:var(--white);border-left:6px solid #006ce0}
.scale-banner h3{color:var(--white)}
.scale-banner .eyebrow{color:#a9d7ff}
.scale-banner p{color:#d8e5ed}
.scale-banner .button{background:var(--white);border-color:var(--white);color:var(--ink)}
.scale-banner .button:hover{background:#d7eafb;border-color:#d7eafb}
@media(max-width:760px){.hero-field .hero{grid-template-columns:1fr;gap:25px;padding-block:40px}.hero-field .hero h1{font-size:clamp(52px,11vw,76px)}.hero-copy .button-row{flex-wrap:wrap}}

.design-section .design-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case-links .text-link{display:inline-flex;padding:12px 20px;border-radius:30px;background:#0061c7;color:white}
.case-links .text-link:hover{background:var(--ink);color:white;text-decoration:none}
@media(max-width:480px){.design-section .design-options{grid-template-columns:1fr}}

/* White artwork stages with distinct, accessible front/back controls. */
.design-section .home-gallery .design-preview{background:#fff;border:1px solid var(--line)}
.design-section .home-gallery .preview-controls{background:#e8eef1;border:1px solid #c1cdd5}
.design-section .home-gallery .preview-controls button{color:#092c42}
.design-section .home-gallery .preview-controls button[aria-pressed=true]{background:#092c42;color:#fff;box-shadow:none}
.design-section .home-gallery .preview-controls button:hover{background:#d7eafb;color:#092c42}
.site-header #main-nav .button{background:var(--blue);border-color:var(--blue);color:#fff}
.site-header #main-nav .button:hover{background:#0054ad;border-color:#0054ad;color:#fff}

/* Three-card hero: independent depth and gentle drift, without moving the copy. */
.hero-showcase.showcase-trio{height:auto;aspect-ratio:.9;max-width:620px;width:100%;margin:0 auto 110px;perspective:1100px;isolation:isolate}
.showcase-trio .showcase-heading{position:absolute;top:0;right:0;left:auto;bottom:auto;z-index:5;max-width:215px;padding:11px 15px;background:#efe2b5;color:#092c42;border:1px solid #d6c58f;border-radius:4px;box-shadow:0 5px 12px #092c4210;transform:rotate(-3deg);font-size:9px;letter-spacing:.09em;line-height:1.8}
.showcase-heading strong{color:#092c42;font-weight:800}
.hero-showcase.showcase-trio .floating{width:64%;max-width:none;position:absolute;filter:none;border-radius:2px;box-shadow:0 18px 28px #092c4226,0 2px 3px #092c421f;transform:translateY(0) rotate(var(--tilt)) rotateY(var(--depth));animation:postcard-drift 9s ease-in-out infinite;backface-visibility:hidden}
.hero-showcase.showcase-trio .floating-one{top:20%;left:0;right:auto;--tilt:-8deg;--depth:9deg;z-index:1;animation-delay:-2s}
.hero-showcase.showcase-trio .floating-two{top:43%;right:0;left:auto;--tilt:6deg;--depth:-8deg;z-index:2;animation-delay:-5s}
.hero-showcase.showcase-trio .floating-three{top:66%;left:4%;right:auto;--tilt:-4deg;--depth:6deg;z-index:3;animation-delay:-7s}
.hero-showcase.showcase-trio .format-tag{top:calc(100% + 35px);bottom:auto;left:0;right:0;padding-top:16px;border-top:1px solid var(--line);background:transparent;transform:none}
.hero-showcase.showcase-trio .format-tag strong{font-size:15px;white-space:normal}
.hero-showcase.showcase-trio .sample-caption{top:calc(100% + 80px);bottom:auto;left:0;right:0;font-size:10px;text-align:center}
@keyframes postcard-drift{0%,100%{transform:translateY(0) rotate(var(--tilt)) rotateY(var(--depth))}50%{transform:translateY(-5px) rotate(calc(var(--tilt) + 1deg)) rotateY(calc(var(--depth) * -0.5))}}
@media(max-width:760px){.hero-showcase.showcase-trio{max-width:510px;margin-top:20px;aspect-ratio:.85;margin-bottom:110px}}
@media(max-width:400px){.showcase-trio .showcase-heading{font-size:8px;padding:10px 13px;max-width:195px}.hero-showcase.showcase-trio .format-tag strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hero-showcase.showcase-trio .floating{animation:none}}

/* Centered message strip with display labels and envelope separators. */
.proof-strip .proof-grid{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:28px;padding-block:38px;text-align:center}
.proof-strip .proof-item>span{display:block;font-family:PrimeDisplay,Impact,sans-serif;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:.035em;color:#b8ddfb;margin:0}
.proof-strip .proof-item p{font-family:Manrope,Arial,sans-serif;font-size:15px;line-height:1.55;margin:12px 0 0;color:#fffdf8}
.proof-strip .proof-mail{display:block;width:34px;height:34px;color:#a9d7ff;opacity:.85}
@media(max-width:1000px){.proof-strip .proof-grid{gap:16px}.proof-strip .proof-item>span{font-size:26px}.proof-strip .proof-item p{font-size:14px}}
@media(max-width:650px){.proof-strip .proof-grid{grid-template-columns:1fr;gap:23px;padding-block:34px}.proof-strip .proof-mail{justify-self:center;width:28px;height:28px}.proof-strip .proof-item>span{font-size:30px}}

/* Compact two-up arrangement with the third postcard overlapping below. */
.hero-field .hero{padding-top:24px;padding-bottom:32px;min-height:0}
.hero-copy>.eyebrow{font-size:13px;line-height:1.5;letter-spacing:.12em;margin-bottom:19px}
.hero-copy .hero-product{font-family:Manrope,Arial,sans-serif;font-size:18px;font-weight:650;line-height:1.6;color:#092c42;max-width:470px;letter-spacing:-.015em}
.hero-showcase.showcase-trio{aspect-ratio:1.15;margin-top:0;margin-bottom:160px}
.hero-showcase.showcase-trio .floating-one{width:51%;top:6%;left:0;right:auto;--tilt:-7deg;--depth:7deg}
.hero-showcase.showcase-trio .floating-two{width:51%;top:9%;right:0;left:auto;--tilt:7deg;--depth:-7deg}
.hero-showcase.showcase-trio .floating-three{width:64%;top:34%;left:18%;right:auto;--tilt:-3deg;--depth:4deg}
.showcase-trio .showcase-heading{top:calc(100% + 8px);bottom:auto;right:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;background:#d7eafb;color:#092c42;border-color:#b6d4eb;border-radius:5px;box-shadow:0 4px 10px #092c420a;text-align:center;padding:10px 18px;font-size:9px}
.hero-showcase.showcase-trio .format-tag{top:calc(100% + 88px);padding-top:14px}
.hero-showcase.showcase-trio .sample-caption{top:calc(100% + 127px)}
@media(max-width:760px){.hero-field .hero{padding-top:20px;padding-bottom:25px;gap:24px}.hero-showcase.showcase-trio{aspect-ratio:1.1;margin-top:0;margin-bottom:160px}.hero-copy>.eyebrow{font-size:12px}.hero-copy .hero-product{font-size:17px}}

/* Align the artwork with the main headline and use a quiet editorial caption. */
.hero-field .hero{align-items:start;column-gap:58px;padding-top:28px;padding-bottom:40px}
.hero-copy{padding-top:8px}
.hero-showcase.showcase-trio{margin-top:70px;margin-bottom:110px;aspect-ratio:1.2}
.hero-showcase.showcase-trio::before{display:none}
.hero-showcase.showcase-trio .floating-one{top:5%;left:0;--tilt:-5deg}
.hero-showcase.showcase-trio .floating-two{top:8%;right:0;--tilt:5deg}
.hero-showcase.showcase-trio .floating-three{top:36%;left:18%;--tilt:-2deg}
.showcase-trio .showcase-heading{top:calc(100% + 20px);left:auto;right:0;bottom:auto;transform:none;width:52%;max-width:none;background:transparent;border:0;border-left:3px solid #8bbfe7;border-radius:0;box-shadow:none;padding:2px 0 2px 15px;text-align:left;font-family:Manrope,Arial,sans-serif;font-size:9px;line-height:1.65;letter-spacing:.1em;color:#657b89}
.showcase-trio .showcase-heading strong{display:inline-block;margin-top:3px;font-family:PrimeDisplay,Impact,sans-serif;font-size:23px;line-height:1.05;font-weight:700;letter-spacing:0;color:#092c42}
.hero-showcase.showcase-trio .format-tag{top:calc(100% + 20px);left:0;right:auto;width:42%;display:block;text-align:left;padding:0;border:0;background:transparent}
.hero-showcase.showcase-trio .format-tag strong{font-family:Manrope,Arial,sans-serif;font-size:12px;line-height:1.5;font-weight:650;white-space:normal}
.hero-showcase.showcase-trio .sample-caption{top:calc(100% + 66px);left:0;right:auto;width:42%;text-align:left;font-size:9px;line-height:1.5}
@media(max-width:1100px) and (min-width:761px){.hero-field .hero{column-gap:30px}.hero-showcase.showcase-trio{margin-top:76px}.showcase-trio .showcase-heading strong{font-size:20px}.hero-showcase.showcase-trio .sample-caption{top:calc(100% + 80px)}}
@media(max-width:760px){.hero-field .hero{padding-top:20px;padding-bottom:28px;gap:18px}.hero-copy{padding-top:0}.hero-showcase.showcase-trio{margin-top:25px;margin-bottom:110px;aspect-ratio:1.1}.showcase-trio .showcase-heading{padding-left:12px}.showcase-trio .showcase-heading strong{font-size:21px}}

/* Compact, centered artwork details directly below the postcard group. */
.hero-showcase.showcase-trio .format-tag{top:calc(100% - 20px);left:0;right:0;width:100%;text-align:center;padding:0}
.hero-showcase.showcase-trio .format-tag strong{font-size:11px;line-height:1.5;font-weight:600}
.hero-showcase.showcase-trio .sample-caption{top:100%;left:0;right:0;width:100%;text-align:center;font-size:8px;line-height:1.5}
.showcase-trio .showcase-heading{top:calc(100% + 40px)}

/* Both captions share one layout row so their alignment cannot drift. */
.hero-showcase.showcase-trio .showcase-footer{position:absolute;top:calc(100% - 20px);left:0;right:0;display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center}
.hero-showcase.showcase-trio .showcase-footer .format-tag,.hero-showcase.showcase-trio .showcase-footer .sample-caption{position:static;inset:auto;width:auto;transform:none;text-align:center;margin:0}
.hero-showcase.showcase-trio .showcase-footer .sample-caption{margin-top:5px}
.hero-showcase.showcase-trio .showcase-footer .showcase-heading{position:static;inset:auto;width:auto;max-width:none;transform:none;margin:0}
@media(max-width:400px){.hero-showcase.showcase-trio .showcase-footer{gap:12px}.showcase-footer .showcase-heading strong{font-size:19px}}

/* Align the artwork's top edge with the left column's industry label. */
@media(min-width:761px){.hero-showcase.showcase-trio{margin-top:0}}

/* Bring the blue message strip closer without shifting the artwork or captions. */
.hero-field .hero{padding-bottom:20px}
.hero-showcase.showcase-trio{margin-bottom:80px}
@media(max-width:760px){.hero-field .hero{padding-bottom:16px}}

/* Place the postcard artwork and captions between the headline and intro copy on phones. */
@media(max-width:760px){
 .hero-field .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .hero-field .hero-copy{display:contents}
 .hero-field .hero-copy>.eyebrow{order:1;margin:0 0 8px}
 .hero-field .hero-showcase.showcase-trio{order:3;width:100%;margin:0 auto 105px}
 .hero-field .hero-copy>h1{order:2;margin:0 0 20px}
 .hero-field .hero-copy>.lead{order:4}
 .hero-field .hero-copy>.hero-product{order:5}
 .hero-field .hero-copy>.button-row{order:6}
 .hero-field .hero-copy>.hero-price{order:7}
}

/* A simpler mobile hero: the menu owns navigation and the artwork has one clear caption flow. */
@media(max-width:760px){
 .site-header .section-nav{display:none}
 .hero-field .hero{padding-top:28px}
 .hero-field .hero-copy>.eyebrow{margin-bottom:12px;font-size:11px;letter-spacing:.1em}
 .hero-field .hero-copy>h1{margin-bottom:18px;font-size:clamp(40px,10vw,54px)}
 .hero-field .hero-showcase.showcase-trio{aspect-ratio:1.12;margin:0 auto 136px}
 .hero-showcase.showcase-trio .showcase-footer{top:100%;display:flex;flex-direction:column;gap:10px;text-align:center}
 .hero-showcase.showcase-trio .showcase-footer .format-tag strong{font-size:14px}
 .hero-showcase.showcase-trio .showcase-footer .sample-caption{font-size:10px}
 .hero-showcase.showcase-trio .showcase-footer .showcase-heading{width:100%;border-left:0;border-top:1px solid var(--line);padding:9px 0 0;text-align:center;font-size:10px}
 .hero-showcase.showcase-trio .showcase-footer .showcase-heading strong{display:block;margin-top:2px;font-size:22px}
 .hero-field .hero-copy>.lead{font-size:16px;line-height:1.55}
 .hero-field .hero-copy>.hero-product{font-size:15px;line-height:1.55}
}