/* Only this new form is styled here. The shell uses Danilo's original app.css. */ #blendApp{--blend-surface:#fff;--blend-inner:#f3f4f6;--blend-border:#e5e7eb;--blend-muted:#6b7280;--blend-blue:#3b82f6;margin-top:32px}html.dark #blendApp{--blend-surface:#1f2937;--blend-inner:#111827;--blend-border:#374151;--blend-muted:#9ca3af}#blendApp button,#blendApp input{font:inherit}#blendApp button{cursor:pointer}#blendApp button:disabled{opacity:.4;cursor:not-allowed}#blendApp button:focus-visible,#blendApp input:focus-visible{outline:2px solid #3b82f6;outline-offset:4px}#blendApp [hidden]{display:none!important}#blendApp .breadcrumb{display:flex;gap:12px;color:var(--blend-muted);font-size:14px;margin-bottom:20px}#blendApp .hero{display:flex;align-items:center;justify-content:space-between;margin:24px 0}#blendApp h1{font-family:'Morabba Medium';font-size:30px;line-height:1.5;margin:0 0 6px}#blendApp .hero p{color:var(--blend-muted);font-size:14px;line-height:2}#blendApp .demo{font-size:11px;background:#3b82f61a;color:#60a5fa;border-radius:8px;padding:6px 12px}#blendApp .notice{display:flex;gap:10px;color:var(--blend-muted);font-size:12px;line-height:1.9;margin:0 0 24px}#blendApp .notice>span{color:#60a5fa}#blendApp .steps{display:flex;align-items:center;gap:18px;background:var(--blend-surface);border-radius:8px;padding:22px 26px;margin-bottom:20px;box-shadow:0 1px 3px #0001;scroll-margin-top:28px}#blendApp .steps>div{height:1px;flex:1;background:var(--blend-border)}#blendApp .steps button{display:flex;gap:10px;align-items:center;color:var(--blend-muted);background:none;border:0;padding:0;text-align:right}#blendApp .steps i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--blend-border);font-style:normal;font-size:14px}#blendApp .steps button span{font-size:14px}#blendApp .steps small{display:block;font-size:11px;margin-top:3px}#blendApp .steps .active{color:inherit}#blendApp .steps .active i{color:#fff;background:#2563eb;border-color:#2563eb}#blendApp .steps .completed i{border-color:#3b82f6;color:#60a5fa}#blendApp .workspace{display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:18px;align-items:start}#blendApp .editor{min-width:0}#blendApp .step-panel,#blendApp .library,#blendApp .summary{background:var(--blend-surface);padding:26px;border-radius:8px;box-shadow:0 1px 3px #0001}#blendApp .summary{position:sticky;top:24px}#blendApp .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--blend-border)}#blendApp .eyebrow{font-size:12px;color:var(--blend-muted);margin-bottom:7px}#blendApp h2{font-family:'Morabba Medium';font-size:24px;line-height:1.5}#blendApp h3{font-size:17px;font-family:'Dana DemiBold'}#blendApp .section-intro{color:var(--blend-muted);font-size:14px;line-height:2;margin-bottom:24px}#blendApp .subtle{font-size:12px;color:var(--blend-muted)}#blendApp .package-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#blendApp .package-card{background:var(--blend-inner);border:1px solid transparent;border-radius:8px;padding:18px 12px 0;position:relative;min-width:0;transition:border-color .25s,background .25s;overflow:hidden;text-align:center}#blendApp .package-card:hover{border-color:#64748b}#blendApp .package-card.selected{border-color:#3b82f6;box-shadow:inset 0 0 0 1px #3b82f6;background:#3b82f60c}#blendApp .package-check{position:absolute;top:12px;right:12px;border-radius:50%;color:var(--blend-muted);font-size:17px}#blendApp .selected .package-check{color:#60a5fa}#blendApp .package-scene{height:175px;display:flex;align-items:center;justify-content:center;padding:12px 0 8px}#blendApp .package-outline{display:block;width:100%;height:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}#blendApp .package-outline img{height:100%;width:100%;object-fit:contain;display:block}#blendApp .package-card:first-child img{transform:scale(.78)}#blendApp .package-card:nth-child(2) img{transform:scale(.9)}#blendApp .package-card:hover .package-outline{transform:translateY(-5px)}#blendApp .package-card>strong{display:block;font-family:'Dana DemiBold';font-size:21px;margin:8px 0}#blendApp .package-card>small{display:block;color:var(--blend-muted);font-size:12px}#blendApp .package-foot{display:block;margin:18px -12px 0;padding:13px 4px;border-top:1px solid var(--blend-border);font-size:12px;color:var(--blend-muted)}#blendApp .selected .package-foot{color:#60a5fa;background:#3b82f615}#blendApp .hint{font-size:12px;color:var(--blend-muted);line-height:2;margin:15px 0}#blendApp .package-explainer{font-size:12px;color:var(--blend-muted);line-height:2;margin:12px 0 24px}#blendApp .primary,#blendApp .secondary{border:0;border-radius:8px;min-height:49px;padding:12px 18px;font-size:14px;transition:background .2s,transform .2s}#blendApp .primary{background:#3b82f6;color:white}#blendApp .primary:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}#blendApp .secondary{border:1px solid var(--blend-border);background:transparent}#blendApp .next{width:100%;display:flex;justify-content:space-between;align-items:center}#blendApp .navigation{display:flex;justify-content:space-between;gap:10px;margin-top:24px}#blendApp .library{margin-top:18px}#blendApp .library h2{font-size:20px}#blendApp .library .section-head{padding-bottom:16px;margin-bottom:10px}#blendApp .empty{color:var(--blend-muted);font-size:13px;line-height:2}#blendApp .summary-top{font-family:'Dana DemiBold';font-size:18px;padding-bottom:18px;border-bottom:1px solid var(--blend-border)}#blendApp .summary .live-dot,#blendApp .summary .sample,#blendApp .taste{display:none}#blendApp .ring{height:120px;width:120px;border-radius:50%;padding:7px;margin:23px auto}#blendApp .ring>div{height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--blend-surface)}#blendApp .ring strong{font-size:26px;font-family:'Dana DemiBold'}#blendApp .ring small{font-size:11px;color:var(--blend-muted)}#blendApp .summary:not(.has-parts) .ring{display:none}#blendApp .selected-count{font-size:12px;color:var(--blend-muted);padding:18px 0;border-bottom:1px solid var(--blend-border)}#blendApp .selected-count.ready{color:#4ade80}#blendApp .summary-detail{font-size:13px;padding:12px 0}#blendApp .summary-detail div{display:flex;justify-content:space-between;gap:12px;margin:13px 0}#blendApp .summary-detail span{color:var(--blend-muted)}#blendApp .summary-detail b{font-weight:400}#blendApp .price{display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--blend-border)}#blendApp .price>span{font-size:12px;color:var(--blend-muted)}#blendApp .price strong{font-family:'Dana DemiBold';font-size:23px;line-height:1.7;color:#60a5fa;min-height:39px;font-variant-numeric:tabular-nums}#blendApp .price strong small{font:12px Dana}#blendApp .summary .hint{font-size:11px;margin:8px 0 0}#blendApp .beans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#blendApp .bean-group{grid-column:1/-1;display:flex;flex-direction:column;gap:7px;margin:5px 0 12px;padding:10px 0 0;font-family:'Morabba Medium';font-size:21px}#blendApp .bean-group span{display:none}#blendApp .bean-group small{font:12px Dana;color:var(--blend-muted)}#blendApp .bean-group:not(:first-child){margin-top:20px}#blendApp .bean-card{position:relative;background:var(--blend-inner);border:1px solid transparent;border-radius:8px;text-align:right;padding:22px 17px 17px;transition:border-color .25s,transform .25s}#blendApp .bean-card:hover{border-color:#64748b;transform:translateY(-2px)}#blendApp .bean-card[aria-pressed=true]{border-color:#3b82f6;background:#3b82f60c}#blendApp .bean-card h3{font-size:17px;margin:5px 0 9px}#blendApp .bean-card p{font-size:12px;color:var(--blend-muted);line-height:2}#blendApp .bean-card .check{position:absolute;top:9px;left:10px;font-size:14px;width:20px;height:20px;display:grid;place-items:center;border:1px solid #64748b;border-radius:5px;color:var(--blend-muted)}#blendApp .bean-card[aria-pressed=true] .check{background:#3b82f6;color:white;border-color:#3b82f6}#blendApp .bean-illustration{display:none}#blendApp .bean-price{display:block;color:#60a5fa;font-size:13px;margin-top:15px}#blendApp .ratio-head{border:0;margin:28px 0 14px;padding:0}#blendApp .text-button{border:0;background:none;color:#60a5fa;font-size:12px}#blendApp .ratio-row{background:var(--blend-inner);border-radius:8px;padding:16px;margin-bottom:10px}#blendApp .ratio-label{display:flex;align-items:center;justify-content:space-between;font-size:14px}#blendApp .ratio-number{display:flex;gap:5px;align-items:center;color:#60a5fa}#blendApp .ratio-number input{width:65px;text-align:center;border:1px solid var(--blend-border);border-radius:8px;background:var(--blend-surface);padding:5px;color:inherit}#blendApp input[type=range]{width:100%;accent-color:#3b82f6;direction:ltr;margin-top:16px;cursor:pointer}#blendApp .total-state{padding:13px 16px;border-radius:8px;background:#22c55e10;color:#4ade80;font-size:13px;margin-top:16px}#blendApp .total-state.invalid{background:#f59e0b10;color:#fbbf24}#blendApp .legend-row{display:flex;gap:8px;align-items:center;font-size:12px;margin:10px 0}#blendApp .legend-row i{width:7px;height:7px;border-radius:50%}#blendApp .legend-row span:last-child{margin-inline-start:auto}#blendApp .cost-breakdown{border-top:1px solid var(--blend-border);padding-top:16px}#blendApp .cost-breakdown:empty{display:none}#blendApp .cost-breakdown h3{font-size:14px;margin-bottom:8px}#blendApp .cost-line{display:grid;gap:4px;font-size:12px;padding:10px 0;border-bottom:1px solid var(--blend-border)}#blendApp .cost-line span{color:var(--blend-muted);font-size:11px}#blendApp .cost-line strong{color:#60a5fa}#blendApp .cost-breakdown>p{font-size:10px;color:var(--blend-muted);line-height:1.9;margin:12px 0}#blendApp .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}#blendApp .option{border:1px solid var(--blend-border);background:var(--blend-inner);padding:18px 12px;border-radius:8px}#blendApp .option.selected{border-color:#3b82f6;background:#3b82f615}#blendApp .grind-choice{display:grid;gap:12px;margin:24px 0}#blendApp .grind-choice label{display:block;padding:18px;background:var(--blend-inner);border-radius:8px;font-size:14px}#blendApp .grind-choice small{display:block;color:var(--blend-muted);font-size:12px;margin-right:23px;margin-top:5px}#blendApp input[type=radio]{accent-color:#3b82f6;margin-left:7px}#blendApp .name-input{width:100%;padding:16px;border:1px solid var(--blend-border);border-radius:8px;background:var(--blend-inner);margin-top:12px}#blendApp .review{background:var(--blend-inner);border-radius:8px;padding:20px;margin-top:24px}#blendApp .review h3{margin-bottom:16px}#blendApp .review div{display:flex;justify-content:space-between;gap:14px;margin:12px 0;font-size:13px}#blendApp .review span{color:var(--blend-muted)}#blendApp .save-message{font-size:12px;color:#4ade80;margin-top:15px}#blendApp .saved-item{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--blend-border)}#blendApp .saved-item>div{flex:1;min-width:0}#blendApp .saved-item b{font-size:13px;overflow-wrap:anywhere}#blendApp .saved-item small{display:block;font-size:11px;color:var(--blend-muted);margin-top:7px}#blendApp .saved-item button{font-size:12px;padding:6px 10px;border:1px solid var(--blend-border);border-radius:8px}#blendApp .prototype-foot{font-size:11px;color:var(--blend-muted);text-align:center;padding:30px 0}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#1f2937;border:1px solid #4b5563;color:white;border-radius:12px;padding:15px 22px;z-index:99999;font:14px Dana;max-width:90vw;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:1023px){#blendApp{padding-top:44px;margin-top:0}#blendApp .workspace{grid-template-columns:minmax(0,1fr) 280px}#blendApp .step-panel,#blendApp .library,#blendApp .summary{padding:20px}#blendApp .steps{padding:18px;gap:12px}#blendApp .steps button span{font-size:12px}#blendApp .package-options{gap:10px}#blendApp .package-scene{height:145px}#blendApp .package-card>strong{font-size:19px}#blendApp .package-card>small{font-size:11px}} @media(max-width:767px){#blendApp .workspace{display:flex;flex-direction:column}#blendApp .editor,#blendApp .summary{width:100%}#blendApp .summary{position:static}#blendApp .steps{gap:8px;padding:16px 12px}#blendApp .steps button{flex-direction:column;gap:6px}#blendApp .steps button span{font-size:10px;white-space:nowrap}#blendApp .steps small{display:none}#blendApp .steps i{width:28px;height:28px;font-size:12px}#blendApp .steps>div{margin-top:-19px}#blendApp .hero{align-items:start;margin:20px 0}#blendApp h1{font-size:26px}#blendApp .hero .demo{display:none}#blendApp .hero p{font-size:12px}#blendApp .breadcrumb{font-size:11px;padding-top:6px}#blendApp .notice{font-size:11px}#blendApp h2{font-size:22px}#blendApp .section-head{padding-bottom:16px;margin-bottom:18px}#blendApp .package-card{padding:18px 5px 0}#blendApp .package-check{top:7px;right:7px;font-size:14px}#blendApp .package-scene{height:125px}#blendApp .package-card>strong{font-size:17px;white-space:nowrap}#blendApp .package-card>small{font-size:10px}#blendApp .package-foot{font-size:10px;margin:15px -5px 0;padding:11px 2px}#blendApp .package-explainer{font-size:11px}#blendApp .section-intro{font-size:12px}#blendApp .beans{gap:10px}#blendApp .bean-card{padding:22px 12px 14px}#blendApp .bean-card h3{font-size:15px}#blendApp .bean-card p,#blendApp .bean-price{font-size:11px}#blendApp .navigation{flex-wrap:wrap}#blendApp .navigation button{flex:1}#blendApp .primary,#blendApp .secondary{font-size:13px;padding:12px}#blendApp .subtle{font-size:10px}#blendApp .library .section-head{flex-wrap:wrap}#blendApp .summary-top{font-size:17px}} @media(prefers-reduced-motion:reduce){#blendApp *:not(.motion-opt-in,.motion-opt-in *),#toast{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media(max-width:1023px){#blendApp{padding-bottom:76px}} #blendApp .blend-guide{border-radius:12px;overflow:hidden;background:linear-gradient(115deg,#edf4fd,#f8fafc);border:1px solid #dbe6f5;margin:0 0 22px;position:relative;color:#1e3a5f}html.dark #blendApp .blend-guide{background:linear-gradient(115deg,#1b304d,#1f2937);border-color:#344357;color:#e5e7eb}#blendApp .guide-slide{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(160px,.7fr);align-items:center;gap:35px;padding:32px 36px;min-height:248px}#blendApp .guide-kicker{font-size:12px;color:#3b82f6;margin-bottom:11px}html.dark #blendApp .guide-kicker{color:#93c5fd}#blendApp .guide-copy h2{font-size:27px;line-height:1.6;margin:0 0 10px}#blendApp .guide-copy>p:not(.guide-kicker){color:#64748b;font-size:14px;line-height:2.1;max-width:680px}html.dark #blendApp .guide-copy>p:not(.guide-kicker){color:#b6c3d5}#blendApp .guide-tag{display:inline-block;margin-top:17px;font-size:11px;color:#3b82f6;border-right:2px solid #3b82f6;padding-right:10px}html.dark #blendApp .guide-tag{color:#93c5fd}#blendApp .guide-visual{height:170px;display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative}#blendApp .guide-visual:before{content:'';position:absolute;width:148px;height:148px;border-radius:50%;border:1px solid #3b82f625;background:#3b82f607;z-index:0}#blendApp .guide-visual>*{z-index:1}#blendApp .guide-pack{width:70px;height:94px;border:2px solid #6b9ddd;border-radius:4px 4px 9px 9px;background:linear-gradient(110deg,#365e91,#23466e);color:#dbeafe;display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-7deg);box-shadow:12px 12px 28px #0002}#blendApp .guide-pack i{position:absolute;top:8px;left:7px;right:7px;border-top:1px solid #dbeafe65}#blendApp .guide-pack span{font-size:10px}#blendApp .guide-scale{width:122px;height:28px;border:1px solid #6985a7;border-radius:6px;background:#263d5b;margin-top:8px;display:grid;place-items:center;color:#adc7e8;font-size:9px}#blendApp .guide-beans{display:flex;gap:12px;transform:rotate(-18deg);margin-bottom:22px}#blendApp .guide-beans i{width:30px;height:47px;border-radius:50%;border:2px solid #83a4c9;background:linear-gradient(100deg,#3b5879 44%,#91b7e0 48%,#91b7e0 51%,#2c4868 55%);display:block}#blendApp .guide-beans i:nth-child(2){transform:translateY(-13px)}#blendApp .guide-art-label{font-size:11px;color:#7e9dc1;margin-top:10px}#blendApp .guide-meter{height:110px;width:110px;border:8px solid #3b82f6;border-left-color:#83aedd;border-bottom-color:#c1d7ed;border-radius:50%;display:grid;place-items:center}#blendApp .guide-meter span{font-size:23px;font-family:'Dana DemiBold';color:#7fa9e0}#blendApp .guide-receipt{height:108px;width:83px;border:1px solid #6f8dab;border-radius:8px;background:#2a435f;padding:15px;display:flex;flex-direction:column;gap:10px;transform:rotate(-5deg)}#blendApp .guide-receipt i{display:block;height:2px;background:#8ba9ca;opacity:.6}#blendApp .guide-receipt i:nth-child(2){width:70%}#blendApp .guide-receipt span{width:26px;height:26px;background:#3b82f6;color:#fff;display:grid;place-items:center;border-radius:50%;margin:0 auto}#blendApp .guide-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 26px;border-top:1px solid #8cadd323;background:#ffffff05}#blendApp .guide-arrows{display:flex;gap:8px}#blendApp .guide-arrows button,#blendApp .guide-play button{width:32px;height:32px;border:1px solid #7b9abb45;border-radius:50%;background:transparent;display:grid;place-items:center;color:#6493cf;font-size:18px}html.dark #blendApp .guide-arrows button,html.dark #blendApp .guide-play button{color:#b3c8e2}#blendApp .guide-arrows button:hover,#blendApp .guide-play button:hover{background:#3b82f61a;border-color:#3b82f6}#blendApp .guide-dots{display:flex;gap:7px;align-items:center}#blendApp .guide-dots button{width:7px;height:7px;border:0;border-radius:20px;background:#6c8aa455;padding:0;transition:width .3s,background .3s;position:relative}#blendApp .guide-dots button:after{content:'';position:absolute;inset:-10px -5px}#blendApp .guide-dots button[aria-current=true]{background:#3b82f6;width:29px}#blendApp .guide-play{display:flex;align-items:center;gap:12px;direction:ltr}#blendApp #guideCount{font-size:11px;color:#7c99ba;direction:rtl}#blendApp .guide-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#blendApp .ratio-share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--blend-border)}#blendApp .ratio-share>span{color:var(--blend-muted);font-size:12px;display:grid;gap:6px}#blendApp .ratio-share b{font-family:'Dana DemiBold';font-size:16px;color:#60a5fa;font-weight:400}#blendApp .ratio-cap{color:var(--blend-muted);font-size:10px;margin-top:12px;line-height:1.8}#blendApp .card-share{display:block;color:#6eabf7;font-size:11px;margin-top:8px;min-height:20px}#blendApp .card-share:empty{display:none} @media(max-width:767px){#blendApp .guide-slide{padding:24px 22px;grid-template-columns:minmax(0,1fr) 100px;gap:12px;min-height:260px}#blendApp .guide-copy h2{font-size:21px}#blendApp .guide-copy>p:not(.guide-kicker){font-size:12px;line-height:2}#blendApp .guide-kicker{font-size:10px}#blendApp .guide-tag{font-size:10px;line-height:1.8;margin-top:12px}#blendApp .guide-visual{transform:scale(.7);transform-origin:center;min-width:0}#blendApp .guide-visual:before{width:130px;height:130px}#blendApp .guide-art-label{white-space:nowrap}#blendApp .guide-controls{padding:12px 18px}#blendApp .guide-arrows button,#blendApp .guide-play button{width:30px;height:30px}#blendApp .ratio-share b{font-size:15px}#blendApp .ratio-share>span{font-size:11px}} @media(max-width:420px){#blendApp .guide-slide{grid-template-columns:1fr;min-height:264px;position:relative;padding:23px 22px 26px}#blendApp .guide-copy{padding-left:20px;z-index:1}#blendApp .guide-copy>p:not(.guide-kicker){max-width:95%}#blendApp .guide-visual{position:absolute;left:-2px;top:4px;transform:scale(.36);transform-origin:top left;opacity:.28;width:130px;pointer-events:none}#blendApp .guide-copy h2{font-size:23px;max-width:95%}#blendApp .guide-tag{margin-top:16px}} /* Photographic campaign banners; replaces the schematic guide artwork. */ #blendApp .campaign-guide{border:0;background:#111827;color:#f9fafb;border-radius:12px;isolation:isolate}#blendApp .campaign-guide .guide-slides{position:relative}#blendApp .campaign-guide .guide-slide{height:clamp(345px,34vw,490px);min-height:0;display:block;position:relative;padding:0;overflow:hidden;background:#111827}#blendApp .campaign-guide .campaign-art{position:absolute;inset:0}#blendApp .campaign-guide .campaign-photo{position:absolute;width:100%;height:100%;inset:0;display:block;object-fit:cover;object-position:center;max-width:none}#blendApp .campaign-guide .guide-copy{position:absolute;right:5%;top:48%;transform:translateY(-50%);width:41%;padding:0;z-index:2;text-align:right}#blendApp .campaign-guide .guide-copy h2{font-family:'Morabba Bold';font-size:clamp(26px,2.7vw,38px);line-height:1.7;color:#fff;margin:10px 0 14px;text-shadow:0 2px 9px #0003}#blendApp .campaign-guide .guide-kicker{color:#b2c9e9;font-size:12px;line-height:1.8;margin:0}#blendApp .campaign-guide .guide-copy>p:not(.guide-kicker){color:#d2dce9;font-size:14px;line-height:2.15;max-width:100%;text-shadow:0 1px 6px #0006}#blendApp .campaign-guide .guide-tag{font-size:11px;display:inline-block;border:1px solid #8da4c844;border-radius:6px;padding:5px 10px;margin-top:20px;background:#0f172a55;color:#a7caff}#blendApp .campaign-guide .guide-controls{position:absolute;bottom:0;right:0;left:0;z-index:3;padding:15px 26px;border-top:1px solid #bdcde71c;background:#0c14209c;backdrop-filter:blur(9px)}#blendApp .campaign-guide .guide-arrows button,#blendApp .campaign-guide .guide-play button{color:#dbeafe;border-color:#d9e4f13b}#blendApp .campaign-guide #guideCount{color:#b0c2da}#blendApp .campaign-guide .guide-dots button{background:#c7d4e84d}#blendApp .campaign-guide .guide-dots button[aria-current=true]{background:#60a5fa} @media(min-width:768px) and (max-width:1023px){#blendApp .campaign-guide .guide-copy{right:4%;width:43%;top:46%}#blendApp .campaign-guide .guide-copy h2{font-size:28px}#blendApp .campaign-guide .guide-copy>p:not(.guide-kicker){font-size:12px;line-height:2}#blendApp .campaign-guide .guide-tag{margin-top:12px;font-size:10px}} @media(max-width:767px){#blendApp .campaign-guide .guide-slide{height:auto;min-height:0;display:flex;flex-direction:column;background:#111827;padding:0}#blendApp .campaign-guide .campaign-art{position:relative;width:100%;height:220px;inset:auto;overflow:hidden;background:#111827;flex:none}#blendApp .campaign-guide .campaign-photo{height:100%;width:auto;max-width:none;inset:auto;left:0;top:0;object-fit:contain;object-position:left center;transform:none}#blendApp .campaign-guide .guide-copy{position:relative;right:auto;top:auto;transform:none;width:100%;padding:23px 25px 28px;min-height:247px;background:linear-gradient(0deg,#111827,#131e2d)}#blendApp .campaign-guide .guide-copy h2{font-size:28px;line-height:1.65;margin:9px 0 12px;max-width:100%}#blendApp .campaign-guide .guide-kicker{font-size:11px}#blendApp .campaign-guide .guide-copy>p:not(.guide-kicker){font-size:12px;line-height:2.1;max-width:100%}#blendApp .campaign-guide .guide-tag{font-size:10px;margin-top:16px}#blendApp .campaign-guide .guide-controls{position:relative;inset:auto;backdrop-filter:none;background:#131e2d;padding:13px 21px}#blendApp .campaign-guide .guide-arrows button,#blendApp .campaign-guide .guide-play button{width:32px;height:32px}} @media(max-width:420px){#blendApp .campaign-guide .campaign-art{height:194px}#blendApp .campaign-guide .guide-copy{padding:20px 22px 25px;min-height:250px}#blendApp .campaign-guide .guide-copy h2{font-size:26px}} @media(min-width:768px){#blendApp .campaign-guide .guide-slide{height:auto;aspect-ratio:1983/793}} /* Product-led motion story. All selectors are scoped to this prototype. */ #blendApp .motion-story{--story-blue:#3986ff;position:relative;overflow:hidden;border:1px solid #39465a;border-radius:14px;background:radial-gradient(ellipse at 25% 43%,#344154 0,#1c293a 35%,#152132 65%);color:#fff;margin:26px 0 22px} #blendApp .story-top{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;font-size:12px;color:#d3dce9;border-bottom:1px solid #ffffff0e}#blendApp .story-top>span:first-child{letter-spacing:.2px}#blendApp .story-demo{font-size:10px;color:#8f9eb4} #blendApp .motion-story .story-scene{height:460px;min-height:0;display:grid;grid-template-columns:1fr 1fr;position:relative;padding:0;gap:0;direction:ltr}#blendApp .motion-story [hidden]{display:none!important} #blendApp .story-art{height:100%;position:relative;overflow:hidden;direction:ltr;perspective:1200px}#blendApp .studio-floor{position:absolute;left:9%;right:5%;height:20px;bottom:63px;background:#080d1666;border-radius:50%;filter:blur(16px)}#blendApp .story-product{position:absolute;bottom:72px;width:37%;height:330px;--px:0px;--py:0px;--rot:0deg;--scale:1;transform:translate(var(--px),var(--py)) rotate(var(--rot)) scale(var(--scale));transform-origin:50% 100%;animation:package-arrive 1100ms cubic-bezier(.2,.75,.25,1) both;filter:drop-shadow(8px 14px 13px #0005)}#blendApp .story-product img{height:100%;width:100%;object-fit:contain;display:block;max-width:none}#blendApp .product-0{left:7%;--scale:.72;--rot:-9deg;animation-delay:180ms}#blendApp .product-1{left:31%;--scale:.87;--rot:-2deg;animation-delay:330ms;z-index:2}#blendApp .product-2{left:55%;--rot:6deg;animation-delay:480ms}#blendApp .product-label{display:block;position:absolute;bottom:-37px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:#c9d6e8;padding:6px 12px;border:1px solid #ffffff20;border-radius:5px;direction:rtl;animation:story-copy-in .6s 1.1s both} #blendApp .story-copy{align-self:center;direction:rtl;text-align:right;padding:25px 40px 30px 16px;position:relative;z-index:4}#blendApp .story-kicker{font-size:12px;color:#7eaff8;margin:0 0 15px;animation:story-copy-in .7s .1s both}#blendApp .story-copy h2{font-family:'Morabba Bold';font-size:clamp(28px,3vw,42px);line-height:1.6;color:white;margin:0 0 15px;max-width:490px;animation:story-copy-in .85s .25s both}#blendApp .story-description{font-size:14px;line-height:2.15;color:#b4c2d6;max-width:440px;animation:story-copy-in .85s .4s both}#blendApp .story-points{display:flex;flex-direction:column;gap:11px;margin:22px 0 28px}#blendApp .story-points>span{display:flex;align-items:center;gap:9px;color:#e1e8f2;font-size:12px;animation:story-copy-in .7s calc(.7s + var(--item)*.35s) both}#blendApp .story-points i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#8dbbff;background:#3986ff1a;font-size:10px} #blendApp .story-start{display:inline-flex;align-items:center;gap:24px;background:#2676ef;border:1px solid #5795f5;color:white;border-radius:7px;padding:12px 18px;font-size:12px;transition:background .2s,transform .2s;animation:story-copy-in .7s 1.6s both}#blendApp .story-start:hover{background:#3986ff;transform:translateY(-2px)}#blendApp .story-start:focus-visible,#blendApp .story-bottom button:focus-visible{outline:2px solid #a9ceff;outline-offset:4px} #blendApp .story-bottom{border-top:1px solid #ffffff13;display:flex;align-items:center;padding:0 20px;gap:26px;background:#0e1825b3}#blendApp .story-chapters{display:grid;grid-template-columns:repeat(4,1fr);flex:1;gap:16px}#blendApp .story-chapters button{position:relative;display:flex;align-items:center;gap:10px;text-align:right;background:transparent;border:0;color:#8392a8;padding:22px 8px;min-width:0;transition:color .3s}#blendApp .story-chapters b{font-size:12px;font-weight:500;white-space:nowrap}#blendApp .chapter-number{font-size:11px;font-variant-numeric:tabular-nums}#blendApp .story-chapters button[aria-current]{color:#eaf2ff}#blendApp .story-chapters button[aria-current] .chapter-number{color:#76aaff}#blendApp .chapter-progress{position:absolute;height:2px;bottom:0;left:0;right:0;background:#24364c;overflow:hidden}#blendApp .chapter-progress:after{content:'';position:absolute;inset:0;background:#4c91ff;transform:scaleX(0);transform-origin:right}#blendApp .story-chapters [aria-current] .chapter-progress:after{animation:chapter-run 10s linear both}#blendApp .story-player{display:flex;align-items:center;gap:6px;direction:rtl}#blendApp .story-player button{background:transparent;border:1px solid #ffffff20;color:#c8d8ed;width:30px;height:30px;border-radius:50%;font-size:14px}#blendApp .story-player #guideCount{font-size:10px;color:#9eacc0;margin-right:8px;white-space:nowrap} #blendApp .scene-1 .story-product{--scale:.88;--rot:0deg;animation-name:package-arrive,selection-glow;animation-duration:1s,6s;animation-delay:.15s,1.5s;animation-fill-mode:both,both}#blendApp .scene-1 .product-1{animation-delay:.35s,2.5s}#blendApp .scene-1 .product-2{animation-delay:.55s,3.5s}#blendApp .scene-1 .product-label{font-size:10px} #blendApp .scene-2 .product-0,#blendApp .scene-2 .product-1,#blendApp .scene-3 .product-0,#blendApp .scene-3 .product-2{display:none}#blendApp .scene-2 .product-2{left:7%;width:49%;--rot:-5deg;--scale:1.03}#blendApp .scene-2 .product-label,#blendApp .scene-3 .product-label{display:none}#blendApp .share-demo{position:absolute;right:4%;top:100px;width:47%;padding:20px;background:#142234ec;border:1px solid #54708f66;border-radius:12px;direction:rtl;box-shadow:0 15px 40px #0003;animation:story-copy-in .85s .8s both}#blendApp .share-demo small{font-size:11px;color:#91a3ba}#blendApp .share-demo strong{display:block;font-family:'Morabba Bold';font-size:39px;line-height:1.6;color:#edf5ff}#blendApp .share-demo strong span{font-size:20px;color:#6fa5f6}#blendApp .share-line{height:5px;background:#74a9ff;border-radius:2px;margin:12px 0;transform-origin:right;animation:share-grow 2s cubic-bezier(.2,.7,.3,1) both}#blendApp .line-a{width:90%;animation-delay:1.3s}#blendApp .line-b{width:70%;background:#a0b7d8;animation-delay:1.6s}#blendApp .line-c{width:55%;background:#5d7393;animation-delay:1.9s}#blendApp .share-caption{font-size:9px;color:#a2b6cf;display:block;margin-top:18px} #blendApp .scene-3 .product-1{left:12%;width:50%;--scale:1.03;--rot:-7deg}#blendApp .review-demo{position:absolute;right:2%;top:106px;width:44%;background:#eaf0f7;color:#1d2d41;padding:21px 17px;border-radius:8px;box-shadow:0 14px 30px #0003;direction:rtl;animation:receipt-in 1s 1s cubic-bezier(.2,.75,.2,1) both;transform:rotate(4deg)}#blendApp .review-check{display:grid;place-items:center;background:#2676ef;color:#fff;width:29px;height:29px;border-radius:50%;margin-bottom:14px}#blendApp .review-demo b{display:block;font-size:12px;margin-bottom:16px}#blendApp .review-demo>span:not(.review-check){display:flex;justify-content:space-between;font-size:10px;padding:10px 0;border-top:1px solid #ccd6e4;animation:story-copy-in .5s 2s both}#blendApp .review-demo i{width:30%;height:5px;background:#acbbce;border-radius:3px;margin-top:5px} @keyframes package-arrive{from{opacity:0;transform:translate(calc(var(--px) - 28px),calc(var(--py) + 38px)) rotate(calc(var(--rot) - 9deg)) scale(calc(var(--scale)*.92))}to{opacity:1;transform:translate(var(--px),var(--py)) rotate(var(--rot)) scale(var(--scale))}} @keyframes story-copy-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}@keyframes chapter-run{to{transform:scaleX(1)}}@keyframes share-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes receipt-in{from{opacity:0;translate:0 50px;rotate:5deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes selection-glow{0%,100%{filter:drop-shadow(8px 14px 13px #0005)}20%,65%{filter:drop-shadow(0 0 12px #448aff70)}} #blendApp .motion-story[data-motion-paused=true] *,#blendApp .motion-story[data-motion-paused=true] *:after{animation-play-state:paused!important} @media(max-width:1023px) and (min-width:768px){#blendApp .motion-story .story-scene{height:440px}#blendApp .story-copy{padding-right:25px}#blendApp .story-copy h2{font-size:30px}#blendApp .story-description{font-size:12px}#blendApp .story-product{height:290px;bottom:93px}#blendApp .story-chapters b{font-size:10px}#blendApp .story-chapters{gap:7px}} @media(max-width:767px){#blendApp .motion-story{margin-top:18px;border-radius:10px}#blendApp .story-top{padding:15px 18px;font-size:10px}#blendApp .story-demo{font-size:8px}#blendApp .motion-story .story-scene{display:flex;flex-direction:column;height:auto;min-height:0}#blendApp .story-art{width:100%;height:290px;flex:none;background:radial-gradient(ellipse at 50% 60%,#38465b44,transparent 65%)}#blendApp .story-product{height:235px;bottom:45px;width:36%}#blendApp .product-0{left:5%}#blendApp .product-1{left:30%}#blendApp .product-2{left:55%}#blendApp .product-label{font-size:10px;bottom:-28px;padding:4px 8px}#blendApp .studio-floor{bottom:39px}#blendApp .story-copy{padding:8px 24px 26px;width:100%;min-height:335px}#blendApp .story-kicker{font-size:10px;margin-bottom:10px}#blendApp .story-copy h2{font-size:28px;line-height:1.65;margin-bottom:10px}#blendApp .story-description{font-size:12px;line-height:2}#blendApp .story-points{gap:9px;margin:18px 0 22px}#blendApp .story-points>span{font-size:11px}#blendApp .story-start{font-size:11px;padding:10px 14px}#blendApp .story-bottom{display:block;padding:0 16px 14px}#blendApp .story-chapters{gap:10px}#blendApp .story-chapters button{flex-direction:column;align-items:flex-start;gap:5px;padding:14px 2px}#blendApp .story-chapters b{font-size:9px}#blendApp .chapter-number{font-size:9px}#blendApp .story-player{justify-content:center;margin-top:14px}#blendApp .scene-2 .product-2{left:9%;height:245px}#blendApp .share-demo{top:56px;right:7%;padding:15px;width:42%}#blendApp .share-demo strong{font-size:31px}#blendApp .share-demo small{font-size:9px}#blendApp .share-caption{font-size:8px}#blendApp .scene-3 .product-1{left:9%;height:250px}#blendApp .review-demo{top:51px;right:7%;width:40%;padding:15px}#blendApp .review-demo b{font-size:10px}#blendApp .review-demo>span:not(.review-check){font-size:9px;padding:8px 0}} @media(prefers-reduced-motion:reduce){#blendApp .motion-story:not(.motion-opt-in) *,#blendApp .motion-story:not(.motion-opt-in) *:after{animation:none!important;opacity:1!important;translate:none!important}#blendApp .motion-story:not(.motion-opt-in) .chapter-progress:after{display:none}} #blendApp .story-product img{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);object-fit:contain} #blendApp .motion-story.story-still *,#blendApp .motion-story.story-still *:after{animation:none!important;opacity:1!important;translate:none!important}#blendApp .story-still .chapter-progress:after{display:none} /* Storefront-inspired hierarchy: large product canvas and readable stage cards. */ #blendApp .motion-story{background:#1f2937;border:0;border-radius:14px;overflow:visible;margin-top:25px;color:#f9fafb}#blendApp .story-top{display:none}#blendApp .motion-story .story-scene{height:450px;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;background:linear-gradient(115deg,#223c5b 0,#1d3047 39%,#1f2937 65%)}#blendApp .story-art{border-radius:14px}#blendApp .story-copy{padding:35px 65px 35px 30px}#blendApp .story-copy h2{font-size:38px;line-height:1.65;max-width:470px;margin-bottom:14px}#blendApp .story-kicker{font-size:12px;color:#73adff}#blendApp .story-description{font-size:14px;line-height:2.1;color:#bccadb}#blendApp .story-points{gap:10px;margin:23px 0}#blendApp .story-points i{color:#9bc4ff;background:#2a4668}#blendApp .story-start{background:#287cf3;padding:12px 20px;font-size:13px;border-radius:8px;border:0;box-shadow:none}#blendApp .story-product{height:335px;bottom:68px}#blendApp .product-label{background:#152235;border:0;border-radius:6px;padding:7px 13px;color:#e2ebf6}#blendApp .studio-floor{filter:blur(20px)} #blendApp .story-bottom{position:relative;display:block;background:transparent;border:0;padding:22px 24px 25px;border-top:1px solid #ffffff0d;border-radius:0 0 14px 14px}#blendApp .chapter-heading{font-size:12px;margin:0 0 15px;color:#c5d3e5}#blendApp .story-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}#blendApp .story-chapters button{display:flex;flex-direction:row;align-items:center;gap:12px;padding:17px 15px;border:1px solid #3a495d;background:#243246;border-radius:10px;color:#c6d0df;min-height:85px;overflow:hidden;transition:background .3s,border-color .3s,transform .3s}#blendApp .story-chapters button:hover{transform:translateY(-3px);border-color:#6694cc}#blendApp .story-chapters button[aria-current]{background:#24466f;border-color:#438fff;color:white}#blendApp .chapter-number{display:grid;place-items:center;width:35px;height:35px;flex:none;background:#18283c;color:#a8c4e6;border-radius:9px;font-size:13px}#blendApp .story-chapters button[aria-current] .chapter-number{background:#3588ff;color:white}#blendApp .chapter-text{display:block;min-width:0}#blendApp .story-chapters b{display:block;font-size:13px;font-weight:600;white-space:normal;line-height:1.8}#blendApp .chapter-text small{display:block;font-size:10px;color:#98abc4;margin-top:4px;line-height:1.7}#blendApp .story-chapters [aria-current] small{color:#b7d6ff}#blendApp .chapter-progress{height:3px;background:transparent;left:15px;right:15px}#blendApp .story-player{position:absolute;top:12px;left:24px;margin:0}#blendApp .story-player button{border:0;background:transparent;border-radius:6px;width:auto;height:auto;padding:6px 9px;color:#a8bdd7;font-size:10px}#blendApp .story-player #guidePrev,#blendApp .story-player #guideNext,#blendApp .story-player #guideCount{display:none} #blendApp .story-copy h2,#blendApp .story-kicker,#blendApp .story-description,#blendApp .story-points>span,#blendApp .story-start{opacity:1!important}#blendApp .story-product{opacity:1!important} @keyframes package-arrive{from{transform:translate(calc(var(--px) - 22px),calc(var(--py) + 20px)) rotate(calc(var(--rot) - 5deg)) scale(calc(var(--scale)*.96))}to{transform:translate(var(--px),var(--py)) rotate(var(--rot)) scale(var(--scale))}} @keyframes story-copy-in{from{translate:0 10px}to{translate:0 0}} @media(min-width:768px) and (max-width:1023px){#blendApp .story-copy{padding:25px 30px 25px 15px}#blendApp .story-copy h2{font-size:29px}#blendApp .story-description{font-size:12px}#blendApp .story-chapters{gap:8px}#blendApp .story-chapters button{padding:12px 9px;gap:8px}#blendApp .story-chapters b{font-size:11px}#blendApp .chapter-text small{font-size:9px}#blendApp .chapter-number{width:26px;height:30px}} @media(max-width:767px){#blendApp .motion-story .story-scene{height:auto;display:flex;background:linear-gradient(180deg,#233c58,#1f2937 48%)}#blendApp .story-art{height:275px}#blendApp .story-product{height:225px;bottom:40px}#blendApp .story-copy{padding:8px 23px 26px;min-height:335px}#blendApp .story-copy h2{font-size:28px;line-height:1.65}#blendApp .story-description{font-size:12px}#blendApp .story-points{margin:18px 0 21px}#blendApp .story-bottom{padding:18px 16px}#blendApp .chapter-heading{font-size:10px;margin-bottom:12px;padding-bottom:20px}#blendApp .story-player{top:37px;left:12px}#blendApp .story-player button{font-size:9px}#blendApp .story-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#blendApp .story-chapters button{min-height:78px;padding:12px 9px;gap:8px}#blendApp .chapter-number{width:26px;height:31px;font-size:10px}#blendApp .story-chapters b{font-size:11px}#blendApp .chapter-text small{font-size:9px}#blendApp .story-start{font-size:12px}#blendApp .scene-2 .product-2,#blendApp .scene-3 .product-1{height:235px}} /* Match the existing storefront surfaces, typography and buttons. */ #blendApp .motion-story{background:var(--blend-surface);color:inherit;border-radius:8px;box-shadow:0 1px 3px #0001;margin:20px 0}#blendApp .motion-story .story-scene{background:var(--blend-surface);border-radius:8px;height:410px}#blendApp .story-art{background:none;border-radius:8px}#blendApp .story-copy{padding:30px 35px 30px 26px}#blendApp .story-copy h2{font-family:'Morabba Medium';font-size:30px;font-weight:400;color:inherit;line-height:1.6;text-shadow:none}#blendApp .story-description{color:var(--blend-muted);font-size:14px;line-height:2}#blendApp .story-kicker{color:var(--blend-muted);font-size:12px}#blendApp .story-points>span{color:inherit;font-size:13px}#blendApp .story-points i{background:var(--blend-inner);color:var(--blend-blue);border:1px solid var(--blend-border)}#blendApp .story-start{background:#3b82f6;border:0;border-radius:8px;color:white;font:14px Dana;padding:12px 20px;box-shadow:none}#blendApp .story-start:hover{background:#2563eb}#blendApp .story-product{height:295px;bottom:70px;filter:drop-shadow(4px 8px 8px #0002)}#blendApp .studio-floor{display:none}#blendApp .product-label{background:var(--blend-inner);color:var(--blend-muted);border:0;border-radius:6px;font-size:11px}#blendApp .story-bottom{background:var(--blend-surface);border-top:1px solid var(--blend-border);border-radius:0 0 8px 8px;padding:20px 24px}#blendApp .chapter-heading{color:var(--blend-muted);font-size:12px}#blendApp .story-chapters{gap:12px}#blendApp .story-chapters button{background:var(--blend-inner);border:1px solid var(--blend-border);border-radius:8px;color:var(--blend-muted);padding:14px;min-height:76px;box-shadow:none}#blendApp .story-chapters button[aria-current]{background:var(--blend-inner);border-color:#3b82f6;color:inherit}#blendApp .chapter-number{border-radius:50%;background:var(--blend-surface);border:1px solid var(--blend-border);color:var(--blend-muted);width:30px;height:30px;font-size:12px}#blendApp .story-chapters button[aria-current] .chapter-number{background:#3b82f6;border-color:#3b82f6;color:white}#blendApp .chapter-text small,#blendApp .story-chapters [aria-current] small{color:var(--blend-muted);font-size:10px}#blendApp .story-chapters b{font-weight:400;font-size:13px}#blendApp .story-player button{color:var(--blend-muted)}#blendApp .share-demo{background:var(--blend-inner);border-color:var(--blend-border);box-shadow:none;color:inherit}#blendApp .share-demo small,#blendApp .share-caption{color:var(--blend-muted)}#blendApp .share-demo strong{color:inherit}#blendApp .review-demo{background:var(--blend-inner);color:inherit;border:1px solid var(--blend-border);box-shadow:none}#blendApp .review-demo>span:not(.review-check){border-color:var(--blend-border)}#blendApp .scene-1 .story-product{animation-name:package-arrive;animation-duration:1s;filter:drop-shadow(4px 8px 8px #0002)} @media(min-width:768px) and (max-width:1023px){#blendApp .motion-story .story-scene{height:410px}#blendApp .story-copy{padding:24px}#blendApp .story-copy h2{font-size:26px}#blendApp .story-product{height:260px}} @media(max-width:767px){#blendApp .motion-story .story-scene{height:auto;background:var(--blend-surface)}#blendApp .story-art{height:260px;background:none}#blendApp .story-product{height:210px;bottom:38px}#blendApp .story-copy{padding:6px 20px 24px;min-height:325px}#blendApp .story-copy h2{font-size:25px}#blendApp .story-description{font-size:12px}#blendApp .story-points>span{font-size:12px}#blendApp .story-start{font-size:13px}#blendApp .story-bottom{padding:18px 16px}#blendApp .story-chapters button{padding:11px 8px;gap:7px}#blendApp .story-chapters b{font-size:11px}#blendApp .chapter-text small{font-size:9px}#blendApp .chapter-number{width:26px;height:26px;font-size:10px}#blendApp .scene-2 .product-2,#blendApp .scene-3 .product-1{height:220px}} /* One storefront font system throughout the new page. */ #blendApp,#blendApp p,#blendApp span,#blendApp small,#blendApp input,#blendApp label,#blendApp button,#blendApp i{font-family:Dana,sans-serif!important;font-style:normal}#blendApp h1,#blendApp h2,#blendApp h3,#blendApp strong,#blendApp b,#blendApp .chapter-text b{font-family:'Dana DemiBold',Dana,sans-serif!important;font-weight:400}#blendApp .story-product img{animation:pouch-settle 3.2s ease-in-out 1.2s infinite alternate}#blendApp .motion-story.story-still .story-product img{animation:none!important} @keyframes pouch-settle{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-7px)}} /* Directed stage choreography: finite sequences rather than decorative floating. */ #blendApp .story-product img{animation:none!important}#blendApp .motion-story .story-product{animation:stage-package 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:180ms;will-change:transform}#blendApp .motion-story .product-1{animation-delay:300ms}#blendApp .motion-story .product-2{animation-delay:420ms}#blendApp .motion-story .story-kicker{animation:stage-text .6s cubic-bezier(.16,1,.3,1) .15s both}#blendApp .motion-story .story-copy h2{animation:stage-text .8s cubic-bezier(.16,1,.3,1) .25s both}#blendApp .motion-story .story-description{animation:stage-text .8s cubic-bezier(.16,1,.3,1) .4s both}#blendApp .motion-story .story-points>span{animation:stage-text .65s cubic-bezier(.16,1,.3,1) calc(.65s + var(--item)*.22s) both}#blendApp .motion-story .story-start{animation:stage-text .7s cubic-bezier(.16,1,.3,1) 1.3s both} #blendApp .scene-0 .product-label{animation:label-in .55s cubic-bezier(.16,1,.3,1) 1s both}#blendApp .scene-1 .story-product:after{content:'✓';position:absolute;right:10%;top:13%;width:26px;height:26px;display:grid;place-items:center;background:#3b82f6;border:3px solid var(--blend-surface);color:white;border-radius:50%;font:14px Dana;animation:selection-confirm .6s cubic-bezier(.16,1,.3,1) 1.5s both}#blendApp .scene-1 .product-1:after{animation-delay:2.1s}#blendApp .scene-1 .product-2:after{animation-delay:2.7s} #blendApp .scene-2 .share-demo{animation:panel-arrive .9s cubic-bezier(.16,1,.3,1) .55s both}#blendApp .scene-2 .share-line{animation:portion-reveal 1.3s cubic-bezier(.22,.8,.25,1) both;transform-origin:right}#blendApp .scene-2 .line-a{animation-delay:1.2s}#blendApp .scene-2 .line-b{animation-delay:1.55s}#blendApp .scene-2 .line-c{animation-delay:1.9s}#blendApp .scene-2 .share-demo strong{animation:stage-text .7s cubic-bezier(.16,1,.3,1) 2.45s both}#blendApp .scene-3 .review-demo{animation:panel-arrive .9s cubic-bezier(.16,1,.3,1) .65s both;transform:rotate(0)}#blendApp .scene-3 .review-check{animation:selection-confirm .6s cubic-bezier(.16,1,.3,1) 1.5s both}#blendApp .scene-3 .review-demo>span:not(.review-check){animation:stage-text .6s cubic-bezier(.16,1,.3,1) 1s both}#blendApp .scene-3 .review-demo>span:last-child{animation-delay:1.4s} @keyframes stage-package{from{transform:translate(calc(var(--px) - 38px),calc(var(--py) + 22px)) rotate(calc(var(--rot) - 3deg)) scale(calc(var(--scale)*.95));filter:blur(3px)}to{transform:translate(var(--px),var(--py)) rotate(var(--rot)) scale(var(--scale));filter:blur(0)}}@keyframes stage-text{from{translate:14px 8px;clip-path:inset(0 0 100% 0)}to{translate:0 0;clip-path:inset(0 0 0 0)}}@keyframes label-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes selection-confirm{from{opacity:0;scale:.65}to{opacity:1;scale:1}}@keyframes panel-arrive{from{translate:-20px 18px;clip-path:inset(0 0 100% 0 round 8px)}to{translate:0 0;clip-path:inset(0 round 8px)}}@keyframes portion-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}} #blendApp .motion-story.story-still *,#blendApp .motion-story.story-still *:after{animation:none!important;clip-path:none!important;translate:none!important;opacity:1!important;scale:1!important} /* Four coffee-craft scenes, each explains a different action. */ #blendApp .motion-story .story-scene{height:440px}#blendApp .craft-scene{position:relative;isolation:isolate;overflow:hidden;height:100%}#blendApp .craft-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent,black 8%,black 88%,transparent);animation:craft-camera 9.6s cubic-bezier(.2,.65,.3,1) both}#blendApp .craft-package{position:absolute;left:0;bottom:25px;width:36%;height:190px;filter:drop-shadow(4px 12px 12px #0005);animation:craft-object 1s cubic-bezier(.16,1,.3,1) .4s both;z-index:2}#blendApp .craft-package img{width:100%;height:100%;object-fit:contain}#blendApp .craft-weight{position:absolute;right:8%;bottom:27px;background:var(--blend-inner);border:1px solid var(--blend-border);border-radius:8px;padding:14px 18px;direction:rtl;animation:craft-detail .7s cubic-bezier(.16,1,.3,1) 1s both;box-shadow:0 8px 24px #0002}#blendApp .craft-weight small{display:block;font-size:10px;color:var(--blend-muted);margin-bottom:6px}#blendApp .craft-weight b{font-size:18px}#blendApp .craft-weight b span{font-size:11px;color:var(--blend-muted)}#blendApp .craft-choice{position:absolute;left:6%;bottom:25px;width:210px;padding:16px;background:var(--blend-inner);border:1px solid var(--blend-border);border-radius:8px;direction:rtl;box-shadow:0 8px 24px #0003;animation:craft-detail .75s .6s both}#blendApp .craft-choice>span{display:block;font-size:10px;color:var(--blend-muted);margin-bottom:9px}#blendApp .craft-choice>div{display:flex;gap:9px;align-items:center;font-size:12px;padding:7px 0;animation:craft-detail .55s 1s both}#blendApp .craft-choice>div:nth-of-type(2){animation-delay:1.5s}#blendApp .craft-choice>div:nth-of-type(3){animation-delay:2s}#blendApp .craft-choice i{display:grid;place-items:center;width:19px;height:19px;background:#3b82f6;color:white;border-radius:50%;font-size:10px}#blendApp .craft-choice>small{display:block;font-size:9px;color:var(--blend-muted);border-top:1px solid var(--blend-border);padding-top:10px;margin-top:7px}#blendApp .craft-ratios{position:absolute;left:4%;bottom:24px;width:245px;padding:17px;background:var(--blend-inner);border:1px solid var(--blend-border);border-radius:8px;direction:rtl;box-shadow:0 8px 24px #0003;animation:craft-detail .8s .55s both}#blendApp .craft-ratios>small{font-size:10px;color:var(--blend-muted)}#blendApp .craft-ratio{height:5px;margin-top:12px;background:#3b82f6;border-radius:4px;transform-origin:right;animation:portion-reveal 1.3s cubic-bezier(.16,1,.3,1) both}#blendApp .craft-ratio.r1{width:100%;animation-delay:1s}#blendApp .craft-ratio.r2{width:75%;background:#87b7f9;animation-delay:1.4s}#blendApp .craft-ratio.r3{width:55%;background:#647e9c;animation-delay:1.8s}#blendApp .craft-ratios>b{display:block;font-size:25px;margin-top:15px;animation:craft-detail .6s 2.5s both}#blendApp .craft-ratios>b span{font:10px Dana;color:var(--blend-muted);margin-right:10px}#blendApp .craft-ratios p{font-size:9px;color:var(--blend-muted);margin-top:7px}#blendApp .craft-finish{position:absolute;left:7%;right:9%;bottom:26px;display:flex;align-items:center;gap:12px;direction:rtl;padding:17px;background:var(--blend-inner);border:1px solid var(--blend-border);border-radius:8px;animation:craft-detail .8s 1s both;box-shadow:0 8px 24px #0003}#blendApp .finish-mark{width:29px;height:29px;display:grid;place-items:center;background:#3b82f6;border-radius:50%;color:white;animation:selection-confirm .5s 1.8s both}#blendApp .craft-finish b{display:block;font-size:13px}#blendApp .craft-finish small{display:block;font-size:10px;color:var(--blend-muted);margin-top:5px} @keyframes craft-camera{from{transform:scale(1.075) translateX(-5px)}to{transform:scale(1) translateX(0)}}@keyframes craft-object{from{transform:translate(-22px,15px) rotate(-4deg)}to{transform:translate(0,0) rotate(0)}}@keyframes craft-detail{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} @media(max-width:767px){#blendApp .motion-story .story-scene{height:auto}#blendApp .craft-scene{height:285px}#blendApp .craft-photo{mask-image:linear-gradient(180deg,black 80%,transparent)}#blendApp .craft-package{height:135px;bottom:16px;left:-2%;width:36%}#blendApp .craft-weight{bottom:17px;right:7%;padding:10px 12px}#blendApp .craft-weight b{font-size:14px}#blendApp .craft-weight small{font-size:9px}#blendApp .craft-choice{width:173px;left:5%;bottom:13px;padding:12px}#blendApp .craft-choice>div{font-size:10px;padding:5px 0}#blendApp .craft-choice>small{font-size:8px}#blendApp .craft-ratios{width:190px;padding:12px;bottom:13px;left:4%}#blendApp .craft-ratios>b{font-size:21px;margin-top:10px}#blendApp .craft-ratios p{font-size:8px}#blendApp .craft-finish{bottom:15px;padding:12px;left:5%;right:5%}#blendApp .craft-finish b{font-size:12px}} /* Unobstructed PNG photographs: explanatory content stays in the copy column. */ #blendApp .motion-story .craft-scene{margin:20px 0 20px 20px;width:calc(100% - 20px);height:calc(100% - 40px);border-radius:8px;overflow:hidden;background:var(--blend-inner)}#blendApp .craft-photo{mask-image:none;object-fit:cover;animation:clean-photo-reveal 8.8s cubic-bezier(.2,.6,.3,1) both}#blendApp .story-copy{padding-top:25px;padding-bottom:25px}#blendApp .motion-story .story-scene{height:440px} @keyframes clean-photo-reveal{from{transform:scale(1.025)}to{transform:scale(1)}} @media(max-width:767px){#blendApp .motion-story .story-scene{height:auto}#blendApp .motion-story .craft-scene{margin:14px;width:calc(100% - 28px);height:auto;aspect-ratio:4/3;flex:none}#blendApp .craft-photo{mask-image:none}#blendApp .story-copy{padding:8px 22px 25px}} #blendApp .craft-photo{object-fit:contain;background:var(--blend-inner);animation:png-photo-entry .85s cubic-bezier(.16,1,.3,1) both;transform:none} @keyframes png-photo-entry{from{opacity:.35}to{opacity:1}} /* One continuous photographic banner, without separate image and text cards. */ #blendApp .motion-story .story-scene{position:relative;display:flex;min-height:460px;height:460px;background:#111827;isolation:isolate;overflow:hidden} #blendApp .motion-story .craft-scene{position:absolute;inset:0 auto 0 0;margin:0;width:64%;height:100%;border-radius:0;aspect-ratio:auto;background:#111827;mask-image:linear-gradient(to right,#000 65%,transparent 100%);z-index:0} #blendApp .craft-photo{object-fit:contain;background:#111827;object-position:left center} #blendApp .motion-story .story-copy{position:relative;z-index:1;flex:none;width:44%;margin-left:auto;padding:42px 36px;color:#f9fafb;background:transparent;align-self:center} #blendApp .motion-story .story-description{color:#cbd5e1} #blendApp .motion-story .story-kicker{color:#93c5fd} #blendApp .motion-story .story-points i{background:#1e293b;border-color:#334155;color:#93c5fd} #blendApp .motion-story .story-bottom{background:#111827;border-top:0} #blendApp .motion-story .chapter-heading,#blendApp .motion-story .story-player button{color:#cbd5e1} #blendApp .motion-story .story-chapters button{background:#1f2937;border-color:#374151;color:#cbd5e1} #blendApp .motion-story .story-chapters button[aria-current]{border-color:#3b82f6;color:#fff;background:#1f2937} #blendApp .motion-story .chapter-number{background:#111827;border-color:#374151;color:#cbd5e1} #blendApp .motion-story .chapter-text small{color:#9ca3af} @media(max-width:767px){ #blendApp .motion-story .story-scene{height:auto;min-height:0;display:block} #blendApp .motion-story .craft-scene{inset:0 0 auto;width:100%;height:300px;margin:0;mask-image:linear-gradient(to bottom,#000 73%,transparent 100%)} #blendApp .craft-photo{object-position:center top} #blendApp .motion-story .story-copy{width:100%;margin:0;padding:294px 24px 24px;min-height:0} } /* Each visible slide is now one flattened PNG, including its lettering. */ #blendApp .motion-story .story-scene{display:block;height:auto!important;min-height:0} #blendApp .motion-story .craft-scene{display:none} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden;clip-path:inset(50%);opacity:1} #blendApp .motion-story .banner-action{display:block;position:relative;width:100%;padding:0;margin:0;border:0;border-radius:0;background:#111827;line-height:0;animation:png-photo-entry .7s ease both;transform:none;translate:none;clip-path:none} #blendApp .motion-story .banner-action:hover{background:#111827;transform:none} #blendApp .banner-action picture,#blendApp .banner-action img{display:block;width:100%;height:auto;max-width:none} #blendApp .banner-action:focus-visible{outline-offset:-4px} /* Wide photography with copy directly over its textured background. */ #blendApp .motion-story .story-scene{height:350px!important;min-height:350px;display:block;background:#101820} #blendApp .motion-story .craft-scene{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;mask-image:none;background:#101820;border-radius:0} #blendApp .craft-scene:before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,#10182022,#10182077 50%,#10182099),var(--scene-url);background-size:cover;background-position:center;filter:blur(1px)} #blendApp .craft-photo{width:60%;height:100%;object-fit:contain;object-position:28% center;background:transparent;mask-image:linear-gradient(to right,#000 65%,transparent);animation:none} #blendApp .motion-story .story-copy{position:relative!important;inset:auto;width:49%!important;height:auto!important;min-height:0!important;padding:28px 36px!important;margin:0 0 0 auto!important;overflow:visible;clip-path:none;opacity:1;z-index:2;align-self:auto} #blendApp .motion-story .story-copy h2{font-size:28px;margin:10px 0 12px;line-height:1.6;text-shadow:0 2px 12px #0009} #blendApp .motion-story .story-description{font-size:13px;line-height:2;color:#e2e8f0;max-width:520px;text-shadow:0 1px 6px #000} #blendApp .story-points{display:flex;gap:16px;flex-wrap:wrap;margin:15px 0} #blendApp .story-points>span{font-size:11px} #blendApp .story-copy .story-start{font-size:12px;padding:10px 20px;min-height:42px} @media(max-width:767px){ #blendApp .motion-story .story-scene{height:530px!important;min-height:530px} #blendApp .craft-photo{width:100%;height:265px;object-position:center top;mask-image:linear-gradient(to bottom,#000 72%,transparent)} #blendApp .craft-scene:before{background-position:center;filter:blur(1px);opacity:.7} #blendApp .motion-story .story-copy{width:100%!important;padding:230px 22px 18px!important} #blendApp .motion-story .story-copy h2{font-size:22px;line-height:1.6;margin:7px 0} #blendApp .motion-story .story-description{font-size:12px;line-height:1.9} #blendApp .story-points{gap:9px;margin:10px 0} #blendApp .story-points>span{font-size:10px} } #blendApp .craft-scene:before{filter:none;background-image:linear-gradient(90deg,#10182044,#10182088),var(--scene-url)} #blendApp .scene-0:before{background-image:linear-gradient(90deg,#10182066,#10182099),url("/uploads/products/blend-guide-0.webp")} #blendApp .scene-1:before{background-image:linear-gradient(90deg,#10182066,#10182099),url("/uploads/products/blend-guide-1.webp")} #blendApp .scene-2:before{background-image:linear-gradient(90deg,#10182066,#10182099),url("/uploads/products/blend-guide-2.webp")} #blendApp .scene-3:before{background-image:linear-gradient(90deg,#10182066,#10182099),url("/uploads/products/blend-guide-3.webp")} #blendApp .craft-photo{display:none} #blendApp .scene-0 .craft-photo{display:block} /* Final wide PNG slides, animated as one composited artwork. */ #blendApp .motion-story .story-scene{height:auto!important;min-height:0!important;display:block;overflow:hidden} #blendApp .motion-story .craft-scene{display:none} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);margin:0!important} #blendApp .motion-story .banner-action{display:block;position:relative;width:100%;padding:0;margin:0;border:0;border-radius:0;background:#111827;line-height:0;animation:wide-banner-enter 1s cubic-bezier(.16,1,.3,1) both;clip-path:none;translate:none;transform:none;overflow:hidden} #blendApp .motion-story .banner-action:hover{transform:none;background:#111827} #blendApp .banner-action picture,#blendApp .banner-action img{display:block;width:100%;height:auto;max-width:none} #blendApp .motion-story .banner-action img{animation:wide-banner-camera 10s cubic-bezier(.2,.6,.3,1) both;transform-origin:center} #blendApp .motion-story.story-still .banner-action img{transform:none!important} #blendApp .banner-action:focus-visible{outline-offset:-4px;outline:2px solid #60a5fa} @keyframes wide-banner-enter{from{opacity:.2;filter:blur(2px);transform:translateX(14px)}to{opacity:1;filter:blur(0);transform:translateX(0)}} @keyframes wide-banner-camera{from{transform:scale(1)}to{transform:scale(1.018)}} /* Artwork source: larger hierarchy, full photographic texture and readable copy. */ #blendApp .motion-story .story-scene{height:390px!important;min-height:390px!important;display:block} #blendApp .motion-story .craft-scene{display:block} #blendApp .motion-story .story-copy{position:relative!important;width:51%!important;height:auto!important;min-height:0!important;clip-path:none!important;padding:40px 50px!important;overflow:visible!important;opacity:1} #blendApp .motion-story .story-copy h2{font-size:34px;line-height:1.65;margin:10px 0 12px;letter-spacing:-.4px} #blendApp .motion-story .story-description{font-size:15px;line-height:2;max-width:510px;color:#f1f5f9} #blendApp .motion-story .story-points{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0} #blendApp .motion-story .story-points>span{font-size:12px;display:flex;align-items:center;gap:6px} #blendApp .motion-story .story-kicker{font-size:12px;letter-spacing:0;color:#93c5fd} #blendApp .motion-story .story-copy .story-start{font-size:14px;min-height:45px;padding:11px 24px} #blendApp .craft-scene:before{background-size:cover;background-position:45% center} #blendApp .scene-0:before{background-image:linear-gradient(90deg,#10182088,#101820dd),url("/uploads/products/blend-guide-0.webp")} #blendApp .scene-1:before{background-image:linear-gradient(90deg,#10182011,#101820cc),url("/uploads/products/blend-guide-1.webp")} #blendApp .scene-2:before{background-image:linear-gradient(90deg,#10182022,#101820dd),url("/uploads/products/blend-guide-2.webp")} #blendApp .scene-3:before{background-image:linear-gradient(90deg,#10182022,#101820dd),url("/uploads/products/blend-guide-3.webp")} @media(max-width:767px){ #blendApp .motion-story .story-scene{height:540px!important;min-height:540px!important} #blendApp .motion-story .story-copy{width:100%!important;padding:225px 24px 20px!important} #blendApp .motion-story .story-copy h2{font-size:25px;line-height:1.6;margin:10px 0} #blendApp .motion-story .story-description{font-size:13px;line-height:1.9} #blendApp .motion-story .story-points{gap:10px;margin:14px 0} #blendApp .motion-story .story-points>span{font-size:10px} } /* Stable PNG artwork; motion is driven by Web Animations, not theme CSS. */ #blendApp .motion-story .story-scene{height:auto!important;min-height:0!important;display:block;overflow:hidden} #blendApp .motion-story .craft-scene{display:none!important} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;margin:0!important} #blendApp .motion-story .banner-action{display:block;position:relative;width:100%;padding:0;margin:0;border:0;border-radius:0;background:#111827;line-height:0;animation:none!important;transform:none;translate:none;clip-path:none;overflow:hidden} #blendApp .motion-story .banner-action img{animation:none!important;transform-origin:center;will-change:transform} #blendApp .banner-action picture,#blendApp .banner-action img{display:block;width:100%;height:auto;max-width:none} #blendApp .motion-story .guide-slides{position:relative;overflow:hidden;touch-action:pan-y} #blendApp .banner-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:3;pointer-events:none} #blendApp .motion-story #guidePause{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:8px;background:#1f2937;border:1px solid #374151;color:#e2e8f0;font-size:12px;gap:8px} #blendApp .motion-story .chapter-progress{height:3px;bottom:0;left:0;right:0;transform-origin:right} #blendApp .motion-story .story-chapters button[aria-current] .chapter-progress{animation:chapter-fill 8s linear both!important} #blendApp .motion-story.story-still .story-chapters button[aria-current] .chapter-progress{animation-play-state:paused!important} @keyframes chapter-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Composition source for PNG export. */ #blendApp .motion-story .story-scene{height:410px!important;min-height:410px!important;display:block} #blendApp .motion-story .craft-scene{display:block!important} #blendApp .motion-story .story-copy{position:absolute!important;top:0;right:0;left:auto;bottom:auto;width:51%!important;height:auto!important;min-height:0!important;padding:34px 44px!important;overflow:visible!important;clip-path:none!important;margin:0!important;opacity:1} #blendApp .motion-story .story-points{display:flex!important;flex-direction:row!important;gap:12px;flex-wrap:wrap;margin:18px 0} #blendApp .motion-story .story-points>span{font-size:12px;display:flex;gap:6px;align-items:center} @media(max-width:767px){#blendApp .motion-story .story-scene{height:550px!important;min-height:550px!important}#blendApp .motion-story .story-copy{width:100%!important;padding:225px 24px 20px!important}#blendApp .motion-story .story-points>span{font-size:10px}} #blendApp .motion-story .story-scene{height:auto!important;min-height:0!important;display:block;overflow:hidden} #blendApp .motion-story .craft-scene{display:none!important} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;margin:0!important} #blendApp .motion-story .banner-action,#blendApp .motion-story .banner-action img{animation:none!important} /* Bright artwork source, using original storefront heading and body faces. */ #blendApp .motion-story .story-scene{display:block;height:448px!important;min-height:448px!important;background:#faf2e5} #blendApp .motion-story .craft-scene{display:block!important;inset:0;width:100%;height:100%;margin:0;mask-image:none;background:#faf2e5} #blendApp .motion-story .craft-photo{display:none!important} #blendApp .craft-scene:before{filter:none;background-size:100% 100%;background-position:center;opacity:1} #blendApp .scene-0:before{background-image:url("/uploads/products/blend-guide-0.webp")} #blendApp .scene-1:before{background-image:url("/uploads/products/blend-guide-1.webp")} #blendApp .scene-2:before{background-image:url("/uploads/products/blend-guide-2.webp")} #blendApp .scene-3:before{background-image:url("/uploads/products/blend-guide-3.webp")} #blendApp .motion-story .story-copy{position:absolute!important;top:0;right:0;left:auto;width:49%!important;height:auto!important;min-height:0!important;padding:42px 48px!important;overflow:visible!important;clip-path:none!important;margin:0!important;opacity:1;color:#172b45} #blendApp .motion-story .story-copy h2{font-family:'Morabba Bold',sans-serif!important;font-size:36px;line-height:1.55;letter-spacing:0;text-shadow:none;margin:12px 0 15px;color:#172b45;animation:none!important} #blendApp .motion-story .story-description{font-family:Dana,sans-serif!important;font-size:15px;line-height:2.05;color:#40536a;text-shadow:none;animation:none!important} #blendApp .motion-story .story-kicker{font-family:'Dana Medium',sans-serif!important;font-size:12px;color:#2563eb;animation:none!important} #blendApp .motion-story .story-points{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:14px;margin:22px 0} #blendApp .motion-story .story-points>span{font-family:'Dana Medium',sans-serif!important;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px;animation:none!important} #blendApp .motion-story .story-points i{background:#e6efff;color:#2563eb;border:0;width:20px;height:20px;display:grid;place-items:center} #blendApp .motion-story .story-copy .story-start{font-family:'Dana DemiBold',sans-serif!important;font-size:14px;min-height:46px;padding:12px 24px;animation:none!important} @media(max-width:767px){ #blendApp .motion-story .story-scene{height:570px!important;min-height:570px!important} #blendApp .craft-scene:before{background-size:auto 250px;background-repeat:no-repeat;background-position:left top;background-color:#faf2e5} #blendApp .craft-scene:after{content:'';position:absolute;inset:190px 0 auto;height:80px;background:linear-gradient(transparent,#faf2e5);pointer-events:none} #blendApp .motion-story .story-copy{width:100%!important;padding:254px 24px 18px!important} #blendApp .motion-story .story-copy h2{font-size:27px;line-height:1.5;margin:9px 0 12px} #blendApp .motion-story .story-description{font-size:13px;line-height:1.95} #blendApp .motion-story .story-points{gap:9px;margin:15px 0} #blendApp .motion-story .story-points>span{font-size:10px} } /* Flattened bright PNG output; original copy remains accessible. */ #blendApp .motion-story .story-scene{height:auto!important;min-height:0!important;display:block;overflow:hidden} #blendApp .motion-story .craft-scene{display:none!important} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;margin:0!important} #blendApp .motion-story .banner-action,#blendApp .motion-story .banner-action img{animation:none!important} #blendApp .motion-story .banner-action{background:#faf2e5} #blendApp .motion-story .banner-action:hover{background:#faf2e5} /* Export source: stronger type hierarchy and readable contrast. */ #blendApp .motion-story .story-scene{height:448px!important;min-height:448px!important} #blendApp .motion-story .craft-scene{display:block!important} #blendApp .motion-story .story-copy{position:absolute!important;top:0;right:0;left:auto;width:52%!important;height:auto!important;min-height:0!important;padding:32px 42px!important;clip-path:none!important;overflow:visible!important;margin:0!important;opacity:1} #blendApp .motion-story .story-copy h2{font-family:'Morabba Bold',sans-serif!important;font-size:42px;line-height:1.5;color:#10243b;margin:10px 0 14px;text-shadow:0 1px 0 #fff8} #blendApp .motion-story .story-description{font-family:'Dana Medium',sans-serif!important;font-size:19px;line-height:2;color:#24384e;max-width:580px;text-shadow:0 1px 0 #fff8} #blendApp .motion-story .story-kicker{font-size:14px;color:#174894} #blendApp .motion-story .story-points{gap:14px;margin:18px 0} #blendApp .motion-story .story-points>span{font-size:14px;color:#24384e} #blendApp .motion-story .story-copy .story-start{font-size:16px;padding:12px 24px;min-height:48px} @media(max-width:767px){ #blendApp .motion-story .story-scene{height:620px!important;min-height:620px!important} #blendApp .motion-story .story-copy{width:100%!important;padding:252px 22px 18px!important} #blendApp .motion-story .story-copy h2{font-size:30px;line-height:1.5;margin:9px 0 12px} #blendApp .motion-story .story-description{font-size:16px;line-height:1.95} #blendApp .motion-story .story-kicker{font-size:12px} #blendApp .motion-story .story-points{gap:8px;margin:15px 0} #blendApp .motion-story .story-points>span{font-size:12px} } #blendApp .motion-story .story-scene{height:auto!important;min-height:0!important;display:block;overflow:hidden} #blendApp .motion-story .craft-scene{display:none!important} #blendApp .motion-story .story-copy{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;margin:0!important} #blendApp .motion-story .banner-action,#blendApp .motion-story .banner-action img{animation:none!important} /* Live storefront typography, animated independently from photography. */ #blendApp .motion-story .story-scene{height:460px!important;min-height:460px!important;isolation:isolate} #blendApp .motion-story .craft-scene{display:block!important} #blendApp .motion-story .story-copy{position:absolute!important;inset:0 0 auto auto!important;width:54%!important;height:auto!important;min-height:0!important;padding:44px 48px!important;clip-path:none!important;overflow:visible!important;margin:0!important;opacity:1!important;background:linear-gradient(90deg,transparent,#fff9 20%,#fffc)!important;z-index:3} #blendApp .motion-story .story-copy h2{font-family:'Morabba Medium',sans-serif!important;font-size:38px!important;font-weight:400!important;line-height:1.6!important;color:#152c43!important;text-shadow:none!important;margin:12px 0 18px!important} #blendApp .motion-story .story-description{font-family:Dana,sans-serif!important;font-size:20px!important;line-height:2!important;color:#263c51!important;text-shadow:none!important} #blendApp .motion-story .story-kicker,#blendApp .motion-story .story-points>span{font-family:'Dana Medium',sans-serif!important;font-size:14px!important;color:#284564!important} #blendApp .motion-story .story-copy .story-start{font-family:'Dana DemiBold',sans-serif!important;font-size:16px!important;margin-top:12px} #blendApp .motion-story .story-copy>*{animation:none!important} @media(max-width:767px){#blendApp .motion-story .story-scene{height:640px!important;min-height:640px!important}#blendApp .motion-story .story-copy{width:100%!important;padding:245px 24px 24px!important;background:linear-gradient(transparent 180px,#fffdf8 245px)!important}#blendApp .motion-story .story-copy h2{font-size:29px!important;line-height:1.55!important}#blendApp .motion-story .story-description{font-size:18px!important}#blendApp .motion-story .story-points>span{font-size:12px!important}} /* Hide the guide playback control as requested. */ #blendApp .motion-story #guidePause{display:none!important} #blendApp #tasteBars{display:none}#blendApp .prototype-foot{display:none}#blendApp .bean-card:disabled{opacity:.45;cursor:not-allowed}#blendApp .blend-error{padding:30px;background:var(--blend-surface);border-radius:10px;line-height:2} #toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,14px);background:#1f2937;color:#fff;padding:14px 24px;border:1px solid #475569;border-radius:12px;opacity:0;pointer-events:none;z-index:150;transition:.25s;font-family:Dana}#toast.show{opacity:1;transform:translate(-50%,0)} /* Blend purchase UX, scoped to this page. */ #blendApp .hero{margin:18px 0!important;padding:0!important}#blendApp .hero h1{font-size:30px!important}#blendApp .hero p{margin-top:6px!important} #blendApp .ux-bean-image{width:100%;height:124px;object-fit:contain;display:block;margin:20px auto 12px}#blendApp .bean-card .check{font-size:11px;width:auto!important;height:auto!important;padding:5px 9px;border-radius:6px!important}#blendApp .bean-card[aria-pressed=true]{border:2px solid #3788fa;background:color-mix(in srgb,var(--blend-surface) 90%,#3788fa)}#blendApp .bean-card{border-radius:14px!important}#blendApp .package-card.selected{border:2px solid #3788fa!important;box-shadow:0 0 0 3px #3788fa15}#blendApp .package-check{color:#3788fa} #blendApp .ux-adjust{display:flex;align-items:center;gap:8px;direction:ltr}#blendApp .ux-adjust button{width:40px;height:40px;border:1px solid var(--blend-border);border-radius:9px;color:#3788fa;font-size:22px;transition:background .2s}#blendApp .ux-adjust button:hover{background:#3788fa15}#blendApp .ux-adjust button:disabled{opacity:.3;cursor:not-allowed}#blendApp .ratio-row{padding:18px;border:1px solid var(--blend-border);border-radius:12px;margin-top:14px}#blendApp .ratio-share{gap:12px;flex-wrap:wrap} #blendApp .ux-progress{padding:14px 16px;border:1px solid var(--blend-border);border-radius:12px;margin:18px 0;background:var(--blend-inner)}#blendApp .ux-progress-label{font-size:14px;margin-bottom:10px}#blendApp .ux-track{height:7px;border-radius:12px;overflow:hidden;background:#8da2be30}#blendApp .ux-track i{display:block;height:100%;background:#3788fa;border-radius:inherit;transition:width .3s ease}#blendApp .ux-progress.ready .ux-track i{background:#21a675}#blendApp .ux-progress.ready{border-color:#21a67580}#blendApp .summary{align-self:start;top:20px;max-height:calc(100dvh - 40px);overflow:auto}#blendApp .ux-mobile-bar{display:none}#blendApp button:focus-visible{outline:3px solid #3788fa;outline-offset:3px} @media(max-width:767px){#blendApp{padding-bottom:110px!important}#blendApp .summary{position:static!important;max-height:none;overflow:visible}#blendApp .ux-mobile-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--blend-surface);border-top:1px solid var(--blend-border);box-shadow:0 -6px 24px #0002;z-index:90}#blendApp .ux-mobile-bar b{display:block;font-size:14px}#blendApp .ux-mobile-bar small{display:block;font-size:12px;color:var(--blend-muted);margin-top:5px}#blendApp .ux-mobile-bar button{padding:12px!important;min-height:46px;white-space:nowrap}#blendApp .ratio-label{gap:12px;flex-wrap:wrap}#blendApp .ux-adjust{margin-right:auto}#blendApp .ux-bean-image{height:106px}} @media(prefers-reduced-motion:reduce){#blendApp .ux-track i{transition:none}} body:has(#blendApp){overflow:visible!important}html:has(#blendApp){overflow-x:clip!important;overflow-y:auto!important}#blendApp #totalState[hidden]{display:none!important} #blendApp .summary{scrollbar-width:thin;scrollbar-color:#3788fa66 transparent}#blendApp .summary::-webkit-scrollbar{width:5px}#blendApp .summary::-webkit-scrollbar-thumb{background:#3788fa66;border-radius:10px}#blendApp .ux-price-details{margin:14px 0}#blendApp .ux-price-details>summary{cursor:pointer;font-size:13px;color:#3788fa;padding:10px 0}#blendApp .summary .price{margin-top:12px;padding-top:12px} #blendApp .ux-guide-toggle{display:none!important} #blendApp #grindOptions[hidden]{display:none!important}#blendApp .ux-grind-mode{border:0;padding:0;margin:24px 0}#blendApp .ux-grind-mode legend{font-size:14px;margin-bottom:10px;color:var(--blend-muted)}#blendApp .ux-grind-mode .grind-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}#blendApp .ux-grind-mode label{display:flex;gap:12px;align-items:center;padding:22px;border:2px solid var(--blend-border);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s}#blendApp .ux-grind-mode label:has(input:checked){border-color:#3788fa;background:#3788fa12}#blendApp .ux-grind-mode input{width:18px;height:18px;accent-color:#3788fa;flex-shrink:0}#blendApp .ux-grind-mode strong{display:block;font-size:17px}#blendApp .ux-grind-mode small{display:block;margin:8px 0 0!important;font-size:12px;line-height:1.8;color:var(--blend-muted)}#blendApp #equipment{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}#blendApp .ux-grind-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:right;padding:20px 18px!important;border:2px solid var(--blend-border);border-radius:12px;min-height:112px;gap:8px;transition:border-color .2s,background .2s}#blendApp .ux-grind-card.selected{border-color:#3788fa!important;background:#3788fa12!important}#blendApp .ux-grind-card small{font-size:12px;color:var(--blend-muted);font-weight:400}#blendApp .ux-grind-check{position:absolute;left:12px;top:12px;color:#3788fa}#blendApp .ux-grind-help{padding:14px 18px;border-radius:10px;background:#3788fa0d;border:1px solid #3788fa30;font-size:13px;line-height:1.9;margin:20px 0} @media(max-width:767px){#blendApp .ux-grind-mode .grind-choice{grid-template-columns:1fr}#blendApp #equipment{grid-template-columns:repeat(2,minmax(0,1fr))}#blendApp .ux-grind-card{padding:20px 12px!important}#blendApp .ux-grind-mode label{padding:18px}} /* Keep the confirmation and cart action in separate layout rows. */ #blendApp #saveMessage:not(:empty){display:block!important;position:static!important;line-height:1.9!important;margin:18px 0 0!important;padding:12px 14px!important;border:1px solid #22a67545;border-radius:10px;clear:both} #blendApp #blendCartLink{display:flex!important;position:static!important;align-items:center;justify-content:center;width:100%;max-width:100%;margin:14px 0 0!important;padding:14px 18px!important;line-height:1.9!important;white-space:normal;box-sizing:border-box;float:none!important;transform:none!important}