/* A single, quiet composition behind the proposition. These sample cards are decorative. */
.hero--collage{--copy-halo:#080f1cf5;padding-top:38px}
[data-theme="light"] .hero--collage{--copy-halo:#fffffff5}
.hero--collage .hero-stage{display:block;isolation:isolate;width:min(1520px,calc(100% - 48px));max-width:none;min-height:610px;padding-bottom:165px}
.hero--collage .hero-copy{position:relative;z-index:2;isolation:isolate;max-width:860px;width:100%;margin:0 auto;padding-top:44px;grid-area:auto}
.hero--collage .hero-copy:before{content:"";position:absolute;inset:-20px -75px -35px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,var(--copy-halo) 28%,transparent 73%)}
.hero--collage h1{font-size:clamp(45px,4.7vw,72px);line-height:1.12;letter-spacing:-2.7px;margin:23px -20px 24px}
.hero--collage .hero-description{font-size:15px;max-width:620px}
.hero--collage .hero-actions{flex-direction:row;margin-top:26px}
.hero--collage .hero-actions .button{width:auto;min-height:48px;padding:12px 19px;font-size:12px}
.hero--collage .hero-assurances{margin-top:19px;font-size:10px}
.hero--collage .hero-orbit{width:1380px;height:650px;top:50px;opacity:.65;transform:translateX(-50%) rotate(-15deg)}
.hero--collage .brand-studio{margin-top:12px}
.hero-collage{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;animation:collage-arrive .8s ease both}
[data-theme="dark"] .hero-collage{--surface:#16263d;--surface-raised:#213852;--line:#3b5475;--subtle:#b0bfd4;--muted:#c0cde0;--green:#6de6bd}
[data-theme="light"] .hero-collage{--line:#c6d6ed;--subtle:#506884;--muted:#405571}
.collage-canvas{position:absolute;bottom:0;left:50%;width:1440px;height:610px;transform:translateX(-50%);transform-origin:center bottom}
.collage-item{position:absolute;transform-origin:center;font-size:11px;will-change:auto}
.collage-item .feature-card{min-height:0;border-radius:17px;background:linear-gradient(135deg,var(--surface-raised),var(--surface));box-shadow:0 25px 60px #00000018}
.collage-brand{left:35px;top:150px;width:242px;transform:rotate(-12deg);opacity:1}
.collage-brand .store-art{width:100%;margin:0;max-width:none}
.collage-brand .store-sign{font-size:16px}
.collage-brand .scene-brand-label{margin:-12px 0 0 12px;padding:10px 12px;transform:rotate(4deg);max-width:220px}
.collage-brand .scene-brand-label strong{font-size:12px}
.collage-brand .scene-brand-label small{font-size:5px}
.collage-payment{left:1120px;top:56px;width:240px;transform:rotate(14deg);opacity:1;filter:none}
.collage-payment .payment-calendar{padding:18px;border-radius:19px}
.collage-payment .calendar-heading{font-size:11px}
.collage-payment .calendar-week{font-size:8px;margin-top:17px}
.collage-payment .calendar-days{font-size:10px;gap:5px}
.collage-contract{left:285px;top:347px;width:230px;transform:rotate(-9deg);opacity:1;filter:none}
.collage-contract .feature-card{padding:16px}
.collage-contract .contract-scene-id{margin-top:12px}
.collage-contract .feature-details{font-size:9px;gap:8px}
.collage-contract .contract-scene-progress{margin-top:13px;padding-top:10px}
.collage-customer{left:265px;top:5px;width:195px;transform:rotate(-16deg);opacity:.9;filter:none}
.collage-customer .feature-card{padding:14px;border-radius:24px}
.collage-customer .feature-card-heading{font-size:10px}
.collage-customer .customer-scene-profile{margin:12px 0}
.collage-customer .customer-scene-profile strong{font-size:10px}
.collage-customer .score-scene{gap:9px}
.collage-customer .score-scene-ring{width:58px;height:58px}
.collage-customer .score-scene>div:last-child>strong{font-size:8px}
.collage-customer .customer-scene-limit strong{font-size:13px}
.collage-branches{left:1000px;top:351px;width:218px;transform:rotate(11deg);opacity:1;filter:none}
.collage-branches .feature-card{padding:15px}
.collage-branches .feature-card-heading{font-size:10px}
.collage-branches .branches-scene-totals{font-size:9px}
.collage-receipt{left:640px;top:476px;width:257px;transform:rotate(-6deg);opacity:1}
.collage-receipt .payment-received{position:relative;inset:auto;transform:none;padding:14px 17px;gap:12px;border-radius:17px;background:linear-gradient(115deg,var(--surface),var(--surface-raised))}
.collage-receipt .payment-received strong{font-size:18px;letter-spacing:0}
.collage-receipt .payment-received div>span{font-size:10px}
.collage-receipt .scene-check{width:34px;height:34px}
.collage-chart{left:544px;top:300px;width:307px;padding:15px 18px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--demo-accent);transform:rotate(8deg);opacity:.45;filter:none}
.collage-chart-heading{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:10px}
.collage-chart-heading .icon{width:14px;height:14px}
.collage-chart>strong{display:block;font-size:20px;font-weight:500;margin:11px 0}
.collage-chart small{font-size:9px}
.collage-chart>svg{display:block;width:100%;height:64px}
.hero-visual-note{position:absolute;z-index:1;bottom:0;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:.25px;color:var(--subtle);margin:0}
[data-theme="light"] .collage-brand{opacity:1}
[data-theme="light"] .collage-customer{opacity:.9}
[data-theme="light"] .collage-payment,[data-theme="light"] .collage-contract,[data-theme="light"] .collage-branches{opacity:1}
[data-theme="light"] .collage-chart{opacity:.45}
@keyframes collage-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(min-width:1650px){.hero--collage .hero-stage{min-height:635px}.collage-canvas{transform:translateX(-50%) scale(1.06)}.hero--collage .hero-copy{padding-top:55px}.hero--collage h1{font-size:74px}}
@media(max-width:1250px){.hero--collage .hero-stage{min-height:566px;padding-bottom:148px}.hero--collage .hero-copy{max-width:735px;padding-top:35px}.hero--collage h1{font-size:58px;letter-spacing:-2.3px}.collage-canvas{transform:translateX(-50%) scale(.84)}.hero--collage .hero-description{font-size:14px}}
@media(max-width:1000px){.hero--collage{padding-top:24px}.hero--collage .hero-stage{min-height:545px;padding-bottom:155px}.hero--collage .hero-copy{max-width:650px;padding-top:27px}.hero--collage h1{font-size:50px;letter-spacing:-2px}.hero--collage .hero-description{font-size:13px}.hero--collage .eyebrow-pill{font-size:8px}.collage-canvas{transform:translateX(-50%) scale(.7)}.hero--collage .hero-copy:before{inset:-30px -30px -25px}}
@media(max-width:760px){
  .hero--collage{padding-top:33px}.hero--collage .hero-stage{width:calc(100% - 32px);min-height:0;padding-bottom:25px}.hero--collage .hero-copy{padding-top:0;max-width:590px}.hero--collage h1{font-size:clamp(33px,6.8vw,49px);line-height:1.15;margin:22px 0 20px;letter-spacing:-1.8px}.hero--collage .hero-description{font-size:13px;max-width:435px}.hero--collage .hero-actions{margin-top:24px;gap:9px}.hero--collage .hero-actions .button{font-size:11px;min-height:45px;padding:11px 14px}.hero--collage .hero-assurances{font-size:9px;margin-top:17px}.hero--collage .hero-copy:before{display:none}.hero--collage .brand-studio{margin-top:20px}.hero-collage{position:relative;height:360px;margin:23px auto 0;max-width:550px}.collage-canvas{width:100%;height:100%;left:0;bottom:0;transform:none}.hero--collage .hero-orbit{width:750px;height:570px;top:260px}
  .collage-brand{left:0;top:94px;width:190px;transform:rotate(-12deg);opacity:1}.collage-brand .store-sign{font-size:13px}.collage-brand .scene-brand-label{max-width:175px;padding:8px;gap:7px}.collage-brand .scene-brand-label strong{font-size:10px;max-width:110px}.collage-brand .scene-brand-label small{font-size:4px}.collage-brand .scene-check{width:24px;height:24px}.collage-brand .scene-brand-arrow{display:none}
  .collage-payment{left:auto;right:4px;top:8px;width:208px;transform:rotate(13deg) scale(.87);transform-origin:top right;opacity:1}.collage-payment .calendar-heading .icon{display:block}.collage-payment .calendar-week{gap:4px}.collage-payment .calendar-days{gap:4px}
  .collage-customer{left:40px;top:0;width:180px;transform:rotate(-15deg) scale(.71);transform-origin:top left;opacity:.9}
  .collage-contract{left:calc(50% - 78px);top:160px;width:210px;transform:rotate(-10deg) scale(.8);transform-origin:top center;opacity:1}
  .collage-branches{left:auto;right:-18px;top:199px;width:188px;transform:rotate(13deg) scale(.64);transform-origin:top right;opacity:1}
  .collage-receipt{left:25px;top:286px;width:230px;transform:rotate(-6deg) scale(.83);transform-origin:top left;opacity:1}
  .collage-chart{left:calc(50% - 155px);top:91px;width:260px;transform:rotate(8deg) scale(.8);opacity:.45;filter:none}
}
@media(max-width:480px){
  .hero--collage .hero-stage{width:calc(100% - 28px)}.hero--collage h1{font-size:clamp(30px,8.5vw,40px);letter-spacing:-1.3px}.hero--collage .eyebrow-pill{font-size:7px;letter-spacing:1px}.hero--collage .hero-description{font-size:12px;max-width:340px}.hero--collage .hero-actions .button{font-size:10px;padding:11px 10px;gap:6px}.hero--collage .hero-assurances{font-size:8px;gap:6px 10px}.hero-collage{height:345px;margin-top:26px}.collage-brand{left:-17px;top:110px;width:155px}.collage-brand .store-sign{font-size:10px}.collage-brand .scene-brand-label{margin-left:7px;max-width:145px}.collage-brand .scene-brand-label small{font-size:3.5px}.collage-brand .scene-brand-label strong{max-width:90px;font-size:9px}.collage-payment{right:-10px;top:4px;width:182px;transform:rotate(13deg) scale(.84)}.collage-payment .calendar-heading{font-size:10px}.collage-payment .calendar-week{font-size:7px}.collage-payment .calendar-days{font-size:9px}.collage-payment .calendar-key{font-size:7px}.collage-customer{left:6px;top:8px;width:168px;transform:rotate(-15deg) scale(.66)}.collage-contract{left:calc(50% - 91px);top:166px;width:195px;transform:rotate(-10deg) scale(.74)}.collage-branches{right:-24px;top:209px;width:168px;transform:rotate(13deg) scale(.61)}.collage-receipt{left:3px;top:281px;width:216px;transform:rotate(-6deg) scale(.76)}.collage-receipt .payment-received{padding:12px;gap:9px}.collage-receipt .payment-received strong{font-size:17px}.hero-visual-note{font-size:7px}
}
@media(max-width:370px){.hero--collage h1{font-size:29px;letter-spacing:-1.2px}.hero--collage .hero-actions{flex-direction:column;align-items:center;gap:8px}.hero--collage .hero-actions .button{width:100%;max-width:260px;font-size:12px}.hero--collage .hero-description{font-size:11px}.collage-brand{left:-27px;width:145px}.collage-payment{right:-17px;width:171px}.collage-contract{left:calc(50% - 83px);width:185px}.collage-branches{right:-26px;width:155px}.collage-customer{left:0;width:160px}.hero--collage .hero-assurances{font-size:7px}}
@media(prefers-reduced-motion:reduce){.hero-collage{animation:none}}