/* Products page: its own layout. A bento of seven cards, each with a small CSS-drawn picture of what the tool does. */
.pd{padding:calc(var(--nav-clear,104px) + clamp(24px,4vw,64px)) var(--m) clamp(80px,9vw,140px);--r-c:22px}
.pd-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;margin-bottom:clamp(36px,5vw,72px)}
.pd-h1{margin:0;font-size:clamp(36px,6vw,96px);line-height:.95}
.pd-h1 span{color:var(--mute)}
.pd-side{display:grid;gap:18px;justify-items:start;max-width:34ch;padding-bottom:.6em}
.pd-count{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--signal)}
.pd-intro{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--mute)}

.pd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g,12px)}
.pd-card{position:relative;display:flex;flex-direction:column;min-height:clamp(380px,34vw,500px);border-radius:var(--r-c);background:var(--glass-bg);box-shadow:inset 0 0 0 1px var(--glass-line);overflow:hidden;isolation:isolate;transition:transform var(--d-4) var(--ease-out),box-shadow var(--d-4) var(--ease-out);animation:pd-in .9s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms + 120ms)}
.pd-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--fg)}
.pd-a{grid-column:span 7}.pd-b{grid-column:span 5}
.pd-c,.pd-d,.pd-e{grid-column:span 4}
.pd-f,.pd-g{grid-column:span 6}
.pd-vis{position:relative;flex:1;display:grid;place-items:center;padding:clamp(20px,3vw,40px);min-height:200px}
.pd-meta{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px 14px;padding:clamp(28px,3.2vw,44px) clamp(20px,2.4vw,32px) clamp(24px,2.8vw,36px)}
.pd-n{font-size:11px;letter-spacing:.05em;color:var(--mute);padding-top:.7em}
.pd-name{margin:0;font-size:clamp(28px,3.2vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1}
.pd-tag{grid-column:2;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--signal)}
.pd-d-t{grid-column:2 / 4;margin:8px 0 0;max-width:44ch;font-size:15px;line-height:1.45;color:var(--mute)}
.pd-go{grid-column:3;grid-row:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:16px;transition:transform var(--d-4) var(--ease-out)}
.pd-card:hover .pd-go{transform:rotate(45deg)}

/* shared bits for the little pictures */
.pd-bar{display:block;height:8px;border-radius:99px;background:var(--line)}
.pd-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:99px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--glass-line);background:var(--bg);color:var(--fg)}
.pd-pill.on{background:var(--fg);color:var(--bg);box-shadow:none}
.pd-dot{width:8px;height:8px;border-radius:50%;background:var(--signal)}

