/* Lightweight, illustrative interface previews. Full examples live in the Build Room. */
.deliverable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.deliverable-card{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.deliverable-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 10px 24px #00000009}
.deliverable-card:focus-visible{outline:3px solid var(--copper);outline-offset:5px}
.deliverable-art{container-type:inline-size;position:relative;aspect-ratio:1.45;background:#f5f4ef;overflow:hidden;color:#191c1b;border-bottom:1px solid var(--line);isolation:isolate}
.deliverable-caption{padding:23px 25px 25px}
.deliverable-caption h3{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.035em}
.deliverable-caption>span{display:block;margin-top:12px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.deliverable-footnote{display:flex;justify-content:space-between;gap:28px;margin-top:26px}
.deliverable-footnote p{font-size:14px;color:var(--muted);max-width:46ch}
.deliverable-footnote p:last-child{text-align:right}
/* Miniature UI is decorative; the card label remains accessible and full size. */
.deliverable-art span,.deliverable-art p,.deliverable-art i{font-style:normal;line-height:1.35}
.deliverable-art strong{display:block;letter-spacing:-.055em;line-height:1.05}
.preview-slide,.preview-browser,.preview-dashboard,.preview-app,.preview-strategy,.mini-brand,.mini-outreach,.mini-workflow{box-shadow:0 3cqw 6cqw #23251c12;border:1px solid #dcded5;background:#fff;border-radius:1.5cqw}
.preview-slide{position:absolute;width:67%;height:68%;top:17%;left:11%;padding:5cqw}
.preview-slide>span{font-size:2.25cqw;letter-spacing:.1em;font-weight:600}
.slide-front{background:#242825;color:#f5f4ef;transform:rotate(-6deg);z-index:2}
.slide-front strong{font-size:7.5cqw;margin-top:4cqw;max-width:70%;font-weight:700}
.slide-front:after{content:'';position:absolute;right:5cqw;top:13cqw;bottom:10cqw;width:11cqw;background:#d9ff57;border-radius:1cqw}
.slide-bottom{position:absolute;bottom:4cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-between;border-top:1px solid #ffffff40;padding-top:2cqw;font-size:2.2cqw}
.slide-bottom b{font-weight:400;color:#d9ff57}
.slide-back{transform:rotate(6deg);top:14%;left:23%;background:#fff;color:#6b7069}
.slide-back .mini-bars{height:63%;margin:3cqw 0 0 auto;width:24%;gap:1.5cqw}
.mini-bars{display:flex;align-items:end;gap:2cqw;height:100%}
.mini-bars i{display:block;flex:1;background:#d2d5cd;height:30%;min-width:0;border-radius:.4cqw .4cqw 0 0}
.mini-bars i:nth-child(2){height:46%}.mini-bars i:nth-child(3){height:65%}.mini-bars i:nth-child(4){height:78%}.mini-bars i:last-child{height:94%;background:#d9ff57}
.preview-browser{position:absolute;width:86%;height:79%;top:11%;left:7%;overflow:hidden;transform:rotate(-2deg)}
.preview-browser-top{height:6.5cqw;background:#fbfbf8;border-bottom:1px solid #e7e8e2;display:flex;align-items:center;gap:5cqw;padding:0 3cqw;font-size:2cqw;color:#697168}
.preview-dots{display:flex;gap:1cqw}.preview-dots i{width:1.3cqw;height:1.3cqw;border-radius:100%;background:#c8ccc3}.preview-dots i:first-child{background:#252a24}.preview-dots i:last-child{background:#d9ff57}
.mini-site-nav{display:flex;justify-content:space-between;align-items:center;padding:3cqw 4cqw;font-size:2cqw}.mini-site-nav b{font-size:2.4cqw;letter-spacing:-.06em}.mini-site-nav span{color:#73796f;font-size:1.7cqw}
.mini-site-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:4cqw;padding:3cqw 4cqw}.mini-site-hero>div>span{font-size:1.8cqw;font-weight:600;letter-spacing:.04em}.mini-site-hero strong{font-size:6.1cqw;margin-top:2cqw}
.mini-cta{display:inline-block;background:#d9ff57;border-radius:.8cqw;font-size:1.9cqw;font-weight:600;padding:1.8cqw 2.3cqw;margin-top:3cqw}
.mini-site-feature{background:#e9ebdf;border-radius:1.2cqw;padding:3cqw;display:flex;flex-direction:column;justify-content:center}.mini-site-feature strong{font-size:4.1cqw;margin:3cqw 0 5cqw}.mini-line{height:1cqw;width:90%;border-radius:1cqw;background:#c9cec3;margin-bottom:1.4cqw}.mini-line.short{width:60%}
.mini-site-footer{display:flex;justify-content:space-between;border-top:1px solid #e1e4da;padding:2.2cqw 4cqw;margin:1cqw 4cqw;font-size:2.2cqw;font-weight:600}
.preview-dashboard{position:absolute;top:13%;left:7%;width:86%;height:75%;display:flex;overflow:hidden;transform:rotate(2deg)}
.mini-dashboard-nav{width:10cqw;background:#f3f5ee;border-right:1px solid #e5e7df;padding:4cqw 2.8cqw}.mini-dashboard-nav b{display:block;font-size:3.5cqw;margin-bottom:5cqw}.mini-dashboard-nav i{display:block;width:3.5cqw;height:3.5cqw;background:#d9ddcf;border-radius:1cqw;margin-bottom:4cqw}.mini-dashboard-nav i:first-of-type{background:#d9ff57}
.mini-dashboard-main{flex:1;padding:4cqw;min-width:0}.mini-dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:1cqw;margin-bottom:3cqw}.mini-dashboard-heading strong{font-size:3.5cqw;letter-spacing:-.04em}.mini-dashboard-heading span{font-size:1.7cqw;color:#777e73}
.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-bottom:3cqw}.mini-kpis div{padding:2cqw;background:#f4f5ef;border-radius:1cqw}.mini-kpis span{font-size:1.8cqw;color:#7b8276;display:block}.mini-kpis b{font-size:2.8cqw;font-weight:600;display:block;margin-top:1cqw;white-space:nowrap}
.mini-chart>span{font-size:1.8cqw;letter-spacing:.05em;color:#70766b}.mini-chart svg{display:block;width:100%;height:18cqw;margin-top:1cqw}
.mini-dashboard-bottom{height:9cqw;display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:4cqw;margin-top:2cqw}.mini-dashboard-bottom>.mini-bars{gap:1.1cqw}.mini-donut{aspect-ratio:1;width:9cqw;background:conic-gradient(#d9ff57 0 42%,#272d26 42% 73%,#e1e5d9 73% 100%);border-radius:50%;position:relative}.mini-donut:after{content:'';position:absolute;inset:27%;border-radius:50%;background:#fff}.mini-dashboard-bottom>div:last-child{align-self:center}
.preview-app{position:absolute;height:86%;top:8%;width:36%;padding:4cqw;border-radius:3cqw;display:flex;flex-direction:column}
.app-first{left:12%;transform:rotate(-6deg);z-index:2}.app-second{left:52%;top:11%;height:80%;transform:rotate(6deg)}
.mini-app-top{display:flex;justify-content:space-between;align-items:center;font-size:1.8cqw;margin-bottom:4cqw}.mini-app-top b{font-size:3cqw}.preview-app>strong{font-size:4.2cqw;line-height:1.13}.preview-app>p{font-size:2.1cqw;color:#747b6e;margin-top:2cqw}
.mini-app-focus{background:#d9ff57;padding:3cqw 2.4cqw;margin-top:3cqw;border-radius:1cqw}.mini-app-focus span{display:block;font-size:1.7cqw;letter-spacing:.03em}.mini-app-focus b{display:block;font-size:3.2cqw;line-height:1.05;margin-top:2cqw;letter-spacing:-.045em}
.mini-app-row{display:flex;align-items:center;gap:1.3cqw;font-size:1.8cqw;border-bottom:1px solid #eaede3;padding:2cqw 0}.mini-app-row i{width:2cqw;height:2cqw;border:1px solid #c6ccbe;border-radius:.5cqw;flex-shrink:0}.mini-app-bottom{display:flex;justify-content:space-between;border-top:1px solid #e2e7d9;margin-top:auto;padding-top:2cqw}.mini-app-bottom i{width:2cqw;height:2cqw;background:#d3d8cb;border-radius:50%}.mini-app-bottom i:first-child{background:#222a20}
.mini-app-check{display:flex;align-items:center;justify-content:center;width:10cqw;height:10cqw;border-radius:50%;background:#d9ff57;font-size:5cqw;margin:1cqw 0 4cqw}.app-second>.mini-line{margin-top:4cqw}.app-second>.mini-line.short{margin-top:0}.app-second>.mini-cta{margin-top:2cqw;text-align:center}
.preview-strategy{position:absolute;top:14%;left:8%;width:84%;height:74%;padding:5cqw;transform:rotate(-2deg)}.mini-plan-heading span{font-size:2cqw;letter-spacing:.08em;font-weight:600}.mini-plan-heading strong{font-size:5.4cqw;margin-top:2cqw}.mini-plan-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin-top:5cqw}.mini-plan-flow>div{background:#f1f3eb;padding:3cqw 2cqw;border-radius:1cqw;position:relative}.mini-plan-flow>div:last-child{background:#d9ff57}.mini-plan-flow span{font-size:2.3cqw;color:#72796d}.mini-plan-flow b{display:block;font-size:3.3cqw;margin:2cqw 0 3cqw;letter-spacing:-.04em}.mini-plan-flow i{display:block;width:90%;height:1cqw;background:#c8cebe;border-radius:1cqw;margin-top:1.3cqw}.mini-plan-flow i:last-child{width:60%}.mini-plan-flow>div:last-child i{background:#a1bf42}.mini-plan-flow>div:not(:last-child):after{content:'';position:absolute;left:100%;top:50%;width:3cqw;border-top:1px solid #aeb8a1}.mini-plan-note{margin-top:3cqw;padding-top:2cqw;border-top:1px solid #e5e9dc}.mini-plan-note>span{font-size:1.8cqw;display:block;margin-bottom:1.5cqw}.mini-plan-note>.mini-line{height:.8cqw;width:54%}.mini-plan-note>.mini-line.short{width:37%}
.preview-more{position:absolute;inset:13% 11%}.mini-brand{position:absolute;left:0;top:0;width:47%;height:100%;padding:4cqw;transform:rotate(-6deg)}.mini-brand>span,.mini-outreach>span,.mini-workflow>span{font-size:2cqw;font-weight:600;letter-spacing:.08em;display:block}.mini-brand strong{font-size:19cqw;margin-top:7cqw;font-weight:500}.mini-brand>div{display:flex;gap:1.5cqw;margin-top:5cqw}.mini-brand i{width:6cqw;height:6cqw;border-radius:50%;background:#262c23}.mini-brand i:nth-child(2){background:#bfc7b3}.mini-brand i:last-child{background:#d9ff57}.mini-outreach{position:absolute;right:0;top:0;width:46%;height:47%;padding:3cqw;transform:rotate(5deg)}.mini-outreach>span{margin-bottom:4cqw}.mini-outreach .mini-line{height:.9cqw;margin-bottom:1.5cqw}.mini-workflow{position:absolute;right:-1%;bottom:-1%;width:47%;height:46%;padding:3cqw;transform:rotate(4deg)}.mini-workflow>div{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-top:4cqw;font-size:3cqw}.mini-workflow i{width:7cqw;height:7cqw;border-radius:1cqw;background:#e0e5d6}.mini-workflow i:last-child{background:#d9ff57}.more-plus{position:absolute;z-index:2;top:31%;left:32%;display:flex;align-items:center;justify-content:center;width:24cqw;height:24cqw;background:#d9ff57;border-radius:50%;font-size:15cqw!important;font-weight:500;box-shadow:0 2cqw 4cqw #23251c12}
:root[data-theme=night] .deliverable-art{background:#292e2b;border-bottom-color:#424940}
:root[data-theme=night] .preview-slide,:root[data-theme=night] .preview-browser,:root[data-theme=night] .preview-dashboard,:root[data-theme=night] .preview-app,:root[data-theme=night] .preview-strategy,:root[data-theme=night] .mini-brand,:root[data-theme=night] .mini-outreach,:root[data-theme=night] .mini-workflow{box-shadow:0 3cqw 6cqw #0003}
@media(max-width:1000px){.deliverable-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.deliverable-caption{padding:21px}.deliverable-caption h3{font-size:22px}.deliverable-footnote{display:block}.deliverable-footnote p{max-width:none}.deliverable-footnote p:last-child{text-align:left;margin-top:7px}}
/* A native swipe gallery on phones; larger screens keep the existing grid. */
.deliverable-gallery-guide{display:none}
.gallery-keyboard-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){
  .deliverable-grid{grid-template-columns:none;grid-template-rows:auto;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;width:calc(100% + 40px);margin-inline:-20px;padding:8px 20px 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .deliverable-grid::-webkit-scrollbar{display:none}
  .deliverable-grid:focus-visible{outline-offset:-4px;border-radius:8px}
  .deliverable-card{scroll-snap-align:start;scroll-margin-inline:0}
  .deliverable-card:hover{transform:none}
  .deliverable-art{aspect-ratio:1.45}
  .deliverable-caption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:21px}
  .deliverable-caption h3{font-size:21px;max-width:none}
  .deliverable-caption>span{margin:0;font-size:14px}
  .deliverable-gallery-guide{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.5}
  #deliverable-position{font-variant-numeric:tabular-nums;letter-spacing:.08em}
  .deliverable-footnote{margin-top:24px}
  .deliverable-footnote p{font-size:14px;line-height:1.6}
  .outputs-heading>p{margin-top:20px}
  .outputs-heading>p br{display:none}
}
@media(max-width:360px){.deliverable-caption{padding:18px}.deliverable-caption h3{font-size:19px}}
/* Keep miniature app content inside the preview at every card width. */
.preview-app{padding:3cqw}.mini-app-top{margin-bottom:3cqw}.preview-app>strong{font-size:3.7cqw}.preview-app>p{font-size:1.9cqw;margin-top:1.5cqw}.mini-app-focus{padding:2cqw;margin-top:2cqw}.mini-app-focus b{font-size:3cqw;margin-top:1.5cqw}.mini-app-row{padding:1.5cqw 0;font-size:1.7cqw}.mini-app-check{width:8cqw;height:8cqw;font-size:4cqw;margin:0 0 3cqw}.app-second>.mini-line{margin-top:3cqw}.app-second>.mini-line.short{margin-top:0}
/* Scale the entire miniature interface, including anonymous line boxes. */
.deliverable-art>div{font-size:2.4cqw;line-height:1.35}
.preview-slide>span,.mini-plan-heading>span,.mini-plan-flow>div>span{display:block}
.preview-browser{top:8%;height:84%}.mini-site-footer{display:none}
.preview-dashboard{top:8%;height:84%}.mini-dashboard-main{padding:3cqw}.mini-dashboard-heading{margin-bottom:2cqw}.mini-kpis{margin-bottom:2cqw}.mini-kpis div{padding:1.5cqw}.mini-chart svg{height:14cqw}.mini-dashboard-bottom{height:8cqw}.mini-donut{width:8cqw}
.preview-strategy{top:9%;height:82%;padding:4cqw}