/* Daydream /products/ page (.ds) — layered on dd.css (nav, footer, buttons, blobs, reveals, card gradients) */
.ds{background:#fff}
.dd-nav__links a.is-active{font-weight:700}
.dd-nav__links a.is-active::after{transform:scaleX(1);background:#fff;height:1.5px}

/* ---------------- HERO ---------------- */
.ds-hero{position:relative;overflow:clip;isolation:isolate;background:var(--night);color:#fff;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(max(130px,calc(200*var(--u))) + var(--wp-admin--admin-bar--height,0px)) var(--gx) max(72px,calc(110*var(--u)))}
.ds-hero .dd-stage{height:100%;z-index:1}
.ds-hero > .dd-eyebrow{position:relative;z-index:2;color:rgba(255,255,255,.6);animation:dd-fadeup 1s var(--ease) .1s both}
.ds-title{position:relative;z-index:2;margin-top:calc(26*var(--u));font:900 max(46px,calc(140*var(--u)))/1.02 var(--fd);letter-spacing:-.05em}
.ds-title .dd-wi{animation:dd-rise 1.1s var(--ease) both;animation-delay:calc(.15s + var(--i)*.1s)}
.ds-title em{font-style:normal}
.ds-title em .dd-wi{color:transparent;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan),var(--pink)) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:dd-rise 1.1s var(--ease) both,ds-shimmer 8s linear infinite;animation-delay:calc(.15s + var(--i)*.1s),0s}
@keyframes ds-shimmer{to{background-position:150% 0}}
.ds-lede{position:relative;z-index:2;margin-top:calc(30*var(--u));width:640px;max-width:100%;font-size:max(17px,calc(20*var(--u)));line-height:1.6;color:rgba(255,255,255,.8);
  animation:dd-fadeup 1s var(--ease) .55s both}

/* pouch line-up: each one jumps to its row */
.ds-strip{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;width:100%;max-width:1400px;margin-top:max(8px,calc(20*var(--u)))}
.ds-strip::before{content:"";position:absolute;left:20%;right:20%;top:15%;bottom:5%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,46,147,.45),rgba(123,77,255,.25) 55%,transparent);filter:blur(20px);animation:ds-halo 6s ease-in-out infinite}
@keyframes ds-halo{50%{transform:scale(1.12);opacity:.7}}
.ds-strip a{--d:12;position:relative;flex:0 1 21%;aspect-ratio:1;margin-inline:-3%;display:block;
  transform:translate3d(calc(var(--mx,0)*var(--d)*1px),calc(var(--my,0)*var(--d)*1px),0);transition:transform .3s linear}
.ds-strip a:nth-child(2),.ds-strip a:nth-child(4){--d:18;z-index:1}
.ds-strip a:nth-child(3){--d:26;flex-basis:29%;z-index:2}
.ds-strip a:focus-visible{outline:none}
.ds-strip__in{display:block;width:100%;height:100%;animation:ds-drop 1.4s var(--spring) both;animation-delay:calc(.35s + var(--i)*.09s)}
.ds-strip__float{display:block;width:100%;height:100%;animation:dd-bob var(--bt,6s) ease-in-out infinite alternate;animation-delay:var(--bd,0s)}
.ds-strip img{width:100%;height:100%;object-fit:cover;rotate:var(--r);filter:drop-shadow(0 calc(26*var(--u)) calc(26*var(--u)) rgba(0,0,0,.4));
  transition:rotate .8s var(--spring),scale .8s var(--spring),filter .5s var(--ease)}
.ds-strip a:hover img,.ds-strip a:focus-visible img{rotate:0deg;scale:1.1}
.ds-strip:hover a:not(:hover) img{filter:drop-shadow(0 calc(26*var(--u)) calc(26*var(--u)) rgba(0,0,0,.4)) brightness(.55) saturate(.7)}
.ds-strip b{position:absolute;left:50%;bottom:12%;translate:-50% 12px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:700 13px/1 var(--fb);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),translate .5s var(--spring)}
.ds-strip a:hover b,.ds-strip a:focus-visible b{opacity:1;translate:-50% 0}
@keyframes ds-drop{from{opacity:0;transform:translateY(45%) rotate(calc(var(--r)*-2.5)) scale(.6)}45%{opacity:1}to{opacity:1;transform:none}}
.ds-cue{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;margin-top:max(8px,calc(16*var(--u)));font:500 12px/1 var(--fd);letter-spacing:.16em;color:rgba(255,255,255,.6);
  transition:color .3s;animation:dd-fadeup 1s var(--ease) 1.3s both}