/* DropHaus: swatches of gradients */
.pd-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,520px)}
.pd-sw{aspect-ratio:1;border-radius:16px;transition:transform var(--d-4) var(--ease-out)}
.pd-sw:nth-child(1){background:linear-gradient(135deg,#ff9a6e,#ff3d81)}
.pd-sw:nth-child(2){background:linear-gradient(160deg,#7b5cff,#2ad4ff)}
.pd-sw:nth-child(3){background:radial-gradient(circle at 30% 30%,#fff3b0,#ff8a3d 60%,#c4301c)}
.pd-sw:nth-child(4){background:linear-gradient(200deg,#1c1c22,#5a5a6a)}
.pd-sw:nth-child(5){background:linear-gradient(120deg,#9dfbc4,#1fb6a6)}
.pd-sw:nth-child(6){background:conic-gradient(from 200deg,#ff6ec4,#7873f5,#4adede,#ff6ec4)}
.pd-sw:nth-child(7){background:linear-gradient(180deg,#f3f3ef,#bfbfb6)}
.pd-sw:nth-child(8){background:linear-gradient(135deg,#ffd86e,#ff7a45)}
.pd-card:hover .pd-sw:nth-child(odd){transform:translateY(-6px) rotate(-3deg)}
.pd-card:hover .pd-sw:nth-child(even){transform:translateY(6px) rotate(3deg)}

/* UI Elysium: a snippet with copy actions */
.pd-code{width:min(100%,380px);display:grid;gap:14px;padding:18px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--glass-line)}
.pd-code .pd-bar:nth-child(1){width:46%;background:var(--signal)}
.pd-code .pd-bar:nth-child(2){width:78%}
.pd-code .pd-bar:nth-child(3){width:60%;margin-left:18px}
.pd-code .pd-bar:nth-child(4){width:70%;margin-left:18px}
.pd-code .pd-bar:nth-child(5){width:30%}
.pd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pd-card:hover .pd-code .pd-bar:nth-child(odd){animation:pd-pulse 1.4s ease-in-out infinite}

/* Matter: idea to production track */
.pd-track{position:relative;display:flex;justify-content:space-between;width:100%;max-width:300px}
.pd-track::before,.pd-track::after{content:"";position:absolute;left:7px;right:7px;top:7px;height:2px;border-radius:2px;background:var(--line)}
.pd-track::after{background:var(--signal);transform-origin:left;transform:scaleX(.18);transition:transform 1.1s var(--ease-out)}
.pd-card:hover .pd-track::after{transform:scaleX(1)}
.pd-step{position:relative;z-index:1;display:grid;gap:10px;justify-items:center;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pd-step i{width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);transition:background .3s,box-shadow .3s}
.pd-step:first-child i{background:var(--signal);box-shadow:none}
.pd-card:hover .pd-step i{background:var(--signal);box-shadow:none}
.pd-card:hover .pd-step:nth-child(2) i{transition-delay:.25s}.pd-card:hover .pd-step:nth-child(3) i{transition-delay:.55s}.pd-card:hover .pd-step:nth-child(4) i{transition-delay:.85s}

/* Dris: private analytics, blurred bars and a lock */
.pd-chart{position:relative;display:flex;align-items:flex-end;gap:10px;width:min(100%,240px);height:130px}
.pd-chart>span:not(.pd-lock){flex:1;border-radius:8px 8px 3px 3px;background:var(--fg);filter:blur(5px);opacity:.55;transition:filter var(--d-4) var(--ease-out),height var(--d-4) var(--ease-out)}
.pd-chart span:nth-child(1){height:40%}.pd-chart span:nth-child(2){height:70%}.pd-chart span:nth-child(3){height:55%}.pd-chart span:nth-child(4){height:92%}.pd-chart span:nth-child(5){height:66%}
.pd-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.pd-card:hover .pd-chart>span:not(.pd-lock){filter:blur(0);opacity:.9}

/* Echo: ripples and what people say */
.pd-echo{position:relative;display:grid;place-items:center;width:200px;height:170px}
.pd-echo i{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1px var(--mute);width:40px;height:40px;opacity:0;animation:pd-ring 3.2s ease-out infinite}
.pd-echo i:nth-child(2){animation-delay:1.05s}.pd-echo i:nth-child(3){animation-delay:2.1s}
.pd-echo b{position:relative;width:14px;height:14px;border-radius:50%;background:var(--signal)}
.pd-echo .pd-pill{position:absolute;height:26px;padding:0 10px;font-size:10px}
.pd-echo .pd-pill:nth-of-type(1){left:-26px;top:10px}.pd-echo .pd-pill:nth-of-type(2){right:-30px;bottom:6px}

/* Quarry: live leads you can call */
.pd-leads{width:min(100%,340px);display:grid;gap:8px}
.pd-lead{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--glass-line)}
.pd-lead .pd-bar{flex:1}.pd-lead:nth-child(2) .pd-bar{max-width:70%}.pd-lead:nth-child(3) .pd-bar{max-width:50%}
.pd-av{width:28px;height:28px;border-radius:50%;background:var(--line);flex:none}
.pd-call{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:13px;flex:none}
.pd-lead:first-child{box-shadow:inset 0 0 0 1px var(--signal)}
.pd-lead:first-child .pd-call{background:var(--signal);color:#fff;animation:pd-pulse 1.6s ease-in-out infinite}

/* Firstline: outreach composer */
.pd-mail{width:min(100%,380px);display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--glass-line)}
.pd-to{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pd-to .pd-pill{height:24px;padding:0 10px;font-size:10px}
.pd-mail .pd-bar:nth-of-type(1){width:90%}.pd-mail .pd-bar:nth-of-type(2){width:72%}.pd-mail .pd-bar:nth-of-type(3){width:40%}
.pd-send{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.pd-card:hover .pd-send .pd-pill.on{transform:translateX(4px)}
.pd-send .pd-pill{transition:transform var(--d-4) var(--ease-out)}

.pd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(28px,4vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.pd-foot p{margin:0;font-size:15px;color:var(--mute)}
.pd-btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:15px;font-weight:500}
.pd-btn i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--signal);color:#fff;font-style:normal;transition:transform var(--d-4) var(--ease-out)}
.pd-btn:hover i{transform:rotate(45deg)}

@keyframes pd-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pd-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
@keyframes pd-pulse{50%{opacity:.45}}
@media (width<=1100px){.pd-a,.pd-b,.pd-f,.pd-g{grid-column:span 6}.pd-c,.pd-d,.pd-e{grid-column:span 6}.pd-g{grid-column:span 12}}
@media (width<=700px){.pd-hero{grid-template-columns:1fr}.pd-grid>*{grid-column:1 / -1!important}.pd-card{min-height:360px}}
@media (prefers-reduced-motion:reduce){.pd-card{animation:none}.pd-echo i,.pd-lead:first-child .pd-call,.pd-card:hover .pd-code .pd-bar{animation:none}.pd-card,.pd-sw,.pd-track::after{transition:none}}

/* DropHaus and UI Elysium: the product's own recording fills the picture area */
.pd-vid{padding:10px 10px 0;min-height:0}
.pd-vid video{display:block;width:100%;height:100%;min-height:200px;object-fit:cover;object-position:center;border-radius:calc(var(--r-c) - 8px);background:#0d0d0d}
.pd-a .pd-vid video{aspect-ratio:16/9;height:auto}
.pd-vid{place-items:stretch}

/* Not live yet: no link, a "Soon" tag where the arrow would be */
.pd-soon:hover{transform:none;box-shadow:inset 0 0 0 1px var(--glass-line)}
.pd-soon-t{grid-column:3;grid-row:1;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:99px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);box-shadow:inset 0 0 0 1px var(--glass-line)}