/* v2-democard.css — the single "Try our demo product" card (desktop + phone). Markup: pfDemoCard() in v2-prodflow.js */
html body .pfTry.pfTryCard{display:block!important;width:100%;max-width:520px;box-sizing:border-box;margin:0;padding:0!important;border:1px solid rgba(229,168,46,.4)!important;background:linear-gradient(135deg,rgba(229,168,46,.12),rgba(229,168,46,.03) 60%),#191714!important;border-radius:8px!important;overflow:hidden;box-shadow:0 0 0 1px rgba(229,168,46,.08),0 10px 24px rgba(0,0,0,.35);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
html body .pfTry.pfTryCard:hover{border-color:rgba(229,168,46,.7)!important;box-shadow:0 0 0 1px rgba(229,168,46,.18),0 12px 28px rgba(0,0,0,.4)}
html body .pfTry.pfTryCard:hover .pfTryGo{filter:brightness(1.06)}
html body .pfTry.pfTryCard:active{transform:scale(.99)}
html body .pfTry.pfTryCard:focus-visible{outline:2px solid #E5A82E;outline-offset:2px}
.pfTryCard .pfTryM{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;width:100%;padding:12px;box-sizing:border-box}
.pfTryFan{position:relative;flex:0 0 84px;height:64px}
.pfTryFan img{position:absolute;top:6px;width:46px;height:52px;object-fit:contain;padding:4px;box-sizing:border-box;border-radius:8px;background:radial-gradient(120% 90% at 50% 40%,#3a342c,#201d19);border:1px solid rgba(245,244,240,.14);box-shadow:0 6px 14px rgba(0,0,0,.45)}
.pfTryFan img:nth-child(1){left:0;transform:rotate(-10deg)}.pfTryFan img:nth-child(2){left:19px;top:2px;z-index:2;transform:rotate(1deg)}.pfTryFan img:nth-child(3){left:38px;transform:rotate(11deg)}
.pfTryTx{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;gap:3px}
.pfTryTx b{font-size:16px;font-weight:700;color:var(--tp,#F5F4F0)}.pfTryTx small{font-size:13px;line-height:1.35;color:var(--ts,#B8B2A7)}
.pfTryGo{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:8px;background:linear-gradient(180deg,#F0BE4E,#D99A22);color:#1b1710;font:700 14px Inter,sans-serif;box-shadow:0 0 14px rgba(229,168,46,.3);white-space:nowrap}
.pfFt .pfTry.pfTryCard{flex:1 1 auto;max-width:440px}
.pfFt .pfTryCard .pfTryM{padding:10px 12px}
.pfFt .pfTryFan{flex-basis:70px;height:54px}.pfFt .pfTryFan img{width:40px;height:46px}
/* card grid (.pfBd): the body has a fixed flex height (~65px left for us), so the card must be ONE short row:
   fan + gold pill, no copy (the pill says it all). Never let a column-flex parent squeeze it. */
html body .pfTry.pfTryCard{flex:none!important}
.pfBd .pfTryCard .pfTryM{flex-wrap:nowrap;gap:10px;padding:8px 10px}
.pfBd .pfTryTx{display:flex;flex:0 0 auto;min-width:0}.pfBd .pfTryTx small{display:none}.pfBd .pfTryTx b{font-size:14px;white-space:nowrap}
.pfBd .pfTryFan{flex:0 0 52px;height:44px}.pfBd .pfTryFan img{width:30px;height:36px;top:4px}.pfBd .pfTryFan img:nth-child(2){left:11px;top:1px}.pfBd .pfTryFan img:nth-child(3){left:22px}
.pfBd .pfTryGo{flex:1 1 auto;justify-content:center;min-height:36px;padding:0 10px}
.pfTryFan{display:none!important}
/* card grid: stack "No photo?" over a full-width pill (row needs ~254px, card is ~216px) */
.pfBd .pfTryCard .pfTryM{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;padding:8px 10px}
.pfBd .pfTryGo{flex:none;width:100%;box-sizing:border-box;justify-content:center;min-height:36px}
/* everywhere: the pill never overflows its card */
.pfTryCard .pfTryM{min-width:0}.pfTryGo{max-width:100%}
/* v6 middle ground (user): one slim row everywhere, like the original link but as a soft gold pill:
   "No photo?  Try our demo product →". Separate title text hidden. */
html body .pfTry.pfTryCard{background:rgba(229,168,46,.07)!important;border-color:rgba(229,168,46,.45)!important;box-shadow:none;max-width:none;overflow:visible}
html body .pfTry.pfTryCard:hover{background:rgba(229,168,46,.13)!important;border-color:#E5A82E!important;box-shadow:none}
html body .pfTryCard .pfTryTx{display:none!important}
html body .pfTryCard .pfTryM,html body .pfBd .pfTryCard .pfTryM{display:flex;flex-direction:row;padding:0!important;gap:0}
html body .pfTryCard .pfTryGo,html body .pfBd .pfTryCard .pfTryGo{flex:1 1 auto;width:100%;justify-content:center;flex-wrap:wrap;gap:4px 6px;min-height:42px;padding:8px 12px;background:none;box-shadow:none;color:var(--tp,#F5F4F0);font:500 14px/1.3 Inter,sans-serif;white-space:normal;text-align:center;border-radius:8px}
.pfTryGo i{font-style:normal;color:var(--ts,#B8B2A7)}
.pfTryGo u{text-decoration:none;font-weight:700;color:#E5A82E}
.pfTryGo svg{color:#E5A82E;flex:none}
html body .pfTry.pfTryCard:hover .pfTryGo{filter:none}html body .pfTry.pfTryCard:hover .pfTryGo u{text-decoration:underline;text-underline-offset:3px}