/* Real SWiiFT campaign UI, for phone mock-ups on tool pages.
   Sizes are in cqw, so use inside a .screen (container-type:inline-size).
   Brand colours: set these on any ancestor (e.g. the brand's profile wrapper):
   --sw-card (card bg) --sw-card-t (card text) --sw-btn (button bg) --sw-btn-t (button text)
   --sw-sheet (sheet bg) --sw-sheet-t (sheet text) --sw-done (claimed button bg) --sw-done-t */

/* ---- Campaign card (profile Offers list) ---- */
.swc{border-radius:5cqw;overflow:hidden;background:var(--sw-card,#000);color:var(--sw-card-t,#fff);font-family:'Poppins',system-ui,sans-serif;text-align:left}
.swc-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#222 center/cover}
.swc-b{display:flex;flex-direction:column;padding:4.4cqw 4.6cqw 4.6cqw}
.swc-t{margin:0;font-size:4.9cqw;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.swc-d{margin:2cqw 0 0;font-size:3.3cqw;line-height:1.4;opacity:.95}
.swc-btn{align-self:flex-end;margin-top:3.6cqw;padding:1.8cqw 3.6cqw;border-radius:1.6cqw;background:var(--sw-btn,#27A6E5);color:var(--sw-btn-t,#fff);font-size:4.6cqw;font-weight:500;line-height:1.1;transition:background .3s,color .3s}
.swc-btn.up{text-transform:uppercase}
.swc-btn.done{background:var(--sw-done,var(--sw-card-t,#fff));color:var(--sw-done-t,var(--sw-card,#000))}
.swc.sm .swc-img{aspect-ratio:16/9}
.swc.sm .swc-t{font-size:4.2cqw}
.swc.sm .swc-btn{font-size:3.8cqw}
.sw-h{margin:0 0 3cqw;font-family:'Poppins',system-ui,sans-serif;font-size:4.4cqw;font-weight:500;color:inherit}

/* ---- Campaign detail sheet (opens over the profile) ---- */
.sws{position:absolute;inset:12cqw 0 0;z-index:4;display:flex;flex-direction:column;background:var(--sw-sheet,#fff);color:var(--sw-sheet-t,#000);font-family:'Poppins',system-ui,sans-serif;text-align:left;border-radius:3cqw 3cqw 0 0;overflow:hidden}
.sws-bar{flex:none;display:flex;justify-content:flex-end;align-items:center;height:9cqw;padding:0 4cqw;border-bottom:.3cqw solid #eee;font-size:5.4cqw;line-height:1}
.sws-in{flex:1;overflow:hidden;padding:4cqw 4.6cqw 5cqw}
.sws-title{margin:0;text-align:center;font-size:4.4cqw;font-weight:600;line-height:1.25}
.sws-share{display:grid;place-items:center;width:7.6cqw;height:7.6cqw;margin:2.4cqw 0 2.4cqw auto;border-radius:1.6cqw;background:color-mix(in srgb,var(--sw-sheet-t,#000) 8%,transparent)}
.sws-share svg{width:3.8cqw;height:3.8cqw;fill:currentColor}
.sws-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2.4cqw;background:#eee center/cover}
.sws-h{margin:4cqw 0 0;font-size:4cqw;font-weight:700;line-height:1.3}
.sws-p{margin:2.4cqw 0 0;font-size:3cqw;line-height:1.5;color:inherit;opacity:.88}
.sws-btn{display:inline-block;margin-top:3.6cqw;padding:1.8cqw 3cqw;border-radius:1.4cqw;background:var(--sw-btn,#27A6E5);color:var(--sw-btn-t,#fff);font-size:4cqw;font-weight:700;line-height:1.1;transition:background .3s,color .3s}
.sws-btn.done{background:var(--sw-done,var(--sw-sheet-t,#111));color:var(--sw-done-t,var(--sw-sheet,#fff))}
.sws-prodk{margin:4cqw 0 2cqw;padding-top:3cqw;border-top:.3cqw solid #eee;font-size:3cqw;font-weight:600}
.sws-prod{display:flex;align-items:center;gap:3cqw;padding:3cqw;border:.3cqw solid #e3e3e3;border-radius:2.4cqw;font-size:2.8cqw;font-weight:600}
.sws-prod img,.sws-prod i{flex:none;width:10cqw;height:10cqw;border-radius:1.6cqw;object-fit:cover;background:#f3f3f3}
.sws-prod span{flex:1}
.sws-prod b{font-weight:600}
.sws-entry{margin-top:3.6cqw;padding:3.6cqw;border:.3cqw solid #e3e3e3;border-radius:2.4cqw}
.sws-entry>b{display:block;margin-bottom:2.6cqw;font-size:3.8cqw;font-weight:500}
.sws-up{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;min-height:27cqw;padding:3cqw;border:.3cqw solid #555;border-radius:2.4cqw;text-align:center;font-size:2.8cqw;font-weight:600}
.sws-up i{display:grid;place-items:center;width:9cqw;height:9cqw;margin-bottom:1cqw;border-radius:1.6cqw;background:#ececec}
.sws-up i svg{width:4.6cqw;height:4.6cqw;fill:none;stroke:#111;stroke-width:1.8}
.sws-up small{font-size:2.6cqw;font-weight:400;color:#777}
.sws-up em{position:absolute;left:3cqw;bottom:2.4cqw;font-style:normal;font-size:2.4cqw;font-weight:500}

/* ---- Brand wordmarks (imitation logos) ---- */
.wm-pacifico{font-family:'Pacifico',cursive!important;font-weight:400!important;letter-spacing:0!important}
.wm-playfair{font-family:'Playfair Display',Georgia,serif!important;font-style:italic;font-weight:700!important}
.wm-archivo{font-family:'Archivo Black',system-ui,sans-serif!important;font-weight:400!important;letter-spacing:-.01em!important;text-transform:uppercase}
.wm-cinzel{font-family:'Cinzel',Georgia,serif!important;font-weight:700!important;letter-spacing:.04em!important}
.wm-righteous{font-family:'Righteous',system-ui,sans-serif!important;font-weight:400!important}
.wm-bebas{font-family:'Bebas Neue',Impact,sans-serif!important;font-weight:400!important;letter-spacing:.04em!important;font-size:1.25em}
.wm-marker{font-family:'Permanent Marker',cursive!important;font-weight:400!important}
.wm-abril{font-family:'Abril Fatface',Georgia,serif!important;font-weight:400!important;letter-spacing:.01em!important}
.wm-caveat{font-family:'Caveat Brush',cursive!important;font-weight:400!important;font-size:1.25em}
.wm-fraunces{font-family:'Fraunces',Georgia,serif!important;font-weight:700!important;letter-spacing:-.02em!important}
.wm-dmserif{font-family:'DM Serif Display',Georgia,serif!important;font-weight:400!important}
.wm-space{font-family:'Space Grotesk',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.03em!important}