.ds-cue:hover{color:#fff}
.ds-cue i{font-style:normal;display:inline-block;animation:ds-nudge 1.6s ease-in-out infinite}
@keyframes ds-nudge{50%{transform:translateY(5px)}}

/* ---------------- MARQUEE ---------------- */
.ds-marquee{position:relative;z-index:5;width:110%;margin:-30px 0 0 -5%;rotate:-2deg;overflow:hidden;padding:18px 0;
  background:linear-gradient(90deg,var(--pink),var(--purple) 45%,var(--cyan));box-shadow:0 24px 48px -24px rgba(123,77,255,.7)}
.ds-marquee__track{display:flex;width:max-content;animation:ds-marq 40s linear infinite}
.ds-marquee span{display:flex;align-items:center;font:900 max(22px,calc(34*var(--u)))/1 var(--fd);letter-spacing:-.01em;color:#fff;white-space:nowrap;text-transform:uppercase}
.ds-marquee i{font-style:normal;color:var(--yellow);padding-inline:.7em;font-size:.8em;display:inline-block;animation:dd-spin 6s linear infinite}
@keyframes ds-marq{to{transform:translateX(-50%)}}

/* ---------------- STICKY FILTER BAR ---------------- */
.ds-bar{position:sticky;z-index:40;top:calc(var(--navh,74px) + var(--wp-admin--admin-bar--height,0px));margin-top:max(40px,calc(64*var(--u)));
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px var(--gx);
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(14,14,16,.08);
  transition:box-shadow .4s var(--ease)}
.ds-bar.is-stuck{box-shadow:0 12px 30px -18px rgba(14,14,16,.35)}
.ds-chips{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(14,14,16,.06);min-width:0;overflow-x:auto;scrollbar-width:none}
.ds-chips::-webkit-scrollbar{display:none}
.ds-chip{position:relative;z-index:1;padding:10px 18px;border-radius:999px;font:700 14px/1 var(--fb);color:var(--body);white-space:nowrap;transition:color .35s var(--ease)}
.ds-chip small{font:500 10px/1 var(--fd);letter-spacing:.08em;margin-left:6px;opacity:.6}
.ds-chip:hover{color:var(--ink)}
.ds-chip.is-on{color:#fff}
.ds-chips__pill{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:var(--pw,0);transform:translateX(var(--px,0));border-radius:999px;
  background:linear-gradient(120deg,var(--ink),#2a2540);transition:transform .55s var(--spring),width .55s var(--spring)}
.ds-bar__r{display:flex;align-items:center;gap:28px;flex:none}
.ds-dots{display:flex;gap:10px}
.ds-dots a{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 0 0 0 rgba(14,14,16,.2);
  transition:transform .5s var(--spring),box-shadow .4s var(--ease),opacity .3s}
.ds-dots a:hover{transform:scale(1.35)}
.ds-dots a.is-on{transform:scale(1.45);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--g2)}
.ds-dots a.is-off{opacity:.2;pointer-events:none}
.ds-count{font:500 12px/1 var(--fd);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.ds-count b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------------- LIST ---------------- */
.ds-list{padding:max(64px,calc(120*var(--u))) var(--gx) max(96px,calc(170*var(--u)));display:flex;flex-direction:column;gap:max(80px,calc(150*var(--u)))}
.ds-list > [data-cat]{transition:opacity .38s var(--ease),transform .38s var(--ease)}
.ds-list > .is-out{opacity:0;transform:translateY(28px) scale(.985)}
/* the rows set display:grid/flex, which would beat the UA [hidden] rule — filtered-out items must really leave the flow */
.ds-list > [hidden]{display:none!important}
.ds-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(14,14,16,.12)}
.ds-head + .ds-row{margin-top:calc(max(80px,calc(150*var(--u))) * -.35)}
.ds-head__l{display:flex;flex-direction:column;gap:18px;min-width:0}
.ds-head h2{font:900 max(40px,calc(96*var(--u)))/.95 var(--fd);letter-spacing:-.045em;color:var(--ink)}
.ds-head .ds-head__n{display:inline-block;margin-left:.35em;font:500 max(16px,calc(22*var(--u)))/1 var(--fd);letter-spacing:0;color:var(--muted);vertical-align:top}
.ds-head .dd-lede{width:460px;max-width:100%}

.ds-row{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:max(40px,calc(110*var(--u)));
  scroll-margin-top:calc(var(--navh,74px) + 110px)}
.ds-row--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.ds-row--flip .ds-vis{order:2}

/* the big gradient panel (colours come from dd.css .dd-card--* vars) */
.ds-panel{--rad:clamp(28px,3.4vw,48px);--k:calc(100cqw/600);position:relative;display:block;aspect-ratio:1;container-type:inline-size;border-radius:var(--rad);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 45% at 88% 92%,var(--glow),transparent),radial-gradient(55% 40% at 25% 18%,rgba(255,255,255,.35),transparent),linear-gradient(135deg,var(--g1),var(--g2));
  transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),box-shadow .7s var(--ease),clip-path 1.3s var(--ease),opacity .8s var(--ease)}
.ds-panel.is-tilt{transition:transform .15s linear,box-shadow .7s var(--ease),clip-path 1.3s var(--ease),opacity .8s var(--ease)}
.ds-panel:hover{box-shadow:0 50px 100px -40px var(--g2)}
.ds-panel::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:soft-light;
  background:radial-gradient(40% 30% at var(--gx2,50%) var(--gy2,30%),rgba(255,255,255,.4),transparent 70%)}
.ds-panel:hover::after{opacity:1}
.ds-num{position:absolute;z-index:0;left:4%;bottom:-8%;font:900 calc(330*var(--k))/1 var(--fd);letter-spacing:0;color:rgba(255,255,255,.16);
  transition:transform 1.2s var(--ease)}
.ds-panel:hover .ds-num{transform:translateX(3%)}
.ds-ring{position:absolute;z-index:0;left:50%;top:50%;width:80%;aspect-ratio:1;translate:-50% -50%}
.ds-ring img{width:100%;height:100%;animation:dd-spin 90s linear infinite}
.ds-panel:hover .ds-ring img{animation-duration:30s}
.ds-badge{position:absolute;z-index:3;right:6%;top:6%;width:max(84px,calc(126*var(--k)));aspect-ratio:1;animation:dd-spin 16s linear infinite}
.ds-pack{position:absolute;z-index:2;left:50%;top:52%;width:96%;aspect-ratio:1;translate:-50% -50%;
  transform:translate3d(calc(var(--px,0)*18px),calc(var(--py,0)*18px + var(--sp,0)*1px),0);transition:transform .5s var(--ease)}
.ds-pack__in,.ds-pack__float{display:block;width:100%;height:100%}
.ds-pack__float{animation:dd-bob 6.5s ease-in-out infinite alternate}
.ds-row:nth-of-type(2n) .ds-pack__float{animation-delay:-3s}
.ds-pack img{width:100%;height:100%;object-fit:cover;rotate:var(--r);filter:drop-shadow(0 30px 40px rgba(0,0,0,.3));transition:rotate .9s var(--spring),scale .9s var(--spring)}
.ds-panel:hover .ds-pack img{rotate:calc(var(--r)*-.4);scale:1.05}
.ds-pill{position:absolute;z-index:3;left:6%;top:7%;color:#fff}

/* copy column */
.ds-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.ds-copy > .dd-eyebrow{display:flex;align-items:center;gap:10px}
.ds-copy > .dd-eyebrow i{width:10px;height:10px;border-radius:50%;background:rgb(var(--acc-rgb));box-shadow:0 0 0 4px rgba(var(--acc-rgb),.2)}
.ds-name{font:900 max(44px,calc(92*var(--u)))/.95 var(--fd);letter-spacing:-.045em;color:var(--ink)}
.ds-tag{font:700 max(19px,calc(26*var(--u)))/1.3 var(--fd);letter-spacing:-.015em;color:var(--ink)}
.ds-tag mark{color:inherit;padding-inline:.1em;background:linear-gradient(transparent 56%,rgba(var(--acc-rgb),.45) 56%) 0 0/100% 100% no-repeat}
.dd-js .ds-tag mark{background-size:0% 100%;transition:background-size 1.1s var(--ease) .6s}
.dd-js .ds-row.is-in .ds-tag mark{background-size:100% 100%}
.ds-para{max-width:580px;font-size:max(17px,calc(19*var(--u)));line-height:1.65;color:var(--body)}
.ds-notes{display:flex;flex-wrap:wrap;gap:8px}
.ds-note{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.4);
  font:700 14px/1 var(--fb);color:var(--ink);transition:translate .4s var(--spring),background .3s}
.ds-note:hover{translate:0 -3px;background:rgba(var(--acc-rgb),.25)}
.ds-note img{width:24px;height:24px}
.ds-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:580px;margin:0;border-top:1px solid rgba(14,14,16,.12)}
.ds-facts div{padding:16px 16px 16px 0;border-bottom:1px solid rgba(14,14,16,.12);min-width:0}
.ds-facts div:nth-child(2n){padding:16px 0 16px 20px;border-left:1px solid rgba(14,14,16,.12)}
.ds-facts dt{font-size:13px;color:var(--muted)}
.ds-facts dd{margin:6px 0 0;font:700 max(16px,calc(19*var(--u)))/1.3 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.ds-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.ds .dd-btn--ink{--bg:var(--ink);--fg:#fff;--fill:rgb(var(--acc-rgb))}
.ds .dd-btn--ink:hover,.ds .dd-btn--ink:focus-visible{color:var(--ink)}
.ds .dd-btn--line{--bg:transparent;--fg:var(--ink);--fill:var(--ink);border:1.5px solid rgba(14,14,16,.22)}
.ds .dd-btn--line:hover,.ds .dd-btn--line:focus-visible{color:#fff;border-color:var(--ink)}

/* reveal: panel opens from its centre, pouch drops in, then the copy staggers (dd-rv) */
.dd-js .ds-row .ds-panel{clip-path:inset(14% round var(--rad));opacity:0}
.dd-js .ds-row.is-in .ds-panel{clip-path:inset(0 round var(--rad));opacity:1}
.dd-js .ds-row .ds-pack__in{opacity:0;transform:translateY(28%) rotate(-16deg) scale(.7);transition:opacity .8s var(--ease) .3s,transform 1.5s var(--spring) .3s}
.dd-js .ds-row.is-in .ds-pack__in{opacity:1;transform:none}
.dd-js .ds-row .ds-num{opacity:0;translate:-12% 0;transition:opacity 1s var(--ease) .5s,translate 1.4s var(--ease) .5s,transform 1.2s var(--ease)}
.dd-js .ds-row.is-in .ds-num{opacity:1;translate:0 0}

/* coming-soon strip */
.dd .ds-soon{position:relative;display:flex;align-items:center;gap:max(20px,calc(40*var(--u)));padding:max(28px,calc(48*var(--u))) max(24px,calc(56*var(--u)));border-radius:clamp(28px,3.4vw,44px);
  overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(60% 90% at 95% 90%,rgba(123,77,255,.65),transparent),radial-gradient(50% 90% at 10% 10%,rgba(201,236,74,.4),transparent),var(--night);
  transition:opacity .38s var(--ease),transform .38s var(--ease),translate .6s var(--ease),box-shadow .6s var(--ease)}
.ds-soon:hover{translate:0 -6px;box-shadow:0 40px 80px -36px #7b4dff}
.ds-soon__cloud{flex:none;width:max(90px,calc(150*var(--u)));aspect-ratio:768/606;animation:dd-cloudfloat 4.5s ease-in-out infinite alternate}
.ds-soon__cloud img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--spring)}
.ds-soon:hover .ds-soon__cloud img{transform:rotate(-10deg) scale(1.12)}
.ds-soon__txt{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ds-soon__txt .dd-eyebrow{color:var(--lav)}
.ds-soon__txt b{font:900 max(28px,calc(48*var(--u)))/1 var(--fd);letter-spacing:-.03em}
.ds-soon__txt > span:last-child{font-size:max(15px,calc(17*var(--u)));color:var(--mist)}
.ds-soon .dd-view{flex:none}
.ds-soon:hover .dd-view{gap:16px;padding-left:22px}
.ds-soon:hover .dd-view i{transform:rotate(-45deg);background:var(--purple)}

/* ---------------- AT A GLANCE ---------------- */
.ds-glance{position:relative;isolation:isolate;overflow:clip;background:var(--night);color:#fff;padding:max(96px,calc(180*var(--u))) var(--gx);
  display:flex;flex-direction:column;gap:max(48px,calc(72*var(--u)))}
.ds-glance .dd-eyebrow{color:var(--lav)}
.ds-glance .dd-h2{color:#fff;margin-top:24px}
.ds-glance__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.ds-glance__head > p{width:420px;max-width:100%;font-size:18px;line-height:1.6;color:var(--mist)}
.ds-table{width:100%;border-collapse:collapse;font-size:16px}
.ds-table th{padding:0 16px 18px 0;text-align:left;font:500 12px/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--lav);border-bottom:1px solid rgba(255,255,255,.18)}
.ds-table td{padding:26px 16px 26px 0;border-bottom:1px solid rgba(255,255,255,.12);color:var(--mist);vertical-align:middle}
.ds-table tbody tr{position:relative;background:linear-gradient(90deg,rgba(var(--acc-rgb),.22),transparent 75%) 0 0/0% 100% no-repeat;transition:background-size .6s var(--ease)}
.ds-table tbody tr:hover{background-size:100% 100%}
.ds-table td:first-child{padding-left:14px}
.ds-table td:first-child a{display:inline-flex;align-items:center;gap:14px;font:900 max(20px,calc(26*var(--u)))/1.1 var(--fd);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.ds-table td:first-child a::after{content:"";position:absolute;inset:0}
.ds-table td:first-child i{flex:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));transition:transform .5s var(--spring)}
.ds-table tr:hover td:first-child i{transform:scale(1.5)}
.ds-table td:nth-child(3),.ds-table td:nth-child(4){font:700 17px/1 var(--fd);color:#fff;white-space:nowrap}
.dd-js .ds-table tbody tr{opacity:0;translate:-30px 0;transition:opacity .7s var(--ease),translate .9s var(--ease),background-size .6s var(--ease);transition-delay:calc(var(--i)*.1s),calc(var(--i)*.1s),0s}
.dd-js .ds-table.is-in tbody tr{opacity:1;translate:0 0}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1100px){
  .ds-dots{display:none}
  .ds-table th:nth-child(6),.ds-table td:nth-child(6){display:none}
}
@media (max-width:900px){
  .ds-hero{padding-top:calc(120px + var(--wp-admin--admin-bar--height,0px))}
  /* dd.css turns .dd-stage into an in-flow block with negative margins on phones (home hero); keep this one as a backdrop */
  .ds-hero .dd-stage{position:absolute;margin:0;top:0;height:100%}
  .ds-strip{margin-top:18px}
  .ds-strip a{flex-basis:27%;margin-inline:-5%}
  .ds-strip a:nth-child(3){flex-basis:40%}
  .ds-strip b{display:none}
  .ds-marquee{margin-top:-18px;padding:12px 0}
  .ds-bar{padding-block:10px}
  .ds-chip{padding:10px 14px;font-size:13px}
  .ds-count{display:none}
  .ds-head,.ds-glance__head{flex-direction:column;align-items:flex-start}
  .ds-head + .ds-row{margin-top:-24px}
  .ds-row,.ds-row--flip{grid-template-columns:1fr;gap:32px}
  .ds-row--flip .ds-vis{order:0}
  .ds-table thead{display:none}
  .ds-table,.ds-table tbody,.ds-table tr,.ds-table td{display:block}
  .ds-table tbody tr{padding:18px 14px;border-bottom:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .ds-table td{padding:0;border:0}
  .ds-table td:first-child{grid-column:1/-1;padding-left:0}
  .ds-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:6px;font:500 11px/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
  .ds-table th:nth-child(6),.ds-table td:nth-child(6){display:block}
  .ds-table td:nth-child(5),.ds-table td:nth-child(6){grid-column:1/-1}
}
@media (max-width:560px){
  .ds-hero > .dd-eyebrow{white-space:normal;line-height:1.6}
  .ds-chips{flex:1}
  .ds-chip small{display:none}
  .ds-facts div:nth-child(4){grid-column:1/-1;padding-left:0;border-left:0}
  .ds-ctas .dd-btn{width:100%;justify-content:center}
  .dd .ds-soon{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .dd-js .ds-row .ds-panel{clip-path:none;opacity:1}
  .dd-js .ds-row .ds-pack__in,.dd-js .ds-row .ds-num{opacity:1;transform:none;translate:none}
  .dd-js .ds-tag mark{background-size:100% 100%}
  .dd-js .ds-table tbody tr{opacity:1;translate:none}
  .ds-strip a,.ds-pack{transform:none!important}
  .ds-marquee__track{animation:none}
